@turbowarp/paper 0.12.202407161743

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (139) hide show
  1. package/AUTHORS.md +18 -0
  2. package/CHANGELOG.md +701 -0
  3. package/LICENSE.txt +23 -0
  4. package/README.md +381 -0
  5. package/dist/node/canvas.js +66 -0
  6. package/dist/node/extend.js +156 -0
  7. package/dist/node/self.js +58 -0
  8. package/dist/node/xml.js +40 -0
  9. package/dist/paper-core.js +15805 -0
  10. package/dist/paper-full.js +17574 -0
  11. package/examples/Animated/AnimatedStar.html +53 -0
  12. package/examples/Animated/BooleanOperations.html +115 -0
  13. package/examples/Animated/CandyCrash.html +151 -0
  14. package/examples/Animated/Extruded.html +50 -0
  15. package/examples/Animated/Lines.html +53 -0
  16. package/examples/Animated/Smoothing.html +70 -0
  17. package/examples/Animated/Space.html +86 -0
  18. package/examples/Animated/SpaceUsingShapes.html +79 -0
  19. package/examples/Games/Paperoids.html +569 -0
  20. package/examples/JSON/Circle Testing.html +34 -0
  21. package/examples/JSON/Compound Path.html +25 -0
  22. package/examples/JSON/Empty Path Testing.html +31 -0
  23. package/examples/JSON/Gradients.html +34 -0
  24. package/examples/JSON/Group Transform.html +28 -0
  25. package/examples/JSON/Line Testing.html +44 -0
  26. package/examples/JSON/Random Path Testing.html +42 -0
  27. package/examples/JSON/Raster.html +29 -0
  28. package/examples/JSON/Rect and Attribute Testing.html +56 -0
  29. package/examples/JSON/Rotated Primitives.html +55 -0
  30. package/examples/JSON/Selection.html +43 -0
  31. package/examples/JSON/Shapes.html +54 -0
  32. package/examples/JSON/Symbols.html +30 -0
  33. package/examples/JSON/Text Testing.html +38 -0
  34. package/examples/JSON/Tiger.html +19 -0
  35. package/examples/JSON/Transform Test 1.html +32 -0
  36. package/examples/JSON/Transform Test 2.html +30 -0
  37. package/examples/Node.js/AnimatedStar.js +52 -0
  38. package/examples/Node.js/BooleanOperations.js +36 -0
  39. package/examples/Node.js/JSONtoPDF.js +20 -0
  40. package/examples/Node.js/Raster.js +32 -0
  41. package/examples/Node.js/RasterRemote.js +33 -0
  42. package/examples/Node.js/SvgExport.js +52 -0
  43. package/examples/Node.js/SvgImport.js +23 -0
  44. package/examples/Node.js/Tadpoles.js +16 -0
  45. package/examples/Node.js/Tadpoles.pjs +278 -0
  46. package/examples/Node.js/in.json +1 -0
  47. package/examples/Node.js/in.svg +16 -0
  48. package/examples/Paperjs.org/BooleanOperattions.html +115 -0
  49. package/examples/Paperjs.org/BouncingBalls.html +103 -0
  50. package/examples/Paperjs.org/Chain.html +54 -0
  51. package/examples/Paperjs.org/DivisionRaster.html +72 -0
  52. package/examples/Paperjs.org/FutureSplash.html +122 -0
  53. package/examples/Paperjs.org/HitTesting.html +103 -0
  54. package/examples/Paperjs.org/InteractiveTiger.html +777 -0
  55. package/examples/Paperjs.org/MetaBalls.html +132 -0
  56. package/examples/Paperjs.org/NyanRainbow.html +202 -0
  57. package/examples/Paperjs.org/PathIntersections.html +76 -0
  58. package/examples/Paperjs.org/Qbertify.html +146 -0
  59. package/examples/Paperjs.org/RadialRainbows.html +80 -0
  60. package/examples/Paperjs.org/RoundedRectangles.html +41 -0
  61. package/examples/Paperjs.org/SatieLikedToDraw.html +140 -0
  62. package/examples/Paperjs.org/Simplify.html +63 -0
  63. package/examples/Paperjs.org/SpiralRaster.html +120 -0
  64. package/examples/Paperjs.org/Tadpoles.html +283 -0
  65. package/examples/Paperjs.org/Voronoi.html +134 -0
  66. package/examples/Rasters/PhyllotaxisRaster.html +96 -0
  67. package/examples/Rasters/Raster.html +34 -0
  68. package/examples/Rasters/RotationRaster.html +44 -0
  69. package/examples/Rasters/Smoothing.html +48 -0
  70. package/examples/SVG Export/Circle Testing.html +32 -0
  71. package/examples/SVG Export/Clipping.html +17 -0
  72. package/examples/SVG Export/Compound Path.html +22 -0
  73. package/examples/SVG Export/Empty Path Testing.html +28 -0
  74. package/examples/SVG Export/Gradients.html +52 -0
  75. package/examples/SVG Export/Group Transform.html +25 -0
  76. package/examples/SVG Export/Line Testing.html +41 -0
  77. package/examples/SVG Export/Random Path Testing.html +39 -0
  78. package/examples/SVG Export/Raster.html +21 -0
  79. package/examples/SVG Export/Rect and Attribute Testing.html +53 -0
  80. package/examples/SVG Export/Rotated Primitives.html +80 -0
  81. package/examples/SVG Export/Shapes.html +58 -0
  82. package/examples/SVG Export/Symbols.html +27 -0
  83. package/examples/SVG Export/Text Testing.html +45 -0
  84. package/examples/SVG Export/Tiger.html +23 -0
  85. package/examples/SVG Export/Transform Test 1.html +29 -0
  86. package/examples/SVG Export/Transform Test 2.html +27 -0
  87. package/examples/SVG Import/Arcs.html +78 -0
  88. package/examples/SVG Import/Butterfly.html +223 -0
  89. package/examples/SVG Import/Circle and Ellipse Testing.html +26 -0
  90. package/examples/SVG Import/Clipping.html +100 -0
  91. package/examples/SVG Import/From File.html +30 -0
  92. package/examples/SVG Import/Gradient.html +138 -0
  93. package/examples/SVG Import/Gradients.html +30 -0
  94. package/examples/SVG Import/Inkscape Pivot.html +52 -0
  95. package/examples/SVG Import/Inkscape.html +88 -0
  96. package/examples/SVG Import/Line Testing.html +24 -0
  97. package/examples/SVG Import/MoreGradients.html +107 -0
  98. package/examples/SVG Import/Multiple Paths Test 1.html +42 -0
  99. package/examples/SVG Import/Multiple Paths Test 2.html +33 -0
  100. package/examples/SVG Import/Nested Groups Test.html +78 -0
  101. package/examples/SVG Import/Polybezier.html +43 -0
  102. package/examples/SVG Import/Rect Testing.html +25 -0
  103. package/examples/SVG Import/Symbols.html +24 -0
  104. package/examples/SVG Import/Testing.html +40 -0
  105. package/examples/SVG Import/Text Testing.html +19 -0
  106. package/examples/SVG Import/Tiger.html +742 -0
  107. package/examples/SVG Import/Transform Testing.html +22 -0
  108. package/examples/SVG Import/Viewbox.html +38 -0
  109. package/examples/Scripts/Arcs.html +39 -0
  110. package/examples/Scripts/BlendModes.html +77 -0
  111. package/examples/Scripts/BooleanOperations.html +937 -0
  112. package/examples/Scripts/CompoundPath.html +19 -0
  113. package/examples/Scripts/CurveTimeParameterization.html +61 -0
  114. package/examples/Scripts/HslColor.html +53 -0
  115. package/examples/Scripts/PathStructure.html +82 -0
  116. package/examples/Scripts/PathTangents.html +73 -0
  117. package/examples/Scripts/Resize.html +42 -0
  118. package/examples/Scripts/RoundRectangle.html +28 -0
  119. package/examples/Scripts/Shapes.html +54 -0
  120. package/examples/Scripts/StrokeBounds.html +101 -0
  121. package/examples/Scripts/StrokeScaling.html +65 -0
  122. package/examples/Tools/BezierTool.html +90 -0
  123. package/examples/Tools/Circles.html +28 -0
  124. package/examples/Tools/Clouds.html +35 -0
  125. package/examples/Tools/DrippingBrush.html +73 -0
  126. package/examples/Tools/FancyBrush.html +82 -0
  127. package/examples/Tools/Grid.html +44 -0
  128. package/examples/Tools/MultiLines.html +44 -0
  129. package/examples/Tools/MultipleTools.html +44 -0
  130. package/examples/Tools/PathEditing.html +95 -0
  131. package/examples/Tools/SquareRounded.html +76 -0
  132. package/examples/Tools/Stars.html +38 -0
  133. package/examples/Tools/Vektor.html +200 -0
  134. package/examples/Tools/Wave.html +50 -0
  135. package/examples/Tools/WormFarm.html +88 -0
  136. package/examples/Worker/Main.html +53 -0
  137. package/examples/Worker/Worker.js +14 -0
  138. package/examples/css/style.css +12 -0
  139. package/package.json +109 -0
package/examples/SVG Import/Inkscape.html ADDED
@@ -0,0 +1,88 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Inkscape</title>
6
+ <link rel="stylesheet" href="../css/style.css">
7
+ <script type="text/javascript" src="../../dist/paper-full.js"></script>
8
+ <script type="text/paperscript" canvas="canvas">
9
+ var start = Date.now();
10
+ project.importSVG(document.getElementById('svg2'));
11
+ console.log(Date.now() - start);
12
+ // console.log(project.exportJSON());
13
+ </script>
14
+ </head>
15
+ <body>
16
+ <svg
17
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
18
+ xmlns:cc="http://creativecommons.org/ns#"
19
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
20
+ xmlns:svg="http://www.w3.org/2000/svg"
21
+ xmlns="http://www.w3.org/2000/svg"
22
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
23
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
24
+ width="400"
25
+ height="400"
26
+ id="svg2"
27
+ version="1.1"
28
+ inkscape:version="0.48.3.1 r9886"
29
+ sodipodi:docname="a.svg">
30
+ <defs
31
+ id="defs4" />
32
+ <sodipodi:namedview
33
+ id="base"
34
+ pagecolor="#ffffff"
35
+ bordercolor="#666666"
36
+ borderopacity="1.0"
37
+ inkscape:pageopacity="0.0"
38
+ inkscape:pageshadow="2"
39
+ inkscape:zoom="0.77875"
40
+ inkscape:cx="330.27138"
41
+ inkscape:cy="184.86687"
42
+ inkscape:document-units="px"
43
+ inkscape:current-layer="layer1"
44
+ showgrid="false"
45
+ width="400px"
46
+ inkscape:window-width="1280"
47
+ inkscape:window-height="776"
48
+ inkscape:window-x="0"
49
+ inkscape:window-y="24"
50
+ inkscape:window-maximized="1" />
51
+ <metadata
52
+ id="metadata7">
53
+ <rdf:RDF>
54
+ <cc:Work
55
+ rdf:about="">
56
+ <dc:format>image/svg+xml</dc:format>
57
+ <dc:type
58
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
59
+ <dc:title />
60
+ </cc:Work>
61
+ </rdf:RDF>
62
+ </metadata>
63
+ <g
64
+ inkscape:label="Calque 1"
65
+ inkscape:groupmode="layer"
66
+ id="layer1"
67
+ transform="translate(0,-652.3622)">
68
+ <rect
69
+ style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#808080;stroke-width:5.44782829;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:10.89565646, 5.44782823;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
70
+ id="rect2985"
71
+ width="394.55215"
72
+ height="394.55219"
73
+ x="2.7239141"
74
+ y="655.08612" />
75
+ <g
76
+ style="font-size:199.2015686px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:end;line-height:110.00000238%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;font-family:Quicksand;-inkscape-font-specification:Quicksand Bold"
77
+ id="text3755">
78
+ <path
79
+ d="m 234.38449,911.25829 c 1.59361,4.38243 5.77685,6.97206 10.15928,6.97206 1.39441,0 2.78882,-0.19921 3.78483,-0.59761 5.77684,-2.19121 8.56566,-8.56567 6.57365,-14.34251 L 210.8787,785.96051 c -1.79281,-4.38243 -5.97605,-7.17126 -10.55768,-6.97206 -4.38243,-0.1992 -8.76487,2.58963 -10.55769,6.97206 l -44.02354,117.32972 c -1.99202,5.77684 0.79681,12.1513 6.57365,14.34251 1.19521,0.3984 2.39042,0.59761 3.78483,0.59761 4.38243,0 8.56567,-2.58963 10.35848,-6.97206 l 9.76088,-25.8962 48.40598,0 9.76088,25.8962 m -50.1988,-47.80837 16.13533,-42.82834 16.13532,42.82834 -32.27065,0"
80
+ style="fill:#ff0000;fill-opacity:1"
81
+ id="path3760" />
82
+ </g>
83
+ </g>
84
+ </svg>
85
+
86
+ <canvas id="canvas" width="400" height="400"></canvas>
87
+ </body>
88
+ </html>
package/examples/SVG Import/Line Testing.html ADDED
@@ -0,0 +1,24 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Line Testing</title>
6
+ <link rel="stylesheet" href="../css/style.css">
7
+ <script type="text/javascript" src="../../dist/paper-full.js"></script>
8
+ <script type="text/paperscript" canvas="canvas">
9
+ project.importSVG(document.getElementById('svg'));
10
+ </script>
11
+ </head>
12
+ <body>
13
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
14
+ <line x1="4" y1="20" x2="200" y2="200" style="stroke:red;stroke-width:10px;stroke-dasharray: 10px, 4px;stroke-linecap: "butt" id="line1" />
15
+ <line x1="100" y1="40" x2="250" y2="250" style="stroke:green;stroke-width:5px;stroke-dasharray: 5px,3px,2px;stroke-linecap: "round" id="line2" />
16
+ <line x1="50" y1="100" x2="200" y2="200" style="stroke:blue;stroke-width:9px;stroke-dasharray: 1px;stroke-linecap: "square" id="line3" />
17
+ <line x1="4" y1="200" x2="200" y2="200" style="stroke:black;stroke-width:20px;stroke-dasharray: 1px,2px,3px,4px,5px;stroke-linecap: "butt" id="line4" />
18
+ <line x1="8" y1="275" x2="100" y2="444" style="stroke:orange;stroke-width:11px;stroke-dasharray: 1px;stroke-linecap: "round" id="line5" />
19
+ <line x1="20" y1="344" x2="50" y2="400" style="stroke:yellow;stroke-width:30px;stroke-dasharray: 5px;stroke-linecap: "square" id="line6" />
20
+ <line x1="4" y1="400" x2="450" y2="450" style="stroke:purple;stroke-width:1px;stroke-dasharray: 11px, 4px;stroke-linecap: "butt" id="line7" />
21
+ </svg>
22
+ <canvas id="canvas" width="500" height="500"></canvas>
23
+ </body>
24
+ </html>
package/examples/SVG Import/MoreGradients.html ADDED
@@ -0,0 +1,107 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Gradients</title>
6
+ <script type="text/javascript" src="../../dist/paper-full.js"></script>
7
+ <script type="text/paperscript" canvas="canvas">
8
+ project.importSVG(document.getElementById('Layer_1'));
9
+ </script>
10
+ </head>
11
+ <body>
12
+ <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
13
+ width="500" height="1000" enable-background="new 0 0 595.28 841.89" xml:space="preserve">
14
+ <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="69" y1="239.5" x2="530" y2="239.5">
15
+ <stop offset="0" style="stop-color:#231F20"/>
16
+ <stop offset="0.0896" style="stop-color:#231F20;stop-opacity:0.9104"/>
17
+ <stop offset="1" style="stop-color:#231F20;stop-opacity:0"/>
18
+ </linearGradient>
19
+ <rect x="69" y="210" fill="url(#SVGID_1_)" width="461" height="59"/>
20
+ <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="69" y1="162.5" x2="530" y2="162.5">
21
+ <stop offset="0" style="stop-color:#00A14B"/>
22
+ <stop offset="0.0031" style="stop-color:#0BA449"/>
23
+ <stop offset="0.0203" style="stop-color:#43B13D"/>
24
+ <stop offset="0.038" style="stop-color:#75BD33"/>
25
+ <stop offset="0.0559" style="stop-color:#A0C72A"/>
26
+ <stop offset="0.074" style="stop-color:#C2CF23"/>
27
+ <stop offset="0.0922" style="stop-color:#DDD61E"/>
28
+ <stop offset="0.1107" style="stop-color:#F0DA1A"/>
29
+ <stop offset="0.1298" style="stop-color:#FBDD18"/>
30
+ <stop offset="0.15" style="stop-color:#FFDE17"/>
31
+ <stop offset="0.3" style="stop-color:#F26522"/>
32
+ <stop offset="0.47" style="stop-color:#00A14B"/>
33
+ <stop offset="0.64" style="stop-color:#FFDE17"/>
34
+ <stop offset="0.8012" style="stop-color:#F26522"/>
35
+ <stop offset="1" style="stop-color:#00A14B"/>
36
+ </linearGradient>
37
+ <rect x="69" y="133" fill="url(#SVGID_2_)" width="461" height="59"/>
38
+ <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="69" y1="91.5" x2="530" y2="91.5">
39
+ <stop offset="0%" style="stop-color:#00A14B"/>
40
+ <stop offset="0.31%" style="stop-color:#0BA449"/>
41
+ <stop offset="2%" style="stop-color:#43B13D"/>
42
+ <stop offset="3.8%" style="stop-color:#75BD33"/>
43
+ <stop offset="5.59%" style="stop-color:#A0C72A"/>
44
+ <stop offset="7.4%" style="stop-color:#C2CF23"/>
45
+ <stop offset="9.22%" style="stop-color:#DDD61E"/>
46
+ <stop offset="11.07%" style="stop-color:#F0DA1A"/>
47
+ <stop offset="12.98%" style="stop-color:#FBDD18"/>
48
+ <stop offset="15%" style="stop-color:#FFDE17"/>
49
+ <stop offset="30%" style="stop-color:#F26522"/>
50
+ <stop offset="47%" style="stop-color:#00A14B"/>
51
+ <stop offset="64%" style="stop-color:#FFDE17"/>
52
+ <stop offset="80.12%" style="stop-color:#F26522"/>
53
+ <stop offset="100%" style="stop-color:#00A14B"/>
54
+ </linearGradient>
55
+ <rect x="69" y="62" fill="url(#SVGID_3_)" width="461" height="59"/>
56
+ <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="24.6909" y1="760.1406" x2="485.6914" y2="760.1406" gradientTransform="matrix(0 1 -1 0 859.6406 264.3599)">
57
+ <stop offset="0" style="stop-color:#231F20"/>
58
+ <stop offset="0.0896" style="stop-color:#231F20;stop-opacity:0.9104"/>
59
+ <stop offset="1" style="stop-color:#231F20;stop-opacity:0"/>
60
+ </linearGradient>
61
+ <rect x="70" y="289.051" fill="url(#SVGID_4_)" width="59" height="461"/>
62
+ <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="24.6909" y1="683.1396" x2="485.6914" y2="683.1396" gradientTransform="matrix(0 1 -1 0 859.6406 264.3599)">
63
+ <stop offset="0" style="stop-color:#00A14B"/>
64
+ <stop offset="0.0031" style="stop-color:#0BA449"/>
65
+ <stop offset="0.0203" style="stop-color:#43B13D"/>
66
+ <stop offset="0.038" style="stop-color:#75BD33"/>
67
+ <stop offset="0.0559" style="stop-color:#A0C72A"/>
68
+ <stop offset="0.074" style="stop-color:#C2CF23"/>
69
+ <stop offset="0.0922" style="stop-color:#DDD61E"/>
70
+ <stop offset="0.1107" style="stop-color:#F0DA1A"/>
71
+ <stop offset="0.1298" style="stop-color:#FBDD18"/>
72
+ <stop offset="0.15" style="stop-color:#FFDE17"/>
73
+ <stop offset="0.3" style="stop-color:#F26522"/>
74
+ <stop offset="0.47" style="stop-color:#00A14B"/>
75
+ <stop offset="0.64" style="stop-color:#FFDE17"/>
76
+ <stop offset="0.8012" style="stop-color:#F26522"/>
77
+ <stop offset="1" style="stop-color:#00A14B"/>
78
+ </linearGradient>
79
+ <rect x="147.001" y="289.051" fill="url(#SVGID_5_)" width="59" height="461"/>
80
+ <radialGradient id="SVGID_6_" cx="368.75" cy="409.5503" r="92.1995" gradientUnits="userSpaceOnUse">
81
+ <stop offset="0.1656" style="stop-color:#FFFFFF"/>
82
+ <stop offset="0.2576" style="stop-color:#CBCBCB"/>
83
+ <stop offset="0.3651" style="stop-color:#969696"/>
84
+ <stop offset="0.474" style="stop-color:#686868"/>
85
+ <stop offset="0.5821" style="stop-color:#434343"/>
86
+ <stop offset="0.6893" style="stop-color:#252525"/>
87
+ <stop offset="0.7953" style="stop-color:#111111"/>
88
+ <stop offset="0.8995" style="stop-color:#040404"/>
89
+ <stop offset="1" style="stop-color:#000000"/>
90
+ </radialGradient>
91
+ <circle fill="url(#SVGID_6_)" cx="368.75" cy="409.55" r="92.2"/>
92
+ <radialGradient id="SVGID_7_" cx="368.75" cy="619.5508" r="92.1997" fx="323.3488" fy="618.7006" gradientUnits="userSpaceOnUse">
93
+ <stop offset="0.1656" style="stop-color:#FFFFFF"/>
94
+ <stop offset="0.2576" style="stop-color:#CBCBCB"/>
95
+ <stop offset="0.3651" style="stop-color:#969696"/>
96
+ <stop offset="0.474" style="stop-color:#686868"/>
97
+ <stop offset="0.5821" style="stop-color:#434343"/>
98
+ <stop offset="0.6893" style="stop-color:#252525"/>
99
+ <stop offset="0.7953" style="stop-color:#111111"/>
100
+ <stop offset="0.8995" style="stop-color:#040404"/>
101
+ <stop offset="1" style="stop-color:#000000"/>
102
+ </radialGradient>
103
+ <circle fill="url(#SVGID_7_)" cx="368.75" cy="619.551" r="92.2"/>
104
+ </svg>
105
+ <canvas id="canvas" width="500" height="1000"></canvas>
106
+ </body>
107
+ </html>
package/examples/SVG Import/Multiple Paths Test 1.html ADDED
@@ -0,0 +1,42 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Multiple Paths Test</title>
6
+ <link rel="stylesheet" href="../css/style.css">
7
+ <script type="text/javascript" src="../../dist/paper-full.js"></script>
8
+ <script type="text/paperscript" canvas="canvas">
9
+ project.importSVG(document.getElementById('svg'));
10
+ </script>
11
+ </head>
12
+ <body>
13
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
14
+ <g>
15
+ <circle cx="100" cy="400" r="100" style="fill:darkred;" id="circle" />
16
+ <g>
17
+ <rect x="200" y="20" rx="20" ry="10" width="150px" height="150px" style="fill:green" id="round" />
18
+ <circle cx="40" cy="100" r="20" style="fill:orange;" id="circle" />
19
+ </g>
20
+ </g>
21
+ <g>
22
+ <rect x="250" y="180" width="150px" height="150px" fill="blue" style="stroke-dasharray: 10px, 4px; stroke-width:0px;" id="rect" />
23
+ <ellipse cx="120" cy="250" rx="100" ry="50" style="fill:yellow;stroke-width:-1px" id="ellipse" />
24
+ </g>
25
+ <path d="m 100 350 q 100 -300 100 0 t 100 0 t 50 0" stroke="black" stroke-width="4px" fill="none" id="path" />
26
+
27
+ <path d="m 100 350 q 100 -300 100 0" stroke="black" stroke-width="4px" fill="none" id="path"/>
28
+ <path d="m 100 350 c 66.666666 -200 100 -200 100 0" stroke="black" stroke-width="4px" fill="none" />
29
+
30
+ <path d="m 100 350 q 100 -300 100 0 t 100 0 T 350 350" stroke="black" stroke-width="4px" fill="none" />
31
+ <path d="m 100 350 q 100 -300 100 0 T 300 350 t 50 0" stroke="black" stroke-width="4px" fill="none" />
32
+ <path d="m 100 350 q 100 -300 100 0 T 300 350 T 350 350" stroke="black" stroke-width="4px" fill="none" />
33
+ <path d="m 100 350 Q 200 50 200 350 t 100 0 t 50 0" stroke="black" stroke-width="4px" fill="none" />
34
+ <path d="m 100 350 Q 200 50 200 350 t 100 0 T 350 350" stroke="black" stroke-width="4px" fill="none" />
35
+ <path d="m 100 350 Q 200 50 200 350 T 300 350 t 50 0" stroke="black" stroke-width="4px" fill="none" />
36
+ <path d="m 100 350 Q 200 50 200 350 T 300 350 T 350 350" stroke="black" stroke-width="4px" fill="none" />
37
+ <path d="M 50 75 c 25 -50 25 -50 100 0 s 100 100 100 0 s 25 -50 100 0" stroke="blue" stroke-width="4px" fill="none"/>
38
+ <text x="20" y="15" stroke="green" fill="green" style="font:15px arial;" id="text" text-anchor="start">I love SVG</text>
39
+ </svg>
40
+ <canvas id="canvas" width="500" height="500"></canvas>
41
+ </body>
42
+ </html>
package/examples/SVG Import/Multiple Paths Test 2.html ADDED
@@ -0,0 +1,33 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Multiple Paths Test 2</title>
6
+ <link rel="stylesheet" href="../css/style.css">
7
+ <script type="text/javascript" src="../../dist/paper-full.js"></script>
8
+ <script type="text/paperscript" canvas="canvas">
9
+ project.importSVG(document.getElementById('svg'));
10
+ </script>
11
+ </head>
12
+ <body>
13
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
14
+ <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3px" fill="none" />
15
+ <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3px" fill="none" />
16
+ <path id="lineBC" d="M 175 200 l 150 0" stroke="red" stroke-width="3px" fill="none" />
17
+ <path id="quadcurveABC" d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5px" fill="none" />
18
+ <!-- Mark relevant points -->
19
+ <g stroke="black" stroke-width="3" fill="black">
20
+ <circle id="pointA" cx="100" cy="350" r="3" />
21
+ <circle id="pointB" cx="250" cy="50" r="3" />
22
+ <circle id="pointC" cx="400" cy="350" r="3" />
23
+ </g>
24
+ <!-- Label the points -->
25
+ <g fill="black" stroke="none" text-anchor="middle">
26
+ <text font-size="30" font-family="times" x="100" y="350" dx="-30">A</text>
27
+ <text font-size="30" font-family="times" x="250" y="50" dy="-10">B</text>
28
+ <text font-size="30" font-family="times" x="400" y="350" dx="30">C</text>
29
+ </g>
30
+ </svg>
31
+ <canvas id="canvas" width="500" height="500"></canvas>
32
+ </body>
33
+ </html>
package/examples/SVG Import/Nested Groups Test.html ADDED
@@ -0,0 +1,78 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Nested Groups Test</title>
6
+ <link rel="stylesheet" href="../css/style.css">
7
+ <script type="text/javascript" src="../../dist/paper-full.js"></script>
8
+ <script type="text/paperscript" canvas="canvas">
9
+ project.importSVG(document.getElementById('svg'));
10
+ </script>
11
+ </head>
12
+ <body>
13
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
14
+ <g>
15
+ <circle cx="25" cy="25" r="20" style="fill:orange;" id="circle" />
16
+ <g>
17
+ <circle cx="75" cy="25" r="20" style="fill:red;" id="circle" />
18
+ <g>
19
+ <circle cx="125" cy="25" r="20" style="fill:pink;" id="circle" />
20
+ <g>
21
+ <circle cx="175" cy="25" r="20" style="fill:blue;" id="circle" />
22
+ <g>
23
+ <circle cx="225" cy="25" r="20" style="fill:green;" id="circle" />
24
+ <g>
25
+ <circle cx="275" cy="25" r="20" style="fill:purple;" id="circle" />
26
+ <g>
27
+ <circle cx="25" cy="75" r="20" style="fill:black;" id="circle" />
28
+ <g>
29
+ <circle cx="75" cy="75" r="20" style="fill:indigo;" id="circle" />
30
+ <g>
31
+ <circle cx="125" cy="75" r="20" style="fill:gold;" id="circle" />
32
+ <g>
33
+ <circle cx="175" cy="75" r="20" style="fill:brown;" id="circle" />
34
+ <g>
35
+ <circle cx="225" cy="75" r="20" style="fill:darkred;" id="circle" />
36
+ <g>
37
+ <circle cx="275" cy="75" r="20" style="fill:darkgreen;" id="circle" />
38
+ <g>
39
+ <circle cx="25" cy="125" r="20" style="fill:darkgrey;" id="circle" />
40
+ <g>
41
+ <circle cx="75" cy="125" r="20" style="fill:violet;" id="circle" />
42
+ <g>
43
+ <circle cx="125" cy="125" r="20" style="fill:yellow;" id="circle" />
44
+ <g>
45
+ <circle cx="175" cy="125" r="20" style="fill:lightblue;" id="circle" />
46
+ <g>
47
+ <circle cx="225" cy="125" r="20" style="fill:lightgreen;" id="circle" />
48
+ <g>
49
+ <circle cx="275" cy="125" r="20" style="fill:darkblue;" id="circle" />
50
+ <g>
51
+ <circle cx="25" cy="175" r="20" style="fill:darkorange;" id="circle" />
52
+ <g>
53
+ <circle cx="75" cy="175" r="20" style="fill:lawngreen;" id="circle" />
54
+ </g>
55
+ </g>
56
+ </g>
57
+ </g>
58
+ </g>
59
+ </g>
60
+ </g>
61
+ </g>
62
+ </g>
63
+ </g>
64
+ </g>
65
+ </g>
66
+ </g>
67
+ </g>
68
+ </g>
69
+ </g>
70
+ </g>
71
+ </g>
72
+ </g>
73
+ </g>
74
+
75
+ </svg>
76
+ <canvas id="canvas" width="500" height="500"></canvas>
77
+ </body>
78
+ </html>
package/examples/SVG Import/Polybezier.html ADDED
@@ -0,0 +1,43 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Rect Testing</title>
6
+ <link rel="stylesheet" href="../css/style.css">
7
+ <script type="text/javascript" src="../../dist/paper-full.js"></script>
8
+ <script type="text/paperscript" canvas="canvas">
9
+ project.importSVG(document.getElementById('svg'));
10
+ </script>
11
+ <style type="text/css">
12
+ .Border { fill:none; stroke:blue; stroke-width:1; }
13
+ .Connect { fill:none; stroke:#888888; stroke-width:2; }
14
+ .SamplePath { fill:none; stroke:red; stroke-width:5; }
15
+ .EndPoint { fill:none; stroke:#888888; stroke-width:2; }
16
+ .CtlPoint { fill:#888888; stroke:none; }
17
+ .AutoCtlPoint { fill:none; stroke:blue; stroke-width:4; }
18
+ .Label { font-size:22px; font-family: Verdana; }
19
+ </style>
20
+ </head>
21
+ <body>
22
+ <svg id="svg" width="500" height="500"
23
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
24
+ <polyline class="Connect" points="100,200 100,100" />
25
+ <polyline class="Connect" points="250,100 250,200" />
26
+ <polyline class="Connect" points="250,200 250,300" />
27
+ <polyline class="Connect" points="400,300 400,200" />
28
+ <path class="SamplePath" d="M100,200 C100,100 250,100 250,200
29
+ S400,300 400,200" />
30
+ <circle class="EndPoint" cx="100" cy="200" r="10" />
31
+ <circle class="EndPoint" cx="250" cy="200" r="10" />
32
+ <circle class="EndPoint" cx="400" cy="200" r="10" />
33
+ <circle class="CtlPoint" cx="100" cy="100" r="10" />
34
+ <circle class="CtlPoint" cx="250" cy="100" r="10" />
35
+ <circle class="CtlPoint" cx="400" cy="300" r="10" />
36
+ <circle class="AutoCtlPoint" cx="250" cy="300" r="9" />
37
+ <text class="Label" x="25" y="70">M100,200 C100,100 250,100 250,200</text>
38
+ <text class="Label" x="325" y="350"
39
+ style="text-anchor:middle">S400,300 400,200</text>
40
+ </svg>
41
+ <canvas id="canvas" width="500" height="500"></canvas>
42
+ </body>
43
+ </html>
package/examples/SVG Import/Rect Testing.html ADDED
@@ -0,0 +1,25 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Rect Testing</title>
6
+ <link rel="stylesheet" href="../css/style.css">
7
+ <script type="text/javascript" src="../../dist/paper-full.js"></script>
8
+ <script type="text/paperscript" canvas="canvas">
9
+ var group = project.importSVG(document.getElementById('svg'));
10
+ console.log(JSON.stringify(group.children[0].data));
11
+ </script>
12
+ </head>
13
+ <body>
14
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
15
+ <rect rx="20" ry="10" width="50px" height="50px" style="fill:green; stroke:black; stroke-width:5px" id="round1" data-paper-data='{"string":"----","number":1234,"array":["a ray","some rays"],"bool":true,"nil":null,"point":["Point",12,34],"size":["Size",12,34],"rectangle":["Rectangle",12,34,56,78],"deep":{"deeper":{"deepest":true}}}' />
16
+ <rect x="100" y="10" rx="20" ry="10" width="75px" height="75px" style="fill:red; stroke: brown; stroke-width:1px; fill-opacity:.5; stroke-opacity:.9" id="round2" />
17
+ <rect x="10" y="300" rx="20" ry="10" width="75px" height="150px" style="fill:blue; opacity:.5" id="round3" />
18
+ <rect x="50" y="100" rx="20" ry="10" width="150px" height="150px" style="fill: orange" id="round4" />
19
+ <rect x="300" y="10" width="50" height="50px" fill="gold" style="stroke-dasharray: 10, 4; stroke: black; stroke-width:5px" id="rect1" />
20
+ <rect x="300" y="300" width="100" height="100px" fill="pink" style="stroke-dasharray: 10, 4; stroke-width:50px;" id="rect2" />
21
+ <rect x="300" y="180" width="178" height="100px" fill="hotpink" style="stroke-dasharray: 10, 4; stroke-width:10px;" id="rect3" />
22
+ </svg>
23
+ <canvas id="canvas" width="500" height="500"></canvas>
24
+ </body>
25
+ </html>
package/examples/SVG Import/Symbols.html ADDED
@@ -0,0 +1,24 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Symbols Test</title>
6
+ <link rel="stylesheet" href="../css/style.css">
7
+ <script type="text/javascript" src="../../dist/paper-full.js"></script>
8
+ <script type="text/paperscript" canvas="canvas">
9
+ project.importSVG(document.getElementById('svg'));
10
+ </script>
11
+ </head>
12
+ <body>
13
+ <svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="595" height="841">
14
+ <symbol id="circle" viewBox="0 0 48 48" overflow="visible">
15
+ <path fill="#FF0049" d="M24,0c0-13.255-10.745-24-24-24S-24-13.255-24,0s10.745,24,24,24S24,13.255,24,0z"/>
16
+ </symbol>
17
+ <use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(1.1667 1.1667 1.1667 -1.1667 177.0005 96)"/>
18
+ <use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(0.5625 0 0 -0.5625 92 152)"/>
19
+ <use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(2.2415 -2.0119 -2.0119 -2.2415 176.9971 246.9941)"/>
20
+ <use xlink:href="#circle" width="48" height="48" x="-24" y="-24" transform="matrix(1 0 0 -1 84 65)"/>
21
+ </svg>
22
+ <canvas id="canvas" width="595" height="841"></canvas>
23
+ </body>
24
+ </html>
package/examples/SVG Import/Testing.html ADDED
@@ -0,0 +1,40 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Stroke Bounds</title>
6
+ <link rel="stylesheet" href="../css/style.css">
7
+ <script type="text/javascript" src="../../dist/paper-full.js"></script>
8
+ <script type="text/paperscript" canvas="canvas">
9
+ project.importSVG(document.getElementById('svg'));
10
+ </script>
11
+ </head>
12
+ <body>
13
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
14
+ <g>
15
+ <line x1="4" y1="20" x2="200" y2="200" style="stroke:red;stroke-width:10;stroke-dasharray: 10, 4;stroke-linecap: butt" id="line" />
16
+ <rect x="200" y="20" rx="20" ry="10" width="150" height="150" style="fill:green" id="round" />
17
+ <circle cx="40" cy="100" r="20" style="fill:orange;" id="circle" />
18
+ </g>
19
+ <g>
20
+ <rect x="250" y="180" width="150" height="150" fill="blue" style="stroke-dasharray: 10, 4; stroke-width:0;" id="rect" />
21
+ <ellipse cx="120" cy="250" rx="100" ry="50" style="fill:yellow;stroke-width:-1" id="ellipse" />
22
+ </g>
23
+ <path d="m 100 350 q 100 -300 100 0 t 100 0 t 50 0" stroke="black" stroke-width="4" fill="none" id="path" />
24
+
25
+ <path d="m 100 350 q 100 -300 100 0" stroke="black" stroke-width="4" fill="none" id="path"/>
26
+ <path d="m 100 350 c 66.666666 -200 100 -200 100 0" stroke="black" stroke-width="4" fill="none" />
27
+
28
+ <path d="m 100 350 q 100 -300 100 0 t 100 0 T 350 350" stroke="black" stroke-width="4" fill="none" />
29
+ <path d="m 100 350 q 100 -300 100 0 T 300 350 t 50 0" stroke="black" stroke-width="4" fill="none" />
30
+ <path d="m 100 350 q 100 -300 100 0 T 300 350 T 350 350" stroke="black" stroke-width="4" fill="none" />
31
+ <path d="m 100 350 Q 200 50 200 350 t 100 0 t 50 0" stroke="black" stroke-width="4" fill="none" />
32
+ <path d="m 100 350 Q 200 50 200 350 t 100 0 T 350 350" stroke="black" stroke-width="4" fill="none" />
33
+ <path d="m 100 350 Q 200 50 200 350 T 300 350 t 50 0" stroke="black" stroke-width="4" fill="none" />
34
+ <path d="m 100 350 Q 200 50 200 350 T 300 350 T 350 350" stroke="black" stroke-width="4" fill="none" />
35
+ <path d="M 50 75 c 25 -50 25 -50 100 0 s 100 100 100 0 s 25 -50 100 0" stroke="blue" stroke-width="4" fill="none"/>
36
+ <text x="20" y="15" stroke="green" fill="green" style="font:15px arial;" id="text">I love SVG</text>
37
+ </svg>
38
+ <canvas id="canvas" width="500" height="500"></canvas>
39
+ </body>
40
+ </html>
package/examples/SVG Import/Text Testing.html ADDED
@@ -0,0 +1,19 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Text Testing</title>
6
+ <link rel="stylesheet" href="../css/style.css">
7
+ <script type="text/javascript" src="../../dist/paper-full.js"></script>
8
+ <script type="text/paperscript" canvas="canvas">
9
+ project.importSVG(document.getElementById('svg'));
10
+ </script>
11
+ </head>
12
+ <body>
13
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
14
+ <text x="20" y="15" stroke="green" fill="green" style="font:15px arial;" id="text">Plain SVG Text</text>
15
+ <text x="20" y="50" fill="red" transform="rotate(30 20,40)" style="font:12px helvetica;">Rotated SVG Text</text>
16
+ </svg>
17
+ <canvas id="canvas" width="500" height="500"></canvas>
18
+ </body>
19
+ </html>