mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-01 02:38:43 -05:00
Improve examples.
This commit is contained in:
parent
ace2e3e13b
commit
c9e95d2c01
3 changed files with 20 additions and 20 deletions
|
@ -16,12 +16,6 @@
|
||||||
|
|
||||||
checkValues();
|
checkValues();
|
||||||
|
|
||||||
project.currentStyle = {
|
|
||||||
strokeColor: 'black',
|
|
||||||
strokeWidth: 5,
|
|
||||||
strokeCap: 'round'
|
|
||||||
};
|
|
||||||
|
|
||||||
/////////////////////////////////////////////////////////////////////
|
/////////////////////////////////////////////////////////////////////
|
||||||
// Mouse handling
|
// Mouse handling
|
||||||
|
|
||||||
|
@ -34,17 +28,17 @@
|
||||||
|
|
||||||
var path;
|
var path;
|
||||||
function onMouseDown(event) {
|
function onMouseDown(event) {
|
||||||
path = new Path();
|
path = new Path({
|
||||||
path.segments = [event.point, event.point];
|
segments: [event.point, event.point],
|
||||||
|
strokeColor: 'black',
|
||||||
|
strokeWidth: 5,
|
||||||
|
strokeCap: 'round'
|
||||||
|
});
|
||||||
prevPoint = path.firstSegment.point;
|
prevPoint = path.firstSegment.point;
|
||||||
curPoint = path.lastSegment.point;
|
curPoint = path.lastSegment.point;
|
||||||
curHandleSeg = null;
|
curHandleSeg = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
function onMouseUp(event) {
|
|
||||||
// path.pointsToCurves(0, 0, 1, 0.001);
|
|
||||||
}
|
|
||||||
|
|
||||||
var curPoint, prevPoint, curHandleSeg;
|
var curPoint, prevPoint, curHandleSeg;
|
||||||
function onMouseDrag(event) {
|
function onMouseDrag(event) {
|
||||||
var point = event.point;
|
var point = event.point;
|
||||||
|
|
|
@ -15,8 +15,12 @@
|
||||||
var delta = event.point - event.downPoint;
|
var delta = event.point - event.downPoint;
|
||||||
var radius = delta.length;
|
var radius = delta.length;
|
||||||
var points = 5 + Math.round(radius / 50);
|
var points = 5 + Math.round(radius / 50);
|
||||||
var position = event.downPoint;
|
var path = new Path.Star({
|
||||||
var path = new Path.Star(position, points, radius / 2, radius);
|
center: event.downPoint,
|
||||||
|
numPoints: points,
|
||||||
|
radius1: radius / 2,
|
||||||
|
radius2: radius
|
||||||
|
});
|
||||||
path.rotate(delta.angle);
|
path.rotate(delta.angle);
|
||||||
// Remove the path automatically before the next mouse drag
|
// Remove the path automatically before the next mouse drag
|
||||||
// event:
|
// event:
|
||||||
|
|
|
@ -23,8 +23,9 @@
|
||||||
|
|
||||||
var path;
|
var path;
|
||||||
function onMouseDown(event) {
|
function onMouseDown(event) {
|
||||||
path = new Path();
|
path = new Path({
|
||||||
path.strokeColor = '#000000';
|
strokeColor: '#000000'
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
var mul = 1;
|
var mul = 1;
|
||||||
|
@ -34,10 +35,11 @@
|
||||||
if (!values.mouseOffset)
|
if (!values.mouseOffset)
|
||||||
step.length = values.offset;
|
step.length = values.offset;
|
||||||
|
|
||||||
var segment = new Segment(event.point + step);
|
path.add({
|
||||||
segment.handleIn = -event.delta * values.curviness;
|
point: event.point + step,
|
||||||
segment.handleOut = event.delta * values.curviness;
|
handleIn: -event.delta * values.curviness,
|
||||||
path.add(segment);
|
handleOut: event.delta * values.curviness
|
||||||
|
});
|
||||||
mul *= -1;
|
mul *= -1;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in a new issue