mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-01 02:38:43 -05:00
22 lines
105 KiB
HTML
22 lines
105 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
|
|
<title>Raster</title>
|
||
|
|
<link rel="stylesheet" href="../css/style.css">
|
||
|
|
<script type="text/javascript" src="../../dist/paper.js"></script>
|
||
|
|
<script type="text/paperscript" canvas="canvas">
|
||
|
|
var tiger = '[["layer",{"children":[["group",{"name":"svg","children":[["group",{"children":[["group",{"children":[["path",{"segments":[[-122.3,84.29],[[-123.03,86.16],[0.82,0.02],[-0.82,-0.02]],[[-160.83,40.31],[20.53,-2.24],[0,0]],[[-122.3,84.29],[-20.75,-51.33],[0,0]]],"closed":true,"fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.17}]],"fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.17}],["group",{"children":[["path",{"segments":[[-118.77,81.26],[[-120.09,82.78],[0.77,0.3],[-0.77,-0.3]],[[-140.04,26.8],[20.07,4.87],[0,0]],[[-118.77,81.26],[-2.05,-55.33],[0,0]]],"closed":true,"fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.17}]],"fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.17}],["group",{"children":[["path",{"segments":[[-91.28,123.59],[[-90.12,125.23],[0.47,-0.68],[-0.47,0.68]],[[-149.22,131.46],[9.46,-18.36],[0,0]],[[-91.28,123.59],[-54.26,-11.02],[0,0]]],"closed":true,"fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.17}]],"fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.17}],["group",{"children":[["path",{"segments":[[-94.09,133.8],[[-92.47,134.99],[0.23,-0.79],[-0.23,0.79]],[[-146.6,159.52],[3.19,-20.4],[0,0]],[[-94.09,133.8],[-54.96,6.64],[0,0]]],"closed":true,"fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.17}]],"fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.17}],["group",{"children":[["path",{"segments":[[-98.3,128.28],[[-96.87,129.69],[0.35,-0.75],[-0.35,0.75]],[[-154,146.06],[6.13,-19.72],[0,0]],[[-98.3,128.28],[-55.34,-1.45],[0,0]]],"closed":true,"fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.17}]],"fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.17}],["group",{"children":[["path",{"segments":[[-109.01,110.07],[[-108.34,111.97],[0.64,-0.52],[-0.64,0.52]],[[-166.87,101.68],[14.15,-15.04],[0,0]],[[-109.01,110.07],[-49.12,-25.54],[0,0]]],"closed":true,"fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.17}]],"fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.17}],["group",{"children":[["path",{"segments":[[-116.55,114.26],[[-115.67,116.07],[0.58,-0.59],[-0.58,0.59]],[[-174.99,112.47],[12.35,-16.55],[0,0]],[[-116.55,114.26],[-51.69,-19.82],[0,0]]],"closed":true,"fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.17}]],"fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.17}],["group",{"children":[["path",{"segments":[[-119.15,118.33],[[-118.04,120.01],[0.49,-0.66],[-0.49,0.66]],[[-177.29,124.52],[9.98,-18.08],[0,0]],[[-119.15,118.33],[-53.91,-12.59],[0,0]]],"closed":true,"fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.17}]],"fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.17}],["group",{"children":[["path",{"segments":[[-108.42,118.95],[[-108,120.92],[0.7,-0.43],[-0.7,0.43]],[[-164.73,103.21],[15.96,-13.11],[0,0]],[[-108.42,118.95],[-45.44,-31.62],[0,0]]],"closed":true,"fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.17}]],"fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.17}],["group",{"children":[["path",{"segments":[[-128.2,90],[[-128.4,92],[0.8,-0.2],[-0.8,0.2]],[[-177,57.8],[19.2,-7.6],[0,0]],[[-128.2,90],[-33.6,-44],[0,0]]],"closed":true,"fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.17}]],"fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.17}],["group",{"children":[["path",{"segments":[[-127.5,96.98],[[-127.27,98.97],[0.74,-0.37],[-0.74,0.37]],[[-182.1,76.06],[17.11,-11.56],[0,0]],[[-127.5,96.98],[-42.3,-35.72],[0,0]]],"closed":true,"fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.17}]],"fillColor":["rgb",1,1,1],"strokeColor":["rgb",0,0,0],"strokeWidth":0.17}],["group",{"children":[["path",{"segments":[[-127.62,101.35],[[-127.2,103.32],[0.7,-0.44],[-0.7,0.43]],[[-183.93,85.61],[15.96,-13.11],[0,0]],[[-127.62,101.35],[-45.44,-31.62],[0,0]]],"closed":true,"fillColor":["rgb
|
||
|
|
var start = Date.now();
|
||
|
|
Base.fromJson(tiger);
|
||
|
|
console.log('Load JSON', Date.now() - start);
|
||
|
|
var start = Date.now();
|
||
|
|
document.getElementById('svg').appendChild(project.exportSvg());
|
||
|
|
console.log('Export SVG', Date.now() - start);
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<canvas id="canvas" width="500" height="500"></canvas>
|
||
|
|
<svg id="svg" style="width: 500px; height: 500px"></svg>
|
||
|
|
</body>
|
||
|
|
</html>
|