paper 0.12.18 → 0.12.19
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 +32 -0
- package/dist/docs/assets/js/paper.js +91 -53
- 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/paper-core.js +90 -52
- package/dist/paper-core.min.js +3 -3
- package/dist/paper-full.js +91 -53
- package/dist/paper-full.min.js +3 -3
- package/dist/paper.d.ts +2 -2
- package/package.json +5 -2
- 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,19 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Compound Path</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.currentStyle.fillColor = 'black';
|
|
10
|
-
var path1 = new Path.Rectangle([200, 200], [100, 100]);
|
|
11
|
-
var path2 = new Path.Rectangle([50, 50], [200, 200]);
|
|
12
|
-
var path3 = new Path.Rectangle([0, 0], [400, 400]);
|
|
13
|
-
new CompoundPath(path1, path2, path3);
|
|
14
|
-
</script>
|
|
15
|
-
</head>
|
|
16
|
-
<body>
|
|
17
|
-
<canvas id="canvas" resize></canvas>
|
|
18
|
-
</body>
|
|
19
|
-
</html>
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Curve Time Parameterization</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 path = new Path();
|
|
10
|
-
path.moveTo(200, 200);
|
|
11
|
-
path.curveTo([170, 50], [300, 200]);
|
|
12
|
-
path.strokeWidth = 1;
|
|
13
|
-
path.strokeColor = 'black';
|
|
14
|
-
var curve = path.curves[0];
|
|
15
|
-
|
|
16
|
-
function onMouseMove(event) {
|
|
17
|
-
modifyCurve(event.point, true);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
function modifyCurve(point, remove) {
|
|
21
|
-
curve.segment2.point = point;
|
|
22
|
-
var length = curve.length;
|
|
23
|
-
var step = 10;
|
|
24
|
-
var iteratively = true;
|
|
25
|
-
var flatten = true;
|
|
26
|
-
var num = Math.floor(length / step);
|
|
27
|
-
var prev = 0;
|
|
28
|
-
if (flatten) {
|
|
29
|
-
var clone = path.clone();
|
|
30
|
-
clone.flatten(step);
|
|
31
|
-
for (var i = 0; i < clone.segments.length; i++) {
|
|
32
|
-
var point = clone.segments[i].point;
|
|
33
|
-
var circle = new Path.Circle(point, step / 2);
|
|
34
|
-
circle.strokeColor = 'red';
|
|
35
|
-
if (remove)
|
|
36
|
-
circle.removeOnMove();
|
|
37
|
-
}
|
|
38
|
-
clone.remove();
|
|
39
|
-
} else {
|
|
40
|
-
for (var i = 0, pos = 0; i <= num; i++, pos += step) {
|
|
41
|
-
var t = iteratively
|
|
42
|
-
? curve.getTimeAt(step, prev)
|
|
43
|
-
: curve.getTimeAt(pos);
|
|
44
|
-
var point = curve.getPointAtTime(t);
|
|
45
|
-
var circle = new Path.Circle(point, step / 2);
|
|
46
|
-
circle.strokeColor = 'red';
|
|
47
|
-
if (remove)
|
|
48
|
-
circle.removeOnMove();
|
|
49
|
-
prev = t;
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
// modifyCurve(new Point(400, 377), false);
|
|
55
|
-
|
|
56
|
-
</script>
|
|
57
|
-
</head>
|
|
58
|
-
<body>
|
|
59
|
-
<canvas id="canvas" resize></canvas>
|
|
60
|
-
</body>
|
|
61
|
-
</html>
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>HslColor</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 steps = {
|
|
10
|
-
hue: 100,
|
|
11
|
-
saturation: 20,
|
|
12
|
-
lightness: 3
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
for (var i = 0; i < steps.lightness; i++) {
|
|
16
|
-
var radius = view.size.width / steps.lightness * 0.45;
|
|
17
|
-
var offset = new Point(view.size.width / steps.lightness, 0);
|
|
18
|
-
var position = view.bounds.leftCenter + offset * (i + 0.5);
|
|
19
|
-
var lightness = 1 - (i + 1) / (steps.lightness + 1);
|
|
20
|
-
createWheel(position, radius, steps, lightness);
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
function createWheel(center, radius, steps, lightness) {
|
|
24
|
-
var hUnit = 360 / steps.hue;
|
|
25
|
-
for (var h = 0; h < steps.hue; h++) {
|
|
26
|
-
var hue = h * hUnit;
|
|
27
|
-
var vector = new Point({
|
|
28
|
-
angle: hue - 90,
|
|
29
|
-
length: radius
|
|
30
|
-
});
|
|
31
|
-
path = new Path(new Point(), vector.rotate(hUnit / 2));
|
|
32
|
-
path.closed = true;
|
|
33
|
-
path.arcTo(vector, vector.rotate(hUnit / -2));
|
|
34
|
-
path.position += center;
|
|
35
|
-
var colors = [];
|
|
36
|
-
for (var i = 0; i < steps.saturation; i++) {
|
|
37
|
-
var saturation = i / steps.saturation;
|
|
38
|
-
var color = { hue: hue, saturation: saturation, lightness: lightness };
|
|
39
|
-
colors.push(color);
|
|
40
|
-
}
|
|
41
|
-
var gradient = new Gradient(colors, true);
|
|
42
|
-
var from = center;
|
|
43
|
-
var to = center + vector;
|
|
44
|
-
var gradientColor = new Color(gradient, from, to);
|
|
45
|
-
path.fillColor = path.strokeColor = gradientColor;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
</script>
|
|
49
|
-
</head>
|
|
50
|
-
<body>
|
|
51
|
-
<canvas id="canvas" resize style="background:black"></canvas>
|
|
52
|
-
</body>
|
|
53
|
-
</html>
|
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Path Structure</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 y = view.size.height / 2;
|
|
10
|
-
var width = view.size.width;
|
|
11
|
-
var vector = new Point({
|
|
12
|
-
angle: 45,
|
|
13
|
-
length: width / 5
|
|
14
|
-
});
|
|
15
|
-
var offset = width / 30;
|
|
16
|
-
var handleTexts = [];
|
|
17
|
-
var path = new Path({
|
|
18
|
-
segments: [
|
|
19
|
-
[[offset, y], null, vector.rotate(-90)],
|
|
20
|
-
[[width / 2, y], vector.rotate(-180), vector],
|
|
21
|
-
[[width - offset, y], vector.rotate(90), null]
|
|
22
|
-
],
|
|
23
|
-
fullySelected: true
|
|
24
|
-
});
|
|
25
|
-
|
|
26
|
-
function onMouseMove(event) {
|
|
27
|
-
var point = event.point.clone();
|
|
28
|
-
// Constrain the event point, to not cut off the text:
|
|
29
|
-
if (point.y < 22)
|
|
30
|
-
point.y = 22;
|
|
31
|
-
if (point.y > view.size.height - 24)
|
|
32
|
-
point.y = view.size.height - 24;
|
|
33
|
-
var delta = point - view.center;
|
|
34
|
-
for (var i = 0; i < 2; i++) {
|
|
35
|
-
var curve = path.curves[i];
|
|
36
|
-
curve.handle1.y = curve.handle2.y = delta.y * (i % 2 ? 1 : -1);
|
|
37
|
-
var firstPoint = curve.point1 + curve.handle1;
|
|
38
|
-
var secondPoint = curve.point2 + curve.handle2;
|
|
39
|
-
handleTexts[i * 2].point = secondPoint -
|
|
40
|
-
(firstPoint.y < y ? [0, 10] : [0, -18]);
|
|
41
|
-
handleTexts[i * 2 + 1].point = firstPoint -
|
|
42
|
-
(firstPoint.y < y ? [0, 10] : [0, -18]);
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
project.currentStyle.fillColor = 'black';
|
|
47
|
-
for (var i = 0; i < 3; i++) {
|
|
48
|
-
var segment = path.segments[i];
|
|
49
|
-
var text = new PointText({
|
|
50
|
-
point: segment.point - [0, 10],
|
|
51
|
-
content: i,
|
|
52
|
-
fontSize: 12,
|
|
53
|
-
justification: 'center'
|
|
54
|
-
});
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
for (var i = 0; i < 2; i++) {
|
|
58
|
-
var handleInText = new PointText({
|
|
59
|
-
content: 'handleIn',
|
|
60
|
-
fontSize: 12,
|
|
61
|
-
justification: 'center'
|
|
62
|
-
});
|
|
63
|
-
handleTexts.push(handleInText);
|
|
64
|
-
|
|
65
|
-
var handleOutText = new PointText({
|
|
66
|
-
content: 'handleOut',
|
|
67
|
-
fontSize: 12,
|
|
68
|
-
justification: 'center'
|
|
69
|
-
});
|
|
70
|
-
handleTexts.push(handleOutText);
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
// Call onMouseMove once to correctly position the text items:
|
|
74
|
-
onMouseMove({
|
|
75
|
-
point: view.center + vector.rotate(-90)
|
|
76
|
-
});
|
|
77
|
-
</script>
|
|
78
|
-
</head>
|
|
79
|
-
<body>
|
|
80
|
-
<canvas id='canvas' resize></canvas>
|
|
81
|
-
</body>
|
|
82
|
-
</html>
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Path Tangents</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
|
-
|
|
10
|
-
// draw path
|
|
11
|
-
var path = new Path('M185.972,83.103c18.542-27.813,41.083-63.865,72.633-78.412c40.768-18.787,56.519,22.783,48.118,55.174c-7.694,29.634-23.246,56.887-33.519,85.651c-2.092,5.856-12.005,28.226,1.46,28.226c13.623,0,30.341-20.748,38.719-29.609c13.322-14.092,25.403-29.262,36.591-45.092c18.532,0,21.893,16.679,15.512,30.659c-15.041,32.952-45.633,61.693-74.315,82.812c-20.822,15.332-62.421,39.657-85.61,14.639c-26.43-28.497,5.643-88.375,16.151-117.448c15.172-41.98-26.439-5.818-37.874,8.852c-17.928,22.999-16.922,77.719-18.303,106.529c-21.793,21.793-63.141,0.942-66.759-26.731c-2.207-16.876,2.573-34.851,7.098-50.965c4.793-17.07,17.809-38.034,17.809-55.889c0-15.34-20.016,2.606-23.117,5.779c-12.837,13.14-18.843,22.942-21.953,41.102c-3.221,18.811-1.106,85.684-22.392,87.86c-29.787,3.014-51.93-20.085-55.6-48.556c-2.067-16.034,1.385-33.132,5.247-48.637c2.243-9.004,5.006-17.888,8.197-26.599c-4.147-9.616-4.988-20.426-4.988-30.78c0-33.391,44.299-71.678,77.411-65.772c31.311,5.585,6.408,61.28-0.642,76.722c16.999-29.448,43.73-77.256,83.217-77.256C211.992,5.36,197.721,59.599,185.972,83.103z');
|
|
12
|
-
path.position = view.center;
|
|
13
|
-
path.fitBounds(view.bounds.scale(0.7));
|
|
14
|
-
path.fillColor = 'orange';
|
|
15
|
-
|
|
16
|
-
// create a marking layer to put temporary items
|
|
17
|
-
var layer = new Layer();
|
|
18
|
-
layer.activate();
|
|
19
|
-
|
|
20
|
-
// init drawing with a vertical vector
|
|
21
|
-
drawTangentsToVector(new Point(0, 1));
|
|
22
|
-
|
|
23
|
-
function onMouseMove(event) {
|
|
24
|
-
// draw tangents to vector between view center and mouse pointer
|
|
25
|
-
drawTangentsToVector(event.point - view.center);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
function drawTangentsToVector(vector) {
|
|
29
|
-
// adapt vector length for display
|
|
30
|
-
vector.length = 50;
|
|
31
|
-
|
|
32
|
-
// remove existing marking items
|
|
33
|
-
layer.removeChildren();
|
|
34
|
-
|
|
35
|
-
// draw a line at view center to show vector direction
|
|
36
|
-
var line = new Path.Line({
|
|
37
|
-
from: view.center + vector,
|
|
38
|
-
to: view.center - vector,
|
|
39
|
-
strokeColor: 'black',
|
|
40
|
-
strokeWidth: 2
|
|
41
|
-
});
|
|
42
|
-
|
|
43
|
-
// get path times where path is tangent to vector
|
|
44
|
-
var offsets = path.getOffsetsWithTangent(vector);
|
|
45
|
-
for (var i = 0; i < offsets.length; i++) {
|
|
46
|
-
var point = path.getPointAt(offsets[i]);
|
|
47
|
-
// draw a circle around point
|
|
48
|
-
new Path.Circle({
|
|
49
|
-
center: point,
|
|
50
|
-
radius: 5,
|
|
51
|
-
strokeColor: 'red'
|
|
52
|
-
});
|
|
53
|
-
// draw a line showing tangent
|
|
54
|
-
new Path.Line({
|
|
55
|
-
from: point + vector,
|
|
56
|
-
to: point - vector,
|
|
57
|
-
strokeColor: 'red'
|
|
58
|
-
});
|
|
59
|
-
// draw a line showing point precisely on the path
|
|
60
|
-
new Path.Line({
|
|
61
|
-
from: point + vector.rotate(90).normalize(10),
|
|
62
|
-
to: point - vector.rotate(90).normalize(10),
|
|
63
|
-
strokeColor: 'red'
|
|
64
|
-
});
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
</script>
|
|
69
|
-
</head>
|
|
70
|
-
<body>
|
|
71
|
-
<canvas id='canvas' resize></canvas>
|
|
72
|
-
</body>
|
|
73
|
-
</html>
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Resize</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 redPath = new Path.Circle({
|
|
10
|
-
center: view.center,
|
|
11
|
-
radius: 5,
|
|
12
|
-
fillColor: 'red'
|
|
13
|
-
});
|
|
14
|
-
|
|
15
|
-
var whitePath = new Path.Circle({
|
|
16
|
-
center: view.center,
|
|
17
|
-
radius: 5,
|
|
18
|
-
fillColor: 'white'
|
|
19
|
-
});
|
|
20
|
-
|
|
21
|
-
var text = new PointText({
|
|
22
|
-
content: 'Resize your window',
|
|
23
|
-
justification: 'center',
|
|
24
|
-
point: view.center
|
|
25
|
-
});
|
|
26
|
-
|
|
27
|
-
function onResize(event) {
|
|
28
|
-
// Resize the red circle to fill the bounds of the view:
|
|
29
|
-
redPath.fitBounds(view.bounds, true);
|
|
30
|
-
|
|
31
|
-
// Resize the white circle to fit within the bounds of the view:
|
|
32
|
-
whitePath.fitBounds(view.bounds, false);
|
|
33
|
-
|
|
34
|
-
// Move the text to the center of the view:
|
|
35
|
-
text.position = view.bounds.center;
|
|
36
|
-
}
|
|
37
|
-
</script>
|
|
38
|
-
</head>
|
|
39
|
-
<body>
|
|
40
|
-
<canvas id="canvas" resize></canvas>
|
|
41
|
-
</body>
|
|
42
|
-
</html>
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Rounded Rectangle</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 path;
|
|
10
|
-
|
|
11
|
-
function onFrame(event) {
|
|
12
|
-
if (path)
|
|
13
|
-
path.remove();
|
|
14
|
-
path = new Path.Rectangle({
|
|
15
|
-
radius: Math.abs(Math.sin(event.count / 40)) * 150 + 10,
|
|
16
|
-
rectangle: {
|
|
17
|
-
size: [300, 300]
|
|
18
|
-
},
|
|
19
|
-
fillColor: 'black'
|
|
20
|
-
});
|
|
21
|
-
path.position = view.center;
|
|
22
|
-
}
|
|
23
|
-
</script>
|
|
24
|
-
</head>
|
|
25
|
-
<body>
|
|
26
|
-
<canvas id="canvas" resize></canvas>
|
|
27
|
-
</body>
|
|
28
|
-
</html>
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Shapes</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 circle = new Shape.Circle({
|
|
10
|
-
center: [100, 100],
|
|
11
|
-
radius: 50,
|
|
12
|
-
fillColor: 'red'
|
|
13
|
-
});
|
|
14
|
-
|
|
15
|
-
var ellipse = new Shape.Ellipse({
|
|
16
|
-
center: [100, 200],
|
|
17
|
-
radius: [50, 25],
|
|
18
|
-
fillColor: 'blue',
|
|
19
|
-
strokeColor: 'black',
|
|
20
|
-
strokeWidth: 10,
|
|
21
|
-
rotation: 20
|
|
22
|
-
});
|
|
23
|
-
|
|
24
|
-
var rect = new Shape.Rectangle({
|
|
25
|
-
center: [100, 300],
|
|
26
|
-
size: [100, 50],
|
|
27
|
-
fillColor: 'green',
|
|
28
|
-
strokeColor: 'black',
|
|
29
|
-
strokeWidth: 10,
|
|
30
|
-
rotation: -20
|
|
31
|
-
});
|
|
32
|
-
|
|
33
|
-
var roundRect = new Shape.Rectangle({
|
|
34
|
-
center: [100, 400],
|
|
35
|
-
size: [50, 100],
|
|
36
|
-
radius: [15, 20],
|
|
37
|
-
fillColor: 'orange',
|
|
38
|
-
strokeColor: 'black',
|
|
39
|
-
strokeWidth: 10,
|
|
40
|
-
rotation: 20
|
|
41
|
-
});
|
|
42
|
-
|
|
43
|
-
[circle, ellipse, rect, roundRect].forEach(function(shape) {
|
|
44
|
-
var path = shape.toPath();
|
|
45
|
-
path.position += [200, 0];
|
|
46
|
-
var shape2 = path.toShape();
|
|
47
|
-
shape2.position += [200, 0];
|
|
48
|
-
})
|
|
49
|
-
</script>
|
|
50
|
-
</head>
|
|
51
|
-
<body>
|
|
52
|
-
<canvas id="canvas" resize></canvas>
|
|
53
|
-
</body>
|
|
54
|
-
</html>
|
|
@@ -1,101 +0,0 @@
|
|
|
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
|
-
var paths = [];
|
|
10
|
-
|
|
11
|
-
function makePath() {
|
|
12
|
-
var path = new Path();
|
|
13
|
-
path.moveTo(200, 50);
|
|
14
|
-
path.lineTo(230, 100);
|
|
15
|
-
path.lineTo(250, 50);
|
|
16
|
-
path.lineTo(280, 110);
|
|
17
|
-
path.arcTo([250, 20], false);
|
|
18
|
-
path.rotate(-5);
|
|
19
|
-
path.strokeWidth = 30;
|
|
20
|
-
path.miterLimit = 3;
|
|
21
|
-
paths.push(path);
|
|
22
|
-
return path;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
var path = makePath();
|
|
26
|
-
path.strokeColor = 'black';
|
|
27
|
-
path.strokeCap = 'butt';
|
|
28
|
-
path.strokeJoin = 'round';
|
|
29
|
-
|
|
30
|
-
var path = makePath().translate(150, 0);
|
|
31
|
-
path.strokeColor = 'black';
|
|
32
|
-
path.strokeCap = 'butt';
|
|
33
|
-
path.strokeJoin = 'bevel';
|
|
34
|
-
|
|
35
|
-
var path = makePath().translate(300, 0);
|
|
36
|
-
path.strokeColor = 'black';
|
|
37
|
-
path.strokeCap = 'butt';
|
|
38
|
-
path.strokeJoin = 'miter';
|
|
39
|
-
|
|
40
|
-
var path = makePath().translate(0, 150);
|
|
41
|
-
path.strokeColor = 'black';
|
|
42
|
-
path.strokeCap = 'square';
|
|
43
|
-
path.strokeJoin = 'round';
|
|
44
|
-
|
|
45
|
-
var path = makePath().translate(150, 150);
|
|
46
|
-
path.strokeColor = 'black';
|
|
47
|
-
path.strokeCap = 'square';
|
|
48
|
-
path.strokeJoin = 'bevel';
|
|
49
|
-
|
|
50
|
-
var path = makePath().translate(300, 150);
|
|
51
|
-
path.strokeColor = 'black';
|
|
52
|
-
path.strokeCap = 'square';
|
|
53
|
-
path.strokeJoin = 'miter';
|
|
54
|
-
|
|
55
|
-
var path = makePath().translate(0, 300);
|
|
56
|
-
path.strokeColor = 'black';
|
|
57
|
-
path.strokeCap = 'round';
|
|
58
|
-
path.strokeJoin = 'round';
|
|
59
|
-
|
|
60
|
-
var path = makePath().translate(150, 300);
|
|
61
|
-
path.strokeColor = 'black';
|
|
62
|
-
path.strokeCap = 'round';
|
|
63
|
-
path.strokeJoin = 'bevel';
|
|
64
|
-
|
|
65
|
-
var path = makePath().translate(300, 300);
|
|
66
|
-
path.strokeColor = 'black';
|
|
67
|
-
path.strokeCap = 'round';
|
|
68
|
-
path.strokeJoin = 'miter';
|
|
69
|
-
|
|
70
|
-
for (var i = 0; i < paths.length; i++) {
|
|
71
|
-
var path = paths[i];
|
|
72
|
-
path.fullySelected = true;
|
|
73
|
-
path.scale(1.5, new Point(300, 0));
|
|
74
|
-
var rect = new Path.Rectangle(path.strokeBounds);
|
|
75
|
-
rect.strokeWidth = 0.25;
|
|
76
|
-
rect.strokeColor = 'black';
|
|
77
|
-
rect.fillColor = null;
|
|
78
|
-
var rect = new Path.Rectangle(path.bounds);
|
|
79
|
-
rect.strokeWidth = 0.25;
|
|
80
|
-
rect.strokeColor = 'red';
|
|
81
|
-
rect.fillColor = null;
|
|
82
|
-
var rect = new Path.Rectangle(path.controlBounds);
|
|
83
|
-
rect.strokeWidth = 0.25;
|
|
84
|
-
rect.strokeColor = 'green';
|
|
85
|
-
rect.fillColor = null;
|
|
86
|
-
|
|
87
|
-
path.onMouseEnter = function() {
|
|
88
|
-
this.strokeColor = 'red';
|
|
89
|
-
}
|
|
90
|
-
path.onMouseLeave = function() {
|
|
91
|
-
this.strokeColor = 'black';
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
project.activeLayer.position = view.center;
|
|
96
|
-
</script>
|
|
97
|
-
</head>
|
|
98
|
-
<body>
|
|
99
|
-
<canvas id="canvas" resize></canvas>
|
|
100
|
-
</body>
|
|
101
|
-
</html>
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Shapes</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
|
-
view.zoom = 1.5;
|
|
10
|
-
settings.applyMatrix = false;
|
|
11
|
-
var strokeScaling = false;
|
|
12
|
-
var path = new Path.Circle({
|
|
13
|
-
center: view.center - [0, 140],
|
|
14
|
-
radius: 50,
|
|
15
|
-
fillColor: 'red',
|
|
16
|
-
strokeColor: 'black',
|
|
17
|
-
strokeWidth: 10,
|
|
18
|
-
strokeScaling: strokeScaling,
|
|
19
|
-
opacity: 0.5,
|
|
20
|
-
selected: true
|
|
21
|
-
});
|
|
22
|
-
path.scale(2, 1);
|
|
23
|
-
|
|
24
|
-
var shape = new Shape.Circle({
|
|
25
|
-
center: view.center,
|
|
26
|
-
radius: 50,
|
|
27
|
-
fillColor: 'red',
|
|
28
|
-
strokeColor: 'black',
|
|
29
|
-
strokeWidth: 10,
|
|
30
|
-
strokeScaling: strokeScaling,
|
|
31
|
-
opacity: 0.5,
|
|
32
|
-
selected: true
|
|
33
|
-
});
|
|
34
|
-
shape.scale(2, 1);
|
|
35
|
-
|
|
36
|
-
var hole;
|
|
37
|
-
var compound = new CompoundPath({
|
|
38
|
-
children: [
|
|
39
|
-
new Path.Rectangle({
|
|
40
|
-
point: [0, 0],
|
|
41
|
-
size: [100, 100]
|
|
42
|
-
}),
|
|
43
|
-
hole = new Path.Circle({
|
|
44
|
-
center: [50, 50],
|
|
45
|
-
radius: 25
|
|
46
|
-
})
|
|
47
|
-
],
|
|
48
|
-
fillColor: 'red',
|
|
49
|
-
strokeColor: 'black',
|
|
50
|
-
strokeWidth: 10,
|
|
51
|
-
position: view.center + [0, 140],
|
|
52
|
-
strokeScaling: strokeScaling,
|
|
53
|
-
opacity: 0.5,
|
|
54
|
-
selected: true
|
|
55
|
-
});
|
|
56
|
-
hole.position += 15;
|
|
57
|
-
compound.scale(2, 1);
|
|
58
|
-
|
|
59
|
-
document.body.appendChild(project.exportSVG());
|
|
60
|
-
</script>
|
|
61
|
-
</head>
|
|
62
|
-
<body>
|
|
63
|
-
<canvas id="canvas" width="300" height="500"></canvas>
|
|
64
|
-
</body>
|
|
65
|
-
</html>
|
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Bezier Tool</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 path;
|
|
10
|
-
var types = ['point', 'handleIn', 'handleOut'];
|
|
11
|
-
function findHandle(point) {
|
|
12
|
-
for (var i = 0, l = path.segments.length; i < l; i++) {
|
|
13
|
-
for (var j = 0; j < 3; j++) {
|
|
14
|
-
var type = types[j];
|
|
15
|
-
var segment = path.segments[i];
|
|
16
|
-
var segmentPoint = type == 'point'
|
|
17
|
-
? segment.point
|
|
18
|
-
: segment.point + segment[type];
|
|
19
|
-
var distance = (point - segmentPoint).length;
|
|
20
|
-
if (distance < 3) {
|
|
21
|
-
return {
|
|
22
|
-
type: type,
|
|
23
|
-
segment: segment
|
|
24
|
-
};
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
return null;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
var currentSegment, mode, type;
|
|
32
|
-
function onMouseDown(event) {
|
|
33
|
-
if (currentSegment)
|
|
34
|
-
currentSegment.selected = false;
|
|
35
|
-
mode = type = currentSegment = null;
|
|
36
|
-
|
|
37
|
-
if (!path) {
|
|
38
|
-
path = new Path();
|
|
39
|
-
path.fillColor = {
|
|
40
|
-
hue: 360 * Math.random(),
|
|
41
|
-
saturation: 1,
|
|
42
|
-
brightness: 1,
|
|
43
|
-
alpha: 0.5
|
|
44
|
-
};
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
var result = findHandle(event.point);
|
|
48
|
-
if (result) {
|
|
49
|
-
currentSegment = result.segment;
|
|
50
|
-
type = result.type;
|
|
51
|
-
if (path.segments.length > 1 && result.type == 'point'
|
|
52
|
-
&& result.segment.index == 0) {
|
|
53
|
-
mode = 'close';
|
|
54
|
-
path.closed = true;
|
|
55
|
-
path.selected = false;
|
|
56
|
-
path = null;
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
if (mode != 'close') {
|
|
61
|
-
mode = currentSegment ? 'move' : 'add';
|
|
62
|
-
if (!currentSegment)
|
|
63
|
-
currentSegment = path.add(event.point);
|
|
64
|
-
currentSegment.selected = true;
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
function onMouseDrag(event) {
|
|
69
|
-
if (mode == 'move' && type == 'point') {
|
|
70
|
-
currentSegment.point = event.point;
|
|
71
|
-
} else if (mode != 'close') {
|
|
72
|
-
var delta = event.delta.clone();
|
|
73
|
-
if (type == 'handleOut' || mode == 'add')
|
|
74
|
-
delta = -delta;
|
|
75
|
-
currentSegment.handleIn += delta;
|
|
76
|
-
currentSegment.handleOut -= delta;
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
</script>
|
|
80
|
-
</head>
|
|
81
|
-
<body>
|
|
82
|
-
<p>
|
|
83
|
-
An emulation of a vector pen tool.
|
|
84
|
-
Click and drag to add a points.<br/>
|
|
85
|
-
Drag segment handles and points to manipulate them.
|
|
86
|
-
Close the path to start a new one.
|
|
87
|
-
</p>
|
|
88
|
-
<canvas id="canvas" resize></canvas>
|
|
89
|
-
</body>
|
|
90
|
-
</html>
|