paper 0.12.18 → 0.12.20
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.
- package/CHANGELOG.md +49 -0
- package/README.md +5 -14
- package/dist/docs/assets/js/paper.js +94 -54
- package/dist/docs/classes/Color.html +2 -2
- package/dist/docs/classes/CompoundPath.html +2 -2
- package/dist/docs/classes/Curve.html +2 -2
- package/dist/docs/classes/CurveLocation.html +2 -2
- package/dist/docs/classes/Event.html +2 -2
- package/dist/docs/classes/Gradient.html +2 -2
- package/dist/docs/classes/GradientStop.html +2 -2
- package/dist/docs/classes/Group.html +2 -2
- package/dist/docs/classes/HitResult.html +2 -2
- package/dist/docs/classes/Item.html +2 -2
- package/dist/docs/classes/Key.html +2 -2
- package/dist/docs/classes/KeyEvent.html +2 -2
- package/dist/docs/classes/Layer.html +2 -2
- package/dist/docs/classes/Matrix.html +2 -2
- package/dist/docs/classes/MouseEvent.html +2 -2
- package/dist/docs/classes/PaperScope.html +2 -2
- package/dist/docs/classes/PaperScript.html +2 -2
- package/dist/docs/classes/Path.html +2 -2
- package/dist/docs/classes/PathItem.html +2 -2
- package/dist/docs/classes/Point.html +2 -2
- package/dist/docs/classes/PointText.html +2 -2
- package/dist/docs/classes/Project.html +2 -2
- package/dist/docs/classes/Raster.html +2 -2
- package/dist/docs/classes/Rectangle.html +2 -2
- package/dist/docs/classes/Segment.html +2 -2
- package/dist/docs/classes/Shape.html +2 -2
- package/dist/docs/classes/Size.html +2 -2
- package/dist/docs/classes/Style.html +2 -2
- package/dist/docs/classes/SymbolDefinition.html +2 -2
- package/dist/docs/classes/SymbolItem.html +2 -2
- package/dist/docs/classes/TextItem.html +2 -2
- package/dist/docs/classes/Tool.html +2 -2
- package/dist/docs/classes/ToolEvent.html +2 -2
- package/dist/docs/classes/Tween.html +2 -2
- package/dist/docs/classes/View.html +2 -2
- package/dist/docs/classes/global.html +2 -2
- package/dist/docs/classes/index.html +2 -2
- package/dist/docs/index.html +1 -1
- package/dist/node/canvas.js +9 -7
- package/dist/node/self.js +9 -1
- package/dist/paper-core.js +93 -53
- package/dist/paper-core.min.js +3 -3
- package/dist/paper-full.js +94 -54
- package/dist/paper-full.min.js +3 -3
- package/dist/paper.d.ts +2 -2
- package/package.json +11 -7
- package/dist/paperjs/LICENSE.txt +0 -23
- package/dist/paperjs/dist/node/canvas.js +0 -66
- package/dist/paperjs/dist/node/extend.js +0 -156
- package/dist/paperjs/dist/node/self.js +0 -58
- package/dist/paperjs/dist/node/xml.js +0 -40
- package/dist/paperjs/dist/paper-core.d.ts +0 -1
- package/dist/paperjs/dist/paper-core.js +0 -15703
- package/dist/paperjs/dist/paper-core.min.js +0 -32
- package/dist/paperjs/dist/paper-full.js +0 -17472
- package/dist/paperjs/dist/paper-full.min.js +0 -32
- package/dist/paperjs/dist/paper.d.ts +0 -7394
- package/dist/paperjs/docs/assets/css/docs.css +0 -414
- package/dist/paperjs/docs/assets/js/codemirror.js +0 -4
- package/dist/paperjs/docs/assets/js/docs.js +0 -493
- package/dist/paperjs/docs/assets/js/jquery.js +0 -6
- package/dist/paperjs/docs/assets/js/paper.js +0 -17472
- package/dist/paperjs/docs/classes/Color.html +0 -2188
- package/dist/paperjs/docs/classes/CompoundPath.html +0 -8877
- package/dist/paperjs/docs/classes/Curve.html +0 -2323
- package/dist/paperjs/docs/classes/CurveLocation.html +0 -672
- package/dist/paperjs/docs/classes/Event.html +0 -176
- package/dist/paperjs/docs/classes/Gradient.html +0 -240
- package/dist/paperjs/docs/classes/GradientStop.html +0 -273
- package/dist/paperjs/docs/classes/Group.html +0 -6864
- package/dist/paperjs/docs/classes/HitResult.html +0 -239
- package/dist/paperjs/docs/classes/Item.html +0 -6628
- package/dist/paperjs/docs/classes/Key.html +0 -139
- package/dist/paperjs/docs/classes/KeyEvent.html +0 -308
- package/dist/paperjs/docs/classes/Layer.html +0 -6850
- package/dist/paperjs/docs/classes/Matrix.html +0 -1744
- package/dist/paperjs/docs/classes/MouseEvent.html +0 -355
- package/dist/paperjs/docs/classes/PaperScope.html +0 -459
- package/dist/paperjs/docs/classes/PaperScript.html +0 -198
- package/dist/paperjs/docs/classes/Path.html +0 -11775
- package/dist/paperjs/docs/classes/PathItem.html +0 -8639
- package/dist/paperjs/docs/classes/Point.html +0 -2699
- package/dist/paperjs/docs/classes/PointText.html +0 -7029
- package/dist/paperjs/docs/classes/Project.html +0 -1305
- package/dist/paperjs/docs/classes/Raster.html +0 -7843
- package/dist/paperjs/docs/classes/Rectangle.html +0 -1654
- package/dist/paperjs/docs/classes/Segment.html +0 -939
- package/dist/paperjs/docs/classes/Shape.html +0 -7363
- package/dist/paperjs/docs/classes/Size.html +0 -1825
- package/dist/paperjs/docs/classes/Style.html +0 -919
- package/dist/paperjs/docs/classes/SymbolDefinition.html +0 -311
- package/dist/paperjs/docs/classes/SymbolItem.html +0 -6755
- package/dist/paperjs/docs/classes/TextItem.html +0 -6869
- package/dist/paperjs/docs/classes/Tool.html +0 -761
- package/dist/paperjs/docs/classes/ToolEvent.html +0 -446
- package/dist/paperjs/docs/classes/Tween.html +0 -374
- package/dist/paperjs/docs/classes/View.html +0 -1772
- package/dist/paperjs/docs/classes/global.html +0 -425
- package/dist/paperjs/docs/classes/index.html +0 -88
- package/dist/paperjs/docs/index.html +0 -11
- package/dist/paperjs/examples/Animated/AnimatedStar.html +0 -53
- package/dist/paperjs/examples/Animated/BooleanOperations.html +0 -115
- package/dist/paperjs/examples/Animated/CandyCrash.html +0 -151
- package/dist/paperjs/examples/Animated/Extruded.html +0 -50
- package/dist/paperjs/examples/Animated/Lines.html +0 -53
- package/dist/paperjs/examples/Animated/Smoothing.html +0 -70
- package/dist/paperjs/examples/Animated/Space.html +0 -86
- package/dist/paperjs/examples/Animated/SpaceUsingShapes.html +0 -79
- package/dist/paperjs/examples/Games/Paperoids.html +0 -569
- package/dist/paperjs/examples/JSON/Circle Testing.html +0 -34
- package/dist/paperjs/examples/JSON/Compound Path.html +0 -25
- package/dist/paperjs/examples/JSON/Empty Path Testing.html +0 -31
- package/dist/paperjs/examples/JSON/Gradients.html +0 -34
- package/dist/paperjs/examples/JSON/Group Transform.html +0 -28
- package/dist/paperjs/examples/JSON/Line Testing.html +0 -44
- package/dist/paperjs/examples/JSON/Random Path Testing.html +0 -42
- package/dist/paperjs/examples/JSON/Raster.html +0 -29
- package/dist/paperjs/examples/JSON/Rect and Attribute Testing.html +0 -56
- package/dist/paperjs/examples/JSON/Rotated Primitives.html +0 -55
- package/dist/paperjs/examples/JSON/Selection.html +0 -43
- package/dist/paperjs/examples/JSON/Shapes.html +0 -54
- package/dist/paperjs/examples/JSON/Symbols.html +0 -30
- package/dist/paperjs/examples/JSON/Text Testing.html +0 -38
- package/dist/paperjs/examples/JSON/Tiger.html +0 -19
- package/dist/paperjs/examples/JSON/Transform Test 1.html +0 -32
- package/dist/paperjs/examples/JSON/Transform Test 2.html +0 -30
- package/dist/paperjs/examples/Node.js/AnimatedStar.js +0 -52
- package/dist/paperjs/examples/Node.js/BooleanOperations.js +0 -36
- package/dist/paperjs/examples/Node.js/JSONtoPDF.js +0 -20
- package/dist/paperjs/examples/Node.js/Raster.js +0 -32
- package/dist/paperjs/examples/Node.js/RasterRemote.js +0 -33
- package/dist/paperjs/examples/Node.js/SvgExport.js +0 -52
- package/dist/paperjs/examples/Node.js/SvgImport.js +0 -23
- package/dist/paperjs/examples/Node.js/Tadpoles.js +0 -16
- package/dist/paperjs/examples/Node.js/Tadpoles.pjs +0 -278
- package/dist/paperjs/examples/Node.js/in.json +0 -1
- package/dist/paperjs/examples/Node.js/in.svg +0 -16
- package/dist/paperjs/examples/Paperjs.org/BooleanOperattions.html +0 -115
- package/dist/paperjs/examples/Paperjs.org/BouncingBalls.html +0 -103
- package/dist/paperjs/examples/Paperjs.org/Chain.html +0 -54
- package/dist/paperjs/examples/Paperjs.org/DivisionRaster.html +0 -72
- package/dist/paperjs/examples/Paperjs.org/FutureSplash.html +0 -122
- package/dist/paperjs/examples/Paperjs.org/HitTesting.html +0 -103
- package/dist/paperjs/examples/Paperjs.org/InteractiveTiger.html +0 -777
- package/dist/paperjs/examples/Paperjs.org/MetaBalls.html +0 -132
- package/dist/paperjs/examples/Paperjs.org/NyanRainbow.html +0 -202
- package/dist/paperjs/examples/Paperjs.org/PathIntersections.html +0 -76
- package/dist/paperjs/examples/Paperjs.org/Qbertify.html +0 -146
- package/dist/paperjs/examples/Paperjs.org/RadialRainbows.html +0 -80
- package/dist/paperjs/examples/Paperjs.org/RoundedRectangles.html +0 -41
- package/dist/paperjs/examples/Paperjs.org/SatieLikedToDraw.html +0 -140
- package/dist/paperjs/examples/Paperjs.org/Simplify.html +0 -63
- package/dist/paperjs/examples/Paperjs.org/SpiralRaster.html +0 -120
- package/dist/paperjs/examples/Paperjs.org/Tadpoles.html +0 -283
- package/dist/paperjs/examples/Paperjs.org/Voronoi.html +0 -134
- package/dist/paperjs/examples/Rasters/PhyllotaxisRaster.html +0 -96
- package/dist/paperjs/examples/Rasters/Raster.html +0 -34
- package/dist/paperjs/examples/Rasters/RotationRaster.html +0 -44
- package/dist/paperjs/examples/Rasters/Smoothing.html +0 -36
- package/dist/paperjs/examples/SVG Export/Circle Testing.html +0 -32
- package/dist/paperjs/examples/SVG Export/Clipping.html +0 -17
- package/dist/paperjs/examples/SVG Export/Compound Path.html +0 -22
- package/dist/paperjs/examples/SVG Export/Empty Path Testing.html +0 -28
- package/dist/paperjs/examples/SVG Export/Gradients.html +0 -52
- package/dist/paperjs/examples/SVG Export/Group Transform.html +0 -25
- package/dist/paperjs/examples/SVG Export/Line Testing.html +0 -41
- package/dist/paperjs/examples/SVG Export/Random Path Testing.html +0 -39
- package/dist/paperjs/examples/SVG Export/Raster.html +0 -21
- package/dist/paperjs/examples/SVG Export/Rect and Attribute Testing.html +0 -53
- package/dist/paperjs/examples/SVG Export/Rotated Primitives.html +0 -80
- package/dist/paperjs/examples/SVG Export/Shapes.html +0 -58
- package/dist/paperjs/examples/SVG Export/Symbols.html +0 -27
- package/dist/paperjs/examples/SVG Export/Text Testing.html +0 -45
- package/dist/paperjs/examples/SVG Export/Tiger.html +0 -23
- package/dist/paperjs/examples/SVG Export/Transform Test 1.html +0 -29
- package/dist/paperjs/examples/SVG Export/Transform Test 2.html +0 -27
- package/dist/paperjs/examples/SVG Import/Arcs.html +0 -78
- package/dist/paperjs/examples/SVG Import/Butterfly.html +0 -223
- package/dist/paperjs/examples/SVG Import/Circle and Ellipse Testing.html +0 -26
- package/dist/paperjs/examples/SVG Import/Clipping.html +0 -100
- package/dist/paperjs/examples/SVG Import/From File.html +0 -30
- package/dist/paperjs/examples/SVG Import/Gradient.html +0 -138
- package/dist/paperjs/examples/SVG Import/Gradients.html +0 -30
- package/dist/paperjs/examples/SVG Import/Inkscape Pivot.html +0 -52
- package/dist/paperjs/examples/SVG Import/Inkscape.html +0 -88
- package/dist/paperjs/examples/SVG Import/Line Testing.html +0 -24
- package/dist/paperjs/examples/SVG Import/MoreGradients.html +0 -107
- package/dist/paperjs/examples/SVG Import/Multiple Paths Test 1.html +0 -42
- package/dist/paperjs/examples/SVG Import/Multiple Paths Test 2.html +0 -33
- package/dist/paperjs/examples/SVG Import/Nested Groups Test.html +0 -78
- package/dist/paperjs/examples/SVG Import/Polybezier.html +0 -43
- package/dist/paperjs/examples/SVG Import/Rect Testing.html +0 -25
- package/dist/paperjs/examples/SVG Import/Symbols.html +0 -24
- package/dist/paperjs/examples/SVG Import/Testing.html +0 -40
- package/dist/paperjs/examples/SVG Import/Text Testing.html +0 -19
- package/dist/paperjs/examples/SVG Import/Tiger.html +0 -742
- package/dist/paperjs/examples/SVG Import/Transform Testing.html +0 -22
- package/dist/paperjs/examples/SVG Import/Viewbox.html +0 -38
- package/dist/paperjs/examples/Scripts/Arcs.html +0 -39
- package/dist/paperjs/examples/Scripts/BlendModes.html +0 -77
- package/dist/paperjs/examples/Scripts/BooleanOperations.html +0 -937
- package/dist/paperjs/examples/Scripts/CompoundPath.html +0 -19
- package/dist/paperjs/examples/Scripts/CurveTimeParameterization.html +0 -61
- package/dist/paperjs/examples/Scripts/HslColor.html +0 -53
- package/dist/paperjs/examples/Scripts/PathStructure.html +0 -82
- package/dist/paperjs/examples/Scripts/PathTangents.html +0 -73
- package/dist/paperjs/examples/Scripts/Resize.html +0 -42
- package/dist/paperjs/examples/Scripts/RoundRectangle.html +0 -28
- package/dist/paperjs/examples/Scripts/Shapes.html +0 -54
- package/dist/paperjs/examples/Scripts/StrokeBounds.html +0 -101
- package/dist/paperjs/examples/Scripts/StrokeScaling.html +0 -65
- package/dist/paperjs/examples/Tools/BezierTool.html +0 -90
- package/dist/paperjs/examples/Tools/Circles.html +0 -28
- package/dist/paperjs/examples/Tools/Clouds.html +0 -35
- package/dist/paperjs/examples/Tools/DrippingBrush.html +0 -73
- package/dist/paperjs/examples/Tools/FancyBrush.html +0 -82
- package/dist/paperjs/examples/Tools/Grid.html +0 -44
- package/dist/paperjs/examples/Tools/MultiLines.html +0 -44
- package/dist/paperjs/examples/Tools/MultipleTools.html +0 -44
- package/dist/paperjs/examples/Tools/PathEditing.html +0 -95
- package/dist/paperjs/examples/Tools/SquareRounded.html +0 -76
- package/dist/paperjs/examples/Tools/Stars.html +0 -38
- package/dist/paperjs/examples/Tools/Vektor.html +0 -200
- package/dist/paperjs/examples/Tools/Wave.html +0 -50
- package/dist/paperjs/examples/Tools/WormFarm.html +0 -88
- package/dist/paperjs/examples/Worker/Main.html +0 -53
- package/dist/paperjs/examples/Worker/Worker.js +0 -14
- package/dist/paperjs/examples/css/style.css +0 -12
|
@@ -1,176 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Event</title>
|
|
6
|
-
<base target="class-frame">
|
|
7
|
-
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
|
|
8
|
-
<script src="../assets/js/paper.js"></script>
|
|
9
|
-
<script src="../assets/js/jquery.js"></script>
|
|
10
|
-
<script src="../assets/js/codemirror.js"></script>
|
|
11
|
-
<script src="../assets/js/docs.js"></script>
|
|
12
|
-
</head>
|
|
13
|
-
<body>
|
|
14
|
-
<article class="reference">
|
|
15
|
-
<div class="reference-class">
|
|
16
|
-
<h1>Event</h1>
|
|
17
|
-
|
|
18
|
-
<p>The Event object is the base class for any of the other event types, such as <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a>, <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> and <a href="../classes/KeyEvent.html"><tt>KeyEvent</tt></a>.</p>
|
|
19
|
-
|
|
20
|
-
</div>
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
<!-- ================================ properties =========================== -->
|
|
27
|
-
<div class="reference-members">
|
|
28
|
-
<h2>Properties</h2>
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
<div id="timestamp" class="member">
|
|
32
|
-
<div class="member-link">
|
|
33
|
-
<a name="timestamp" href="#timestamp"><tt><b>timeStamp</b></tt></a>
|
|
34
|
-
</div>
|
|
35
|
-
<div class="member-description hidden">
|
|
36
|
-
|
|
37
|
-
<div class="member-text">
|
|
38
|
-
<p>The time at which the event was created, in milliseconds since the epoch.</p>
|
|
39
|
-
|
|
40
|
-
<p>Read only.</p>
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
<ul class="member-list">
|
|
45
|
-
<h4>Type:</h4>
|
|
46
|
-
<li>
|
|
47
|
-
<tt>Number</tt>
|
|
48
|
-
</li>
|
|
49
|
-
</ul>
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
</div>
|
|
54
|
-
|
|
55
|
-
</div>
|
|
56
|
-
</div>
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
<div id="modifiers" class="member">
|
|
60
|
-
<div class="member-link">
|
|
61
|
-
<a name="modifiers" href="#modifiers"><tt><b>modifiers</b></tt></a>
|
|
62
|
-
</div>
|
|
63
|
-
<div class="member-description hidden">
|
|
64
|
-
|
|
65
|
-
<div class="member-text">
|
|
66
|
-
<p>The current state of the keyboard modifiers.</p>
|
|
67
|
-
|
|
68
|
-
<p>Read only.</p>
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
<ul class="member-list">
|
|
73
|
-
<h4>Type:</h4>
|
|
74
|
-
<li>
|
|
75
|
-
<tt>object</tt>
|
|
76
|
-
</li>
|
|
77
|
-
</ul>
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
<ul class="member-list">
|
|
81
|
-
<h4>See also:</h4>
|
|
82
|
-
|
|
83
|
-
<li><tt><a href="../classes/Key.html#modifiers"><tt>Key.modifiers</tt></a></tt></li>
|
|
84
|
-
|
|
85
|
-
</ul>
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
</div>
|
|
89
|
-
|
|
90
|
-
</div>
|
|
91
|
-
</div>
|
|
92
|
-
|
|
93
|
-
</div>
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
<!-- ============================== methods ================================ -->
|
|
100
|
-
<div class="reference-members">
|
|
101
|
-
<h2>Methods</h2>
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
<div id="preventdefault" class="member">
|
|
105
|
-
<div class="member-link">
|
|
106
|
-
<a name="preventdefault" href="#preventdefault"><tt><b>preventDefault</b>()</tt></a>
|
|
107
|
-
</div>
|
|
108
|
-
<div class="member-description hidden">
|
|
109
|
-
<div class="member-text">
|
|
110
|
-
<p>Cancels the event if it is cancelable, without stopping further propagation of the event.</p>
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
</div>
|
|
119
|
-
</div>
|
|
120
|
-
</div>
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
<div id="stoppropagation" class="member">
|
|
124
|
-
<div class="member-link">
|
|
125
|
-
<a name="stoppropagation" href="#stoppropagation"><tt><b>stopPropagation</b>()</tt></a>
|
|
126
|
-
</div>
|
|
127
|
-
<div class="member-description hidden">
|
|
128
|
-
<div class="member-text">
|
|
129
|
-
<p>Prevents further propagation of the current event.</p>
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
</div>
|
|
138
|
-
</div>
|
|
139
|
-
</div>
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
<div id="stop" class="member">
|
|
143
|
-
<div class="member-link">
|
|
144
|
-
<a name="stop" href="#stop"><tt><b>stop</b>()</tt></a>
|
|
145
|
-
</div>
|
|
146
|
-
<div class="member-description hidden">
|
|
147
|
-
<div class="member-text">
|
|
148
|
-
<p>Cancels the event if it is cancelable, and stops stopping further propagation of the event. This is has the same effect as calling both <a href="../classes/Event.html#stoppropagation"><tt>stopPropagation</tt></a>() and <a href="../classes/Event.html#preventdefault"><tt>preventDefault</tt></a>().</p>
|
|
149
|
-
<p>Any handler can also return <code>false</code> to indicate that <code>stop()</code> should be called right after.</p>
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
</div>
|
|
158
|
-
</div>
|
|
159
|
-
</div>
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
</div>
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
<!-- =========================== copyright notice ========================== -->
|
|
169
|
-
<p class="footer">
|
|
170
|
-
Paper.js v0.12.17<br>
|
|
171
|
-
Copyright © 2011—2022 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
|
172
|
-
<div class="content-end"></div>
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
</article>
|
|
176
|
-
</body>
|
|
@@ -1,240 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Gradient</title>
|
|
6
|
-
<base target="class-frame">
|
|
7
|
-
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
|
|
8
|
-
<script src="../assets/js/paper.js"></script>
|
|
9
|
-
<script src="../assets/js/jquery.js"></script>
|
|
10
|
-
<script src="../assets/js/codemirror.js"></script>
|
|
11
|
-
<script src="../assets/js/docs.js"></script>
|
|
12
|
-
</head>
|
|
13
|
-
<body>
|
|
14
|
-
<article class="reference">
|
|
15
|
-
<div class="reference-class">
|
|
16
|
-
<h1>Gradient</h1>
|
|
17
|
-
|
|
18
|
-
<p>The Gradient object.</p>
|
|
19
|
-
<h4>Example:<span class="description">Applying a linear gradient color containing evenly distributed color stops:</span></h4>
|
|
20
|
-
|
|
21
|
-
<div class="paperscript split">
|
|
22
|
-
|
|
23
|
-
<div class="buttons">
|
|
24
|
-
<div class="button run">Run</div>
|
|
25
|
-
</div>
|
|
26
|
-
|
|
27
|
-
<script type="text/paperscript" canvas="canvas-0">
|
|
28
|
-
// Define two points which we will be using to construct
|
|
29
|
-
// the path and to position the gradient color:
|
|
30
|
-
var topLeft = view.center - [80, 80];
|
|
31
|
-
var bottomRight = view.center + [80, 80];
|
|
32
|
-
|
|
33
|
-
// Create a rectangle shaped path between
|
|
34
|
-
// the topLeft and bottomRight points:
|
|
35
|
-
var path = new Path.Rectangle({
|
|
36
|
-
topLeft: topLeft,
|
|
37
|
-
bottomRight: bottomRight,
|
|
38
|
-
// Fill the path with a gradient of three color stops
|
|
39
|
-
// that runs between the two points we defined earlier:
|
|
40
|
-
fillColor: {
|
|
41
|
-
gradient: {
|
|
42
|
-
stops: ['yellow', 'red', 'blue']
|
|
43
|
-
},
|
|
44
|
-
origin: topLeft,
|
|
45
|
-
destination: bottomRight
|
|
46
|
-
}
|
|
47
|
-
});
|
|
48
|
-
</script>
|
|
49
|
-
<div class="canvas"><canvas width="516" height="300" id="canvas-0"></canvas></div>
|
|
50
|
-
</div>
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
<h4>Example:<span class="description">Create a circle shaped path at the center of the view, using 40% of the height of the view as its radius and fill it with a radial gradient color:</span></h4>
|
|
54
|
-
|
|
55
|
-
<div class="paperscript split">
|
|
56
|
-
|
|
57
|
-
<div class="buttons">
|
|
58
|
-
<div class="button run">Run</div>
|
|
59
|
-
</div>
|
|
60
|
-
|
|
61
|
-
<script type="text/paperscript" canvas="canvas-1">
|
|
62
|
-
var path = new Path.Circle({
|
|
63
|
-
center: view.center,
|
|
64
|
-
radius: view.bounds.height * 0.4
|
|
65
|
-
});
|
|
66
|
-
|
|
67
|
-
// Fill the path with a radial gradient color with three stops:
|
|
68
|
-
// yellow from 0% to 5%, mix between red from 5% to 20%,
|
|
69
|
-
// mix between red and black from 20% to 100%:
|
|
70
|
-
path.fillColor = {
|
|
71
|
-
gradient: {
|
|
72
|
-
stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]],
|
|
73
|
-
radial: true
|
|
74
|
-
},
|
|
75
|
-
origin: path.position,
|
|
76
|
-
destination: path.bounds.rightCenter
|
|
77
|
-
};
|
|
78
|
-
</script>
|
|
79
|
-
<div class="canvas"><canvas width="516" height="300" id="canvas-1"></canvas></div>
|
|
80
|
-
</div>
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
</div>
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
<!-- ================================ properties =========================== -->
|
|
90
|
-
<div class="reference-members">
|
|
91
|
-
<h2>Properties</h2>
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
<div id="stops" class="member">
|
|
95
|
-
<div class="member-link">
|
|
96
|
-
<a name="stops" href="#stops"><tt><b>stops</b></tt></a>
|
|
97
|
-
</div>
|
|
98
|
-
<div class="member-description hidden">
|
|
99
|
-
|
|
100
|
-
<div class="member-text">
|
|
101
|
-
<p>The gradient stops on the gradient ramp.</p>
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
<ul class="member-list">
|
|
106
|
-
<h4>Type:</h4>
|
|
107
|
-
<li>
|
|
108
|
-
Array of <a href="../classes/GradientStop.html"><tt>GradientStop</tt></a> objects
|
|
109
|
-
</li>
|
|
110
|
-
</ul>
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
</div>
|
|
115
|
-
|
|
116
|
-
</div>
|
|
117
|
-
</div>
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
<div id="radial" class="member">
|
|
121
|
-
<div class="member-link">
|
|
122
|
-
<a name="radial" href="#radial"><tt><b>radial</b></tt></a>
|
|
123
|
-
</div>
|
|
124
|
-
<div class="member-description hidden">
|
|
125
|
-
|
|
126
|
-
<div class="member-text">
|
|
127
|
-
<p>Specifies whether the gradient is radial or linear.</p>
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
<ul class="member-list">
|
|
132
|
-
<h4>Type:</h4>
|
|
133
|
-
<li>
|
|
134
|
-
<tt>Boolean</tt>
|
|
135
|
-
</li>
|
|
136
|
-
</ul>
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
</div>
|
|
141
|
-
|
|
142
|
-
</div>
|
|
143
|
-
</div>
|
|
144
|
-
|
|
145
|
-
</div>
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
<!-- ============================== methods ================================ -->
|
|
152
|
-
<div class="reference-members">
|
|
153
|
-
<h2>Methods</h2>
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
<div id="clone" class="member">
|
|
157
|
-
<div class="member-link">
|
|
158
|
-
<a name="clone" href="#clone"><tt><b>clone</b>()</tt></a>
|
|
159
|
-
</div>
|
|
160
|
-
<div class="member-description hidden">
|
|
161
|
-
<div class="member-text">
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
<ul class="member-list">
|
|
167
|
-
<h4>Returns:</h4>
|
|
168
|
-
|
|
169
|
-
<li>
|
|
170
|
-
<tt><a href="../classes/Gradient.html"><tt>Gradient</tt></a></tt> — a copy of the gradient
|
|
171
|
-
</li>
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
</ul>
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
</div>
|
|
181
|
-
</div>
|
|
182
|
-
</div>
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
<div id="equals-gradient" class="member">
|
|
186
|
-
<div class="member-link">
|
|
187
|
-
<a name="equals-gradient" href="#equals-gradient"><tt><b>equals</b>(gradient)</tt></a>
|
|
188
|
-
</div>
|
|
189
|
-
<div class="member-description hidden">
|
|
190
|
-
<div class="member-text">
|
|
191
|
-
<p>Checks whether the gradient is equal to the supplied gradient.</p>
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
<ul class="member-list">
|
|
195
|
-
<h4>Parameters:</h4>
|
|
196
|
-
|
|
197
|
-
<li>
|
|
198
|
-
<tt>gradient:</tt>
|
|
199
|
-
<a href="../classes/Gradient.html"><tt>Gradient</tt></a>
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
</li>
|
|
203
|
-
|
|
204
|
-
</ul>
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
<ul class="member-list">
|
|
208
|
-
<h4>Returns:</h4>
|
|
209
|
-
|
|
210
|
-
<li>
|
|
211
|
-
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if they are equal, <tt>false</tt> otherwise
|
|
212
|
-
</li>
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
</ul>
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
</div>
|
|
222
|
-
</div>
|
|
223
|
-
</div>
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
</div>
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
<!-- =========================== copyright notice ========================== -->
|
|
233
|
-
<p class="footer">
|
|
234
|
-
Paper.js v0.12.17<br>
|
|
235
|
-
Copyright © 2011—2022 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
|
236
|
-
<div class="content-end"></div>
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
</article>
|
|
240
|
-
</body>
|
|
@@ -1,273 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>GradientStop</title>
|
|
6
|
-
<base target="class-frame">
|
|
7
|
-
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
|
|
8
|
-
<script src="../assets/js/paper.js"></script>
|
|
9
|
-
<script src="../assets/js/jquery.js"></script>
|
|
10
|
-
<script src="../assets/js/codemirror.js"></script>
|
|
11
|
-
<script src="../assets/js/docs.js"></script>
|
|
12
|
-
</head>
|
|
13
|
-
<body>
|
|
14
|
-
<article class="reference">
|
|
15
|
-
<div class="reference-class">
|
|
16
|
-
<h1>GradientStop</h1>
|
|
17
|
-
|
|
18
|
-
<p>The GradientStop object.</p>
|
|
19
|
-
|
|
20
|
-
</div>
|
|
21
|
-
|
|
22
|
-
<!-- =============================== constructors ========================== -->
|
|
23
|
-
<div class="reference-members">
|
|
24
|
-
<h2>Constructors</h2>
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
<div id="gradientstop" class="member">
|
|
28
|
-
<div class="member-link">
|
|
29
|
-
<a name="gradientstop" href="#gradientstop"><tt><b>GradientStop</b>([color[, offset]])</tt></a>
|
|
30
|
-
</div>
|
|
31
|
-
<div class="member-description hidden">
|
|
32
|
-
<div class="member-text">
|
|
33
|
-
<p>Creates a GradientStop object.</p>
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
<ul class="member-list">
|
|
37
|
-
<h4>Parameters:</h4>
|
|
38
|
-
|
|
39
|
-
<li>
|
|
40
|
-
<tt>color:</tt>
|
|
41
|
-
<a href="../classes/Color.html"><tt>Color</tt></a>
|
|
42
|
-
— the color of the stop
|
|
43
|
-
— optional, default: <tt>new Color(0, 0, 0)</tt>
|
|
44
|
-
</li>
|
|
45
|
-
|
|
46
|
-
<li>
|
|
47
|
-
<tt>offset:</tt>
|
|
48
|
-
<tt>Number</tt>
|
|
49
|
-
— the position of the stop on the gradient ramp as a value between <code>0</code> and <code>1</code>; <code>null</code> or <code>undefined</code> for automatic assignment.
|
|
50
|
-
— optional, default: <tt>null</tt>
|
|
51
|
-
</li>
|
|
52
|
-
|
|
53
|
-
</ul>
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
<ul class="member-list">
|
|
57
|
-
<h4>Returns:</h4>
|
|
58
|
-
|
|
59
|
-
<li>
|
|
60
|
-
<tt><a href="../classes/GradientStop.html"><tt>GradientStop</tt></a></tt>
|
|
61
|
-
</li>
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
</ul>
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
</div>
|
|
71
|
-
</div>
|
|
72
|
-
</div>
|
|
73
|
-
|
|
74
|
-
</div>
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
<!-- ================================ properties =========================== -->
|
|
81
|
-
<div class="reference-members">
|
|
82
|
-
<h2>Properties</h2>
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
<div id="offset" class="member">
|
|
86
|
-
<div class="member-link">
|
|
87
|
-
<a name="offset" href="#offset"><tt><b>offset</b></tt></a>
|
|
88
|
-
</div>
|
|
89
|
-
<div class="member-description hidden">
|
|
90
|
-
|
|
91
|
-
<div class="member-text">
|
|
92
|
-
<p>The ramp-point of the gradient stop as a value between <code>0</code> and <code>1</code>.</p>
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
<ul class="member-list">
|
|
97
|
-
<h4>Type:</h4>
|
|
98
|
-
<li>
|
|
99
|
-
<tt>Number</tt>
|
|
100
|
-
</li>
|
|
101
|
-
</ul>
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
<h4>Example:<span class="description">Animating a gradient's ramp points:</span></h4>
|
|
105
|
-
|
|
106
|
-
<div class="paperscript split">
|
|
107
|
-
|
|
108
|
-
<div class="buttons">
|
|
109
|
-
<div class="button run">Run</div>
|
|
110
|
-
</div>
|
|
111
|
-
|
|
112
|
-
<script type="text/paperscript" canvas="canvas-0">
|
|
113
|
-
// Create a circle shaped path at the center of the view,
|
|
114
|
-
// using 40% of the height of the view as its radius
|
|
115
|
-
// and fill it with a radial gradient color:
|
|
116
|
-
var path = new Path.Circle({
|
|
117
|
-
center: view.center,
|
|
118
|
-
radius: view.bounds.height * 0.4
|
|
119
|
-
});
|
|
120
|
-
|
|
121
|
-
path.fillColor = {
|
|
122
|
-
gradient: {
|
|
123
|
-
stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]],
|
|
124
|
-
radial: true
|
|
125
|
-
},
|
|
126
|
-
origin: path.position,
|
|
127
|
-
destination: path.bounds.rightCenter
|
|
128
|
-
};
|
|
129
|
-
|
|
130
|
-
var gradient = path.fillColor.gradient;
|
|
131
|
-
|
|
132
|
-
// This function is called each frame of the animation:
|
|
133
|
-
function onFrame(event) {
|
|
134
|
-
var blackStop = gradient.stops[2];
|
|
135
|
-
// Animate the offset between 0.7 and 0.9:
|
|
136
|
-
blackStop.offset = Math.sin(event.time * 5) * 0.1 + 0.8;
|
|
137
|
-
|
|
138
|
-
// Animate the offset between 0.2 and 0.4
|
|
139
|
-
var redStop = gradient.stops[1];
|
|
140
|
-
redStop.offset = Math.sin(event.time * 3) * 0.1 + 0.3;
|
|
141
|
-
}
|
|
142
|
-
</script>
|
|
143
|
-
<div class="canvas"><canvas width="516" height="300" id="canvas-0"></canvas></div>
|
|
144
|
-
</div>
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
</div>
|
|
148
|
-
|
|
149
|
-
</div>
|
|
150
|
-
</div>
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
<div id="color" class="member">
|
|
154
|
-
<div class="member-link">
|
|
155
|
-
<a name="color" href="#color"><tt><b>color</b></tt></a>
|
|
156
|
-
</div>
|
|
157
|
-
<div class="member-description hidden">
|
|
158
|
-
|
|
159
|
-
<div class="member-text">
|
|
160
|
-
<p>The color of the gradient stop.</p>
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
<ul class="member-list">
|
|
165
|
-
<h4>Type:</h4>
|
|
166
|
-
<li>
|
|
167
|
-
<a href="../classes/Color.html"><tt>Color</tt></a>
|
|
168
|
-
</li>
|
|
169
|
-
</ul>
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
<h4>Example:<span class="description">Animating a gradient's ramp points:</span></h4>
|
|
173
|
-
|
|
174
|
-
<div class="paperscript split">
|
|
175
|
-
|
|
176
|
-
<div class="buttons">
|
|
177
|
-
<div class="button run">Run</div>
|
|
178
|
-
</div>
|
|
179
|
-
|
|
180
|
-
<script type="text/paperscript" canvas="canvas-1">
|
|
181
|
-
// Create a circle shaped path at the center of the view,
|
|
182
|
-
// using 40% of the height of the view as its radius
|
|
183
|
-
// and fill it with a radial gradient color:
|
|
184
|
-
var path = new Path.Circle({
|
|
185
|
-
center: view.center,
|
|
186
|
-
radius: view.bounds.height * 0.4
|
|
187
|
-
});
|
|
188
|
-
|
|
189
|
-
path.fillColor = {
|
|
190
|
-
gradient: {
|
|
191
|
-
stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]],
|
|
192
|
-
radial: true
|
|
193
|
-
},
|
|
194
|
-
origin: path.position,
|
|
195
|
-
destination: path.bounds.rightCenter
|
|
196
|
-
};
|
|
197
|
-
|
|
198
|
-
var redStop = path.fillColor.gradient.stops[1];
|
|
199
|
-
var blackStop = path.fillColor.gradient.stops[2];
|
|
200
|
-
|
|
201
|
-
// This function is called each frame of the animation:
|
|
202
|
-
function onFrame(event) {
|
|
203
|
-
// Animate the offset between 0.7 and 0.9:
|
|
204
|
-
blackStop.offset = Math.sin(event.time * 5) * 0.1 + 0.8;
|
|
205
|
-
|
|
206
|
-
// Animate the offset between 0.2 and 0.4
|
|
207
|
-
redStop.offset = Math.sin(event.time * 3) * 0.1 + 0.3;
|
|
208
|
-
}
|
|
209
|
-
</script>
|
|
210
|
-
<div class="canvas"><canvas width="516" height="300" id="canvas-1"></canvas></div>
|
|
211
|
-
</div>
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
</div>
|
|
215
|
-
|
|
216
|
-
</div>
|
|
217
|
-
</div>
|
|
218
|
-
|
|
219
|
-
</div>
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
<!-- ============================== methods ================================ -->
|
|
226
|
-
<div class="reference-members">
|
|
227
|
-
<h2>Methods</h2>
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
<div id="clone" class="member">
|
|
231
|
-
<div class="member-link">
|
|
232
|
-
<a name="clone" href="#clone"><tt><b>clone</b>()</tt></a>
|
|
233
|
-
</div>
|
|
234
|
-
<div class="member-description hidden">
|
|
235
|
-
<div class="member-text">
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
<ul class="member-list">
|
|
241
|
-
<h4>Returns:</h4>
|
|
242
|
-
|
|
243
|
-
<li>
|
|
244
|
-
<tt><a href="../classes/GradientStop.html"><tt>GradientStop</tt></a></tt> — a copy of the gradient-stop
|
|
245
|
-
</li>
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
</ul>
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
</div>
|
|
255
|
-
</div>
|
|
256
|
-
</div>
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
</div>
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
<!-- =========================== copyright notice ========================== -->
|
|
266
|
-
<p class="footer">
|
|
267
|
-
Paper.js v0.12.17<br>
|
|
268
|
-
Copyright © 2011—2022 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
|
269
|
-
<div class="content-end"></div>
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
</article>
|
|
273
|
-
</body>
|