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

BezierTool example: click and drag segment handles and points to move them and close the path when clicking on the first segment.

Browse source
This commit is contained in:
Jonathan Puckey 2011-04-18 15:29:18 +02:00
parent 4d5f4b32fc
commit 8da6e7b883
1 changed files with 65 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

132
examples/Tools/BezierTool.html
View file

@ -6,83 +6,81 @@
<script type="text/javascript">var root = '../../'</script> <script type="text/javascript">var root = '../../'</script>
<script type="text/javascript" src="../../src/load.js"></script> <script type="text/javascript" src="../../src/load.js"></script>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
document.currentStyle = { var path;
strokeColor: '#4f7aff', var types = ['handleIn', 'handleOut', 'point'];
strokeWidth: 1 function findHandle(point) {
}; for (var i = 0, l = path.segments.length; i < l; i++) {
for (var j = 0; j < 3; j++) {
var path = new Path(); var type = types[j];
path.style = { var segment = path.segments[i];
strokeColor: 'black', var segmentPoint = type == 'point'
strokeWidth: 1 ? segment.point
}; : segment.point + segment[type];
var currentSegment; var distance = (point - segmentPoint).length;
var inLine = new Path([0, 0], [0, 0]); if (distance < 3) {
var outLine = new Path([0, 0], [0, 0]); return {
var lastInLine = new Path([0, 0], [0, 0]); type: type,
lastInLine.visible = false; segment: segment
};
var rect = new Path.Rectangle([0.5, 0.5], [4, 4]); }
rect.fillColor = 'white'; }
var rectSymbol = new Symbol(rect);
var circle = new Path.Circle(0, 2);
circle.fillColor = '#4f7aff';
circle.strokeColor = null;
var circleSymbol = new Symbol(circle);
var inCircle = new PlacedSymbol(circleSymbol);
var outCircle = new PlacedSymbol(circleSymbol);
var lastInCircle = new PlacedSymbol(circleSymbol);
inCircle.position = [-100, -100];
outCircle.position = [-100, -100];
lastInCircle.position = [-100, -100];
var curRect;
function onMouseDown(event) {
if (event.count > 1) {
var first = lastInLine.firstSegment;
first.point = inLine.firstSegment.point;
var last = lastInLine.lastSegment;
last.point = inLine.lastSegment.point;
lastInLine.visible = true;
lastInCircle.position = last.point;
} }
currentSegment = path.add(event.point); return null;
inLine.firstSegment.point = event.point; }
outLine.firstSegment.point = event.point;
inLine.lastSegment.point = event.point; var currentSegment, mode, type;
outLine.lastSegment.point = event.point; function onMouseDown(event) {
inLine.visible = true; mode = type = currentSegment = null;
outLine.visible = true;
outCircle.position = event.point.round() + [0.5, 0.5]; if (!path) {
inCircle.position = event.point.round() + [0.5, 0.5]; path = new Path();
path.selected = true;
path.fillColor = new HSBColor(360 * Math.random(), 1, 1, 0.5);
}
var rect = new PlacedSymbol(rectSymbol); var result = findHandle(event.point);
rect.position = event.point.round() + [0.5, 0.5]; if (result) {
currentSegment = result.segment;
type = result.type;
if (path.segments.length > 1 && result.type == 'point'
&& result.segment.index == 0) {
mode = 'close';
path.closed = true;
path.selected = false;
path = null;
}
}
curRect = new Path.Rectangle([0.5, 0.5], [4, 4]); if (mode != 'close') {
curRect.position = event.point.round(); mode = currentSegment ? 'move' : 'add';
curRect.fillColor = '#4f7aff'; if (!currentSegment)
curRect.strokeWidth = 0; currentSegment = path.add(event.point);
}
} }
function onMouseDrag(event) { function onMouseDrag(event) {
var delta = event.point - event.downPoint; if (mode == 'move') {
currentSegment.handleOut = delta; if (type == 'point') {
currentSegment.handleIn = -delta; currentSegment.point = event.point;
outLine.lastSegment.point = currentSegment.handleIn + event.downPoint; } else {
inLine.lastSegment.point = currentSegment.handleOut + event.downPoint; var delta = event.delta.clone();
outCircle.position = outLine.lastSegment.point; if (type == 'handleOut')
inCircle.position = inLine.lastSegment.point; delta = -delta;
} currentSegment.handleIn += delta;
currentSegment.handleOut -= delta;
function onMouseUp(event) { }
curRect.remove(); } else if (mode == 'add') {
var delta = event.point - event.downPoint;
currentSegment.handleOut = delta;
currentSegment.handleIn = -delta;
}
} }
</script> </script>
</head> </head>
<body> <body>
Click and drag to draw a path: An emulation of a vector pen tool.
Click and drag to add a point.<br/>
Click on segment handles and points to manipulate them.
Close the path to start a new one.
<canvas id='canvas' width=1024 height=768></canvas> <canvas id='canvas' width=1024 height=768></canvas>
</body> </body>