scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-03 19:45:44 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge remote-tracking branch 'origin/master'

Browse source
This commit is contained in:
Jürg Lehni 2011-06-20 15:25:04 +01:00
commit 0b0a43c4d5
2 changed files with 61 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
examples/Tools/DrawCurves.html
View file

@ -1,39 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
var path, point;
// var path = new Path([{ point: { x: 846, y: 224 } },{ point: { x: 845, y: 224 } },{ point: { x: 842, y: 224 } },{ point: { x: 838, y: 224 } },{ point: { x: 833, y: 224 } },{ point: { x: 828, y: 224 } },{ point: { x: 821, y: 224 } },{ point: { x: 815, y: 224 } },{ point: { x: 801, y: 224 } },{ point: { x: 796, y: 224 } },{ point: { x: 794, y: 224 } },{ point: { x: 787, y: 225 } },{ point: { x: 782, y: 226 } },{ point: { x: 777, y: 226 } },{ point: { x: 773, y: 226 } },{ point: { x: 768, y: 226 } },{ point: { x: 763, y: 226 } },{ point: { x: 759, y: 226 } }]);
// var path = new Path([{ point: { x: 1052, y: 227 } },{ point: { x: 1052, y: 228 } },{ point: { x: 1052, y: 229 } },{ point: { x: 1052, y: 230 } },{ point: { x: 1052, y: 231 } },{ point: { x: 1050, y: 231 } },{ point: { x: 1049, y: 231 } },{ point: { x: 1047, y: 231 } },{ point: { x: 1045, y: 231 } },{ point: { x: 1043, y: 231 } },{ point: { x: 1040, y: 231 } },{ point: { x: 1038, y: 231 } },{ point: { x: 1035, y: 231 } },{ point: { x: 1034, y: 231 } },{ point: { x: 1033, y: 231 } },{ point: { x: 1030, y: 231 } },{ point: { x: 1028, y: 231 } },{ point: { x: 1026, y: 231 } },{ point: { x: 1024, y: 231 } },{ point: { x: 1023, y: 231 } },{ point: { x: 1021, y: 231 } },{ point: { x: 1018, y: 231 } },{ point: { x: 1017, y: 231 } },{ point: { x: 1015, y: 231 } },{ point: { x: 1013, y: 231 } },{ point: { x: 1011, y: 231 } },{ point: { x: 1009, y: 231 } },{ point: { x: 1008, y: 231 } },{ point: { x: 1004, y: 231 } },{ point: { x: 1002, y: 230 } },{ point: { x: 999, y: 230 } },{ point: { x: 997, y: 230 } },{ point: { x: 995, y: 230 } },{ point: { x: 994, y: 230 } },{ point: { x: 992, y: 230 } },{ point: { x: 990, y: 230 } },{ point: { x: 988, y: 230 } },{ point: { x: 987, y: 230 } },{ point: { x: 984, y: 230 } },{ point: { x: 981, y: 230 } },{ point: { x: 980, y: 230 } },{ point: { x: 976, y: 230 } },{ point: { x: 974, y: 230 } },{ point: { x: 972, y: 230 } },{ point: { x: 970, y: 230 } },{ point: { x: 969, y: 230 } },{ point: { x: 965, y: 230 } },{ point: { x: 963, y: 230 } },{ point: { x: 961, y: 230 } },{ point: { x: 960, y: 230 } },{ point: { x: 958, y: 230 } },{ point: { x: 956, y: 230 } },{ point: { x: 954, y: 230 } },{ point: { x: 950, y: 230 } },{ point: { x: 948, y: 230 } },{ point: { x: 946, y: 230 } },{ point: { x: 945, y: 230 } },{ point: { x: 944, y: 230 } },{ point: { x: 942, y: 230 } },{ point: { x: 941, y: 230 } },{ point: { x: 940, y: 230 } },{ point: { x: 938, y: 230 } },{ point: { x: 937, y: 230 } },{ point: { x: 936, y: 230 } },{ point: { x: 935, y: 230 } },{ point: { x: 934, y: 230 } },{ point: { x: 933, y: 230 } },{ point: { x: 931, y: 230 } },{ point: { x: 930, y: 230 } },{ point: { x: 929, y: 230 } },{ point: { x: 928, y: 230 } },{ point: { x: 927, y: 230 } },{ point: { x: 925, y: 230 } },{ point: { x: 924, y: 230 } },{ point: { x: 923, y: 230 } },{ point: { x: 923, y: 231 } },{ point: { x: 923, y: 232 } },{ point: { x: 923, y: 233 } },{ point: { x: 923, y: 234 } }]);
// var path = new Path([{ point: { x: 788, y: 319 } },{ point: { x: 784, y: 320 } },{ point: { x: 777, y: 320 } },{ point: { x: 773, y: 320 } },{ point: { x: 760, y: 320 } },{ point: { x: 752, y: 312 } },{ point: { x: 736, y: 295 } },{ point: { x: 723, y: 268 } },{ point: { x: 700, y: 209 } },{ point: { x: 692, y: 174 } },{ point: { x: 681, y: 132 } },{ point: { x: 663, y: 87 } },{ point: { x: 655, y: 76 } },{ point: { x: 647, y: 66 } },{ point: { x: 640, y: 61 } },{ point: { x: 638, y: 61 } },{ point: { x: 637, y: 61 } }]);
// path.scale(5);
// path.strokeColor = 'black';
// path.pointsToCurves(1);
// path.selected = true;
function onMouseDown(event) {
path = new Path();
path.strokeColor = 'black';
path.add(event.point);
}
function onMouseDrag(event) {
path.add(event.point);
path.fullySelected = true;
}
function onMouseUp(event) {
path.pointsToCurves(10);
path.fullySelected = true;
}
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
</body>
</html>

61
examples/Tools/PointsToCurves.html Normal file
View file

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
var path;
var textItem = new PointText(new Point(20, 30));
textItem.fillColor = 'black';
textItem.content = 'Click and drag to draw a line.';
function onMouseDown(event) {
// If we produced a path before, deselect it:
if (path) {
path.selected = false;
}
// Create a new path and set its stroke color to black:
path = new Path();
path.add(event.point);
path.strokeColor = 'black';
// Select the path, so we can see its segment points:
path.fullySelected = true;
}
// While the user drags the mouse, points are added to the path
// at the position of the mouse:
function onMouseDrag(event) {
path.add(event.point);
// Update the content of the text item to show how many
// segments it has:
textItem.content = 'Segment count: ' + path.segments.length;
}
// When the mouse is released, we simplify the path:
function onMouseUp(event) {
var segmentCount = path.segments.length;
// When the mouse is released, simplify it:
path.pointsToCurves(10);
// Select the path, so we can see its segments:
path.fullySelected = true;
var newSegmentCount = path.segments.length;
var difference = segmentCount - newSegmentCount;
var percentage = 100 - Math.round(newSegmentCount / segmentCount * 100);
textItem.content = difference + ' of the ' + segmentCount + ' segments were removed. Saving ' + percentage + '%';
}
</script>
</head>
<body>
<canvas id="canvas" resize keepalive="true"></canvas>
</body>
</html>