mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-01 02:38:43 -05:00
Update examples to PaperScript.
This commit is contained in:
Jonathan Puckey
parent
c00f85c9e5
commit
e1a6c4f3d0
20 changed files with 674 additions and 716 deletions
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,56 +33,53 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
var vector = new Point(doc.size.height, 0);
|
||||
var point = new Point(doc.size).divide(2);
|
||||
var gradient = new Gradient();
|
||||
gradient.type = 'radial';
|
||||
var gradientColor = new GradientColor(gradient, point, point.add(vector));
|
||||
|
||||
var colors = ['red', 'orange', 'yellow', 'green', 'blue'];
|
||||
var stops = [];
|
||||
for (var i = 0, l = colors.length; i < l * 15; i++) {
|
||||
var stop = new GradientStop(colors[i % l], i / (l * 15));
|
||||
stops.push(stop);
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var vector = new Point(document.size.height, 0);
|
||||
var point = new Point(document.size) / 2;
|
||||
var gradient = new Gradient();
|
||||
gradient.type = 'radial';
|
||||
var gradientColor = new GradientColor(gradient, point, point + vector);
|
||||
|
||||
var colors = ['red', 'orange', 'yellow', 'green', 'blue'];
|
||||
var stops = [];
|
||||
for (var i = 0, l = colors.length; i < l * 15; i++) {
|
||||
var stop = new GradientStop(colors[i % l], i / (l * 15));
|
||||
stops.push(stop);
|
||||
}
|
||||
|
||||
gradient.stops = stops;
|
||||
var path = new Path.Rectangle(new Rectangle([0, 0], document.size));
|
||||
path.fillColor = gradientColor;
|
||||
var mouseDown = false;
|
||||
var tool = new Tool({
|
||||
onMouseDown: function(event) {
|
||||
mouseDown = true;
|
||||
gradientColor.hilite = event.point;
|
||||
},
|
||||
onMouseDrag: function(event) {
|
||||
gradientColor.hilite = event.point;
|
||||
},
|
||||
onMouseUp: function(event) {
|
||||
mouseDown = false;
|
||||
}
|
||||
|
||||
gradient.stops = stops;
|
||||
var path = new Path.Rectangle(new Rectangle([0, 0], doc.size));
|
||||
path.fillColor = gradientColor;
|
||||
var mouseDown = false;
|
||||
var tool = new Tool({
|
||||
onMouseDown: function(event) {
|
||||
mouseDown = true;
|
||||
gradientColor.hilite = event.point;
|
||||
},
|
||||
onMouseDrag: function(event) {
|
||||
gradientColor.hilite = event.point;
|
||||
},
|
||||
onMouseUp: function(event) {
|
||||
mouseDown = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
setInterval(draw, 30);
|
||||
setInterval(draw, 30);
|
||||
|
||||
var grow = false;
|
||||
var vector = new Point(150, 0);
|
||||
function draw() {
|
||||
if (grow && vector.length > 300) {
|
||||
grow = false;
|
||||
} else if (!grow && vector.length < 75) {
|
||||
grow = true;
|
||||
}
|
||||
vector.length += (grow ? 1 : -1);
|
||||
vector.angle += 5;
|
||||
if (!mouseDown) {
|
||||
gradientColor.hilite = point.add(vector);
|
||||
doc.redraw();
|
||||
}
|
||||
var grow = false;
|
||||
var vector = new Point(150, 0);
|
||||
function draw() {
|
||||
if (grow && vector.length > 300) {
|
||||
grow = false;
|
||||
} else if (!grow && vector.length < 75) {
|
||||
grow = true;
|
||||
}
|
||||
vector.length += (grow ? 1 : -1);
|
||||
vector.angle += 5;
|
||||
if (!mouseDown) {
|
||||
gradientColor.hilite = point + vector;
|
||||
document.redraw();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,45 +33,42 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
var mousePoint = new Point(doc.size.divide(2));
|
||||
|
||||
var amount = 25;
|
||||
var colors = ['red', 'white', 'blue', 'white'];
|
||||
|
||||
for (var i = 0; i < amount; i++) {
|
||||
var rect = new Rectangle([0, 0], [25, 25]);
|
||||
rect.center = mousePoint;
|
||||
var path = new Path.RoundRectangle(rect, 6);
|
||||
path.fillColor = colors[i % 4];
|
||||
var scale = (1 - i / amount) * 20;
|
||||
path.scale(scale);
|
||||
new PlacedSymbol(path);
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var mousePoint = document.bounds.center;
|
||||
|
||||
var amount = 25;
|
||||
var colors = ['red', 'white', 'blue', 'white'];
|
||||
|
||||
for (var i = 0; i < amount; i++) {
|
||||
var rect = new Rectangle([0, 0], [25, 25]);
|
||||
rect.center = mousePoint;
|
||||
var path = new Path.RoundRectangle(rect, 6);
|
||||
path.fillColor = colors[i % 4];
|
||||
var scale = (1 - i / amount) * 20;
|
||||
path.scale(scale);
|
||||
new PlacedSymbol(path);
|
||||
}
|
||||
setInterval(draw, 30);
|
||||
|
||||
var tool = new Tool({
|
||||
onMouseDrag: function(event) {
|
||||
mousePoint = event.point;
|
||||
}
|
||||
setInterval(draw, 30);
|
||||
|
||||
var tool = new Tool({
|
||||
onMouseDrag: function(event) {
|
||||
mousePoint = event.point;
|
||||
}
|
||||
});
|
||||
|
||||
var children = paper.document.activeLayer.children;
|
||||
var count = 0;
|
||||
function draw() {
|
||||
count++;
|
||||
for (var i = 0, l = children.length; i < l; i++) {
|
||||
var item = children[i];
|
||||
var delta = mousePoint.subtract(item.position).divide(i + 1);
|
||||
item.rotate(Math.sin((count + i) / 10) * 7);
|
||||
if (delta.length > 0.1)
|
||||
item.translate(delta);
|
||||
}
|
||||
doc.redraw();
|
||||
});
|
||||
|
||||
var children = document.activeLayer.children;
|
||||
var count = 0;
|
||||
function draw() {
|
||||
count++;
|
||||
for (var i = 0, l = children.length; i < l; i++) {
|
||||
var item = children[i];
|
||||
var delta = (mousePoint - item.position) / (i + 1);
|
||||
item.rotate(Math.sin((count + i) / 10) * 7);
|
||||
if (delta.length > 0.1)
|
||||
item.translate(delta);
|
||||
}
|
||||
document.redraw();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,48 +33,46 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
var layer = doc.activeLayer;
|
||||
|
||||
var values = {
|
||||
count: 34,
|
||||
points: 32
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var layer = document.activeLayer;
|
||||
|
||||
var values = {
|
||||
count: 34,
|
||||
points: 32
|
||||
}
|
||||
|
||||
var center = new Point(document.size) / 2;
|
||||
for (var i = 0; i < values.count; i++) {
|
||||
var offset = new Point(20 + 10 * i, 0);
|
||||
var path = new Path();
|
||||
path.fillColor = i % 2 ? 'red' : 'black';
|
||||
console.log(path.fillColor);
|
||||
path.closed = true;
|
||||
|
||||
var l = offset.length;
|
||||
for (var j = 0; j < values.points * 2; j++) {
|
||||
offset.angle += 360 / values.points;
|
||||
var vector = offset.clone()
|
||||
vector.length = l * (j % 2 ? 0.1 : -0.1);
|
||||
path.add(offset + vector);
|
||||
}
|
||||
|
||||
var center = new Point(doc.size).divide(2)
|
||||
for (var i = 0; i < values.count; i++) {
|
||||
var offset = new Point(20 + 10 * i, 0);
|
||||
var path = new Path();
|
||||
path.fillColor = i % 2 ? 'red' : 'black';
|
||||
path.closed = true;
|
||||
|
||||
var l = offset.length;
|
||||
for (var j = 0; j < values.points * 2; j++) {
|
||||
offset.angle += 360 / values.points;
|
||||
var vector = offset.clone()
|
||||
vector.length = l * (j % 2 ? 0.1 : -0.1);
|
||||
path.add(offset.add(vector));
|
||||
}
|
||||
path.smooth();
|
||||
var placedSymbol = new PlacedSymbol(path);
|
||||
placedSymbol.position = center;
|
||||
layer.appendBottom(placedSymbol);
|
||||
}
|
||||
setInterval(draw, 30);
|
||||
path.smooth();
|
||||
var placedSymbol = new PlacedSymbol(path);
|
||||
placedSymbol.position = center;
|
||||
layer.appendBottom(placedSymbol);
|
||||
}
|
||||
setInterval(draw, 30);
|
||||
|
||||
var count = 0;
|
||||
function draw() {
|
||||
count++;
|
||||
for (var i = 0, l = layer.children.length; i < l; i++) {
|
||||
var item = layer.children[i];
|
||||
var angle = (values.count - i) * Math.sin(count / 128) / 10;
|
||||
item.rotate(angle);
|
||||
}
|
||||
doc.redraw();
|
||||
var count = 0;
|
||||
function draw() {
|
||||
count++;
|
||||
for (var i = 0, l = layer.children.length; i < l; i++) {
|
||||
var item = layer.children[i];
|
||||
var angle = (values.count - i) * Math.sin(count / 128) / 10;
|
||||
item.rotate(angle);
|
||||
}
|
||||
document.redraw();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,99 +33,94 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var balls = [];
|
||||
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
var circlePath = new Path.Circle([0, 0], 10);
|
||||
circlePath.fillColor = new GradientColor(null, [0, 0], [0, 12], [0, 2]);
|
||||
circlePath.fillColor.gradient.type = 'radial';
|
||||
|
||||
var balls = [];
|
||||
var symbol = new Symbol(circlePath);
|
||||
|
||||
|
||||
var circlePath = new Path.Circle([0, 0], 10);
|
||||
circlePath.fillColor = new GradientColor(null, [0, 0], [0, 12], [0, 2]);
|
||||
circlePath.fillColor.gradient.type = 'radial';
|
||||
var group = new Group();
|
||||
|
||||
var symbol = new Symbol(circlePath);
|
||||
|
||||
|
||||
var group = new Group();
|
||||
|
||||
var Ball = Base.extend({
|
||||
initialize: function(point, vector) {
|
||||
if (!vector || vector.isZero()) {
|
||||
this.vector = Point.random().multiply(5);
|
||||
} else {
|
||||
this.vector = vector.multiply(1.5);
|
||||
}
|
||||
this.point = point;
|
||||
this.dampen = 0.4;
|
||||
this.gravity = 3;
|
||||
this.bounce = -0.6;
|
||||
this.radius = 50 * Math.random() + 10;
|
||||
this.item = new PlacedSymbol(symbol);
|
||||
this.item.position = point;
|
||||
this.item.scale(this.radius / 10);
|
||||
group.appendTop(this.item);
|
||||
},
|
||||
|
||||
contrainPoint: function() {
|
||||
var x = this.point.x;
|
||||
var y = this.point.y;
|
||||
var radius = this.radius;
|
||||
this.point.x = Math.min(Math.max(radius, x), doc.size.width - radius);
|
||||
this.point.y = Math.min(Math.max(radius, y), doc.size.height - radius);
|
||||
},
|
||||
|
||||
iterate: function() {
|
||||
this.vector.y += this.gravity;
|
||||
this.vector.x *= 0.99;
|
||||
var pre = this.point.add(this.vector);
|
||||
if (pre.x < this.radius || pre.x > doc.size.width - this.radius)
|
||||
this.vector.x *= -this.dampen;
|
||||
if (pre.y < this.radius || pre.y > doc.size.height - this.radius) {
|
||||
if (Math.abs(this.vector.x) < 3) {
|
||||
this.vector.x = Math.random() * 150 - 75;
|
||||
this.vector.y = Math.random() * 100 + 20;
|
||||
}
|
||||
this.vector.y *= this.bounce;
|
||||
}
|
||||
this.point = this.point.add(this.vector);
|
||||
this.contrainPoint();
|
||||
this.item.position = this.point;
|
||||
var Ball = Base.extend({
|
||||
initialize: function(point, vector) {
|
||||
if (!vector || vector.isZero()) {
|
||||
this.vector = Point.random() * 5;
|
||||
} else {
|
||||
this.vector = vector * 1.5;
|
||||
}
|
||||
});
|
||||
this.point = point;
|
||||
this.dampen = 0.4;
|
||||
this.gravity = 3;
|
||||
this.bounce = -0.6;
|
||||
this.radius = 50 * Math.random() + 10;
|
||||
this.item = new PlacedSymbol(symbol);
|
||||
this.item.position = point;
|
||||
this.item.scale(this.radius / 10);
|
||||
group.appendTop(this.item);
|
||||
},
|
||||
|
||||
for (var i = 0; i < 10; i++) {
|
||||
var position = Point.random().multiply(doc.size);
|
||||
var vector = Point.random().subtract(0.5, 0).multiply(50, 100);
|
||||
var ball = new Ball(position, vector);
|
||||
contrainPoint: function() {
|
||||
var x = this.point.x;
|
||||
var y = this.point.y;
|
||||
var radius = this.radius;
|
||||
this.point.x = Math.min(Math.max(radius, x), document.size.width - radius);
|
||||
this.point.y = Math.min(Math.max(radius, y), document.size.height - radius);
|
||||
},
|
||||
|
||||
iterate: function() {
|
||||
this.vector.y += this.gravity;
|
||||
this.vector.x *= 0.99;
|
||||
var pre = this.point + this.vector;
|
||||
if (pre.x < this.radius || pre.x > document.size.width - this.radius)
|
||||
this.vector.x *= -this.dampen;
|
||||
if (pre.y < this.radius || pre.y > document.size.height - this.radius) {
|
||||
if (Math.abs(this.vector.x) < 3) {
|
||||
this.vector.x = Math.random() * 150 - 75;
|
||||
this.vector.y = Math.random() * 100 + 20;
|
||||
}
|
||||
this.vector.y *= this.bounce;
|
||||
}
|
||||
this.point = this.point + this.vector;
|
||||
this.contrainPoint();
|
||||
this.item.position = this.point;
|
||||
}
|
||||
});
|
||||
|
||||
for (var i = 0; i < 10; i++) {
|
||||
var position = Point.random() * document.size;
|
||||
var vector = (Point.random() - [0.5, 0]) * [50, 100];
|
||||
var ball = new Ball(position, vector);
|
||||
balls.push(ball);
|
||||
}
|
||||
|
||||
var lastDelta;
|
||||
tool = new Tool({
|
||||
onMouseDrag: function(event) {
|
||||
lastDelta = event.delta;
|
||||
},
|
||||
onMouseUp: function(event) {
|
||||
var ball = new Ball(event.point, lastDelta);
|
||||
balls.push(ball);
|
||||
lastDelta = null;
|
||||
}
|
||||
});
|
||||
setInterval(draw, 30);
|
||||
|
||||
var lastDelta;
|
||||
tool = new Tool({
|
||||
onMouseDrag: function(event) {
|
||||
lastDelta = event.delta;
|
||||
},
|
||||
onMouseUp: function(event) {
|
||||
var ball = new Ball(event.point, lastDelta);
|
||||
balls.push(ball);
|
||||
lastDelta = null;
|
||||
}
|
||||
});
|
||||
setInterval(draw, 30);
|
||||
var boundPath = new Path.Rectangle([-10, -10], [-11, -11]);
|
||||
boundPath.strokeColor = 'red';
|
||||
boundPath.strokeWidth = 1;
|
||||
|
||||
var boundPath = new Path.Rectangle([-10, -10], [-11, -11]);
|
||||
boundPath.strokeColor = 'red';
|
||||
boundPath.strokeWidth = 1;
|
||||
|
||||
function draw() {
|
||||
for (var i = 0, l = balls.length; i < l; i++) {
|
||||
balls[i].iterate();
|
||||
}
|
||||
boundPath.bounds = group.bounds;
|
||||
doc.redraw();
|
||||
function draw() {
|
||||
for (var i = 0, l = balls.length; i < l; i++) {
|
||||
balls[i].iterate();
|
||||
}
|
||||
boundPath.bounds = group.bounds;
|
||||
document.redraw();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,30 +33,26 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
|
||||
var point = new Point(1024, 768).divide(2);
|
||||
for (var i = 0; i < 30; i++) {
|
||||
var vector = new Point(10 + 20 * i, 0).rotate(i);
|
||||
var l = vector.length;
|
||||
var path = new Path();
|
||||
path.fillColor = i % 2 ? 'red' : 'black';
|
||||
path.closed = true;
|
||||
for (var j = 0; j < 17; j++) {
|
||||
vector = vector.rotate(45 / 2);
|
||||
if (j == 0) {
|
||||
path.add(point.add(vector));
|
||||
} else {
|
||||
path.arcTo(point.add(vector), true);
|
||||
}
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var point = document.bounds.center;
|
||||
for (var i = 0; i < 30; i++) {
|
||||
var vector = new Point(10 + 20 * i, 0).rotate(i);
|
||||
var l = vector.length;
|
||||
var path = new Path();
|
||||
path.fillColor = i % 2 ? 'red' : 'black';
|
||||
path.closed = true;
|
||||
for (var j = 0; j < 17; j++) {
|
||||
vector = vector.rotate(45 / 2);
|
||||
if (j == 0) {
|
||||
path.add(point + vector);
|
||||
} else {
|
||||
path.arcTo(point + vector, true);
|
||||
}
|
||||
doc.activeLayer.appendBottom(path);
|
||||
}
|
||||
doc.redraw();
|
||||
document.activeLayer.appendBottom(path);
|
||||
}
|
||||
document.redraw();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,19 +33,14 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
var count = 0;
|
||||
var doc;
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
doc = new Document(canvas);
|
||||
var center = doc.size.divide(2);
|
||||
for (var i = 0; i < 70; i++) {
|
||||
var path = new Path.Circle(center, i * 5);
|
||||
path.strokeColor = 'black';
|
||||
}
|
||||
doc.redraw();
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var center = document.bounds.center;
|
||||
for (var i = 0; i < 70; i++) {
|
||||
var path = new Path.Circle(center, i * 5);
|
||||
path.strokeColor = 'black';
|
||||
}
|
||||
document.redraw();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,31 +33,27 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
|
||||
var letterPath = new Path(
|
||||
new Segment(new Point(63.39306640625, 265.7138671875), null, new Point(10.86669921875, 6.96630859375)),
|
||||
new Segment(new Point(106.58203125, 277.97412109375), new Point(-16.71826171875, 0), new Point(24.79931640625, 0)),
|
||||
new Segment(new Point(145.87060546875, 245.9306640625), new Point(0, 18.947265625), new Point(0, -17.27587890625)),
|
||||
new Segment(new Point(110.4833984375, 208.87158203125), new Point(25.35595703125, 9.4736328125), new Point(-30.65087890625, -11.14599609375)),
|
||||
new Segment(new Point(60.88525390625, 155.37255859375), new Point(0, 26.19189453125), new Point(0, -29.25732421875)),
|
||||
new Segment(new Point(121.62890625, 104.380859375), new Point(-36.501953125, 0), new Point(18.947265625, 0)),
|
||||
new Segment(new Point(162.86767578125, 113.576171875), new Point(-8.08056640625, -4.73681640625)),
|
||||
new Segment(new Point(156.18017578125, 133.35986328125), null, new Point(-5.8515625, -3.62255859375)),
|
||||
new Segment(new Point(120.79296875, 124.443359375), new Point(16.9970703125, 0), new Point(-25.63525390625, 0)),
|
||||
new Segment(new Point(85.4052734375, 152.5859375), new Point(0, -12.8173828125), new Point(0, 17.55419921875)),
|
||||
new Segment(new Point(122.7431640625, 188.80908203125), new Point(-25.91357421875, -10.03076171875), new Point(31.76513671875, 12.26025390625)),
|
||||
new Segment(new Point(170.39111328125, 243.97998046875), new Point(0, -27.58544921875), new Point(0, 28.97900390625)),
|
||||
new Segment(new Point(104.91015625, 298.31494140625), new Point(44.30419921875, 0), new Point(-18.111328125, 0)),
|
||||
new Segment(new Point(56.984375, 286.0546875), new Point(10.03076171875, 6.6875))
|
||||
);
|
||||
letterPath.closed = true;
|
||||
letterPath.fillColor = 'black';
|
||||
doc.redraw();
|
||||
}
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var letterPath = new Path(
|
||||
new Segment(new Point(63.39306640625, 265.7138671875), null, new Point(10.86669921875, 6.96630859375)),
|
||||
new Segment(new Point(106.58203125, 277.97412109375), new Point(-16.71826171875, 0), new Point(24.79931640625, 0)),
|
||||
new Segment(new Point(145.87060546875, 245.9306640625), new Point(0, 18.947265625), new Point(0, -17.27587890625)),
|
||||
new Segment(new Point(110.4833984375, 208.87158203125), new Point(25.35595703125, 9.4736328125), new Point(-30.65087890625, -11.14599609375)),
|
||||
new Segment(new Point(60.88525390625, 155.37255859375), new Point(0, 26.19189453125), new Point(0, -29.25732421875)),
|
||||
new Segment(new Point(121.62890625, 104.380859375), new Point(-36.501953125, 0), new Point(18.947265625, 0)),
|
||||
new Segment(new Point(162.86767578125, 113.576171875), new Point(-8.08056640625, -4.73681640625)),
|
||||
new Segment(new Point(156.18017578125, 133.35986328125), null, new Point(-5.8515625, -3.62255859375)),
|
||||
new Segment(new Point(120.79296875, 124.443359375), new Point(16.9970703125, 0), new Point(-25.63525390625, 0)),
|
||||
new Segment(new Point(85.4052734375, 152.5859375), new Point(0, -12.8173828125), new Point(0, 17.55419921875)),
|
||||
new Segment(new Point(122.7431640625, 188.80908203125), new Point(-25.91357421875, -10.03076171875), new Point(31.76513671875, 12.26025390625)),
|
||||
new Segment(new Point(170.39111328125, 243.97998046875), new Point(0, -27.58544921875), new Point(0, 28.97900390625)),
|
||||
new Segment(new Point(104.91015625, 298.31494140625), new Point(44.30419921875, 0), new Point(-18.111328125, 0)),
|
||||
new Segment(new Point(56.984375, 286.0546875), new Point(10.03076171875, 6.6875))
|
||||
);
|
||||
letterPath.closed = true;
|
||||
letterPath.fillColor = 'black';
|
||||
document.redraw();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,25 +33,24 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var count = 0;
|
||||
var doc;
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
doc = new Document(canvas);
|
||||
setInterval(draw, 20);
|
||||
}
|
||||
setInterval(draw, 20);
|
||||
|
||||
function draw() {
|
||||
count++;
|
||||
doc.activeLayer.children = [];
|
||||
var point = new Point(1024, 768).divide(2);
|
||||
document.activeLayer.children = [];
|
||||
var point = new Point(document.size) / 2;
|
||||
var vector = new Point(100, 0);
|
||||
for (var i = 0; i < 180; i++) {
|
||||
var path = new Path.Line(point.add(vector.rotate(i * 2).normalize(30)), point.add(vector.rotate(i * 2).normalize(30 + Math.abs(Math.sin((i + count / 20)) * 300))));
|
||||
var center = point + vector.rotate(i * 2).normalize(30);
|
||||
var length = 30 + Math.abs(Math.sin((i + count / 20)) * 300);
|
||||
var end = point + vector.rotate(i * 2).normalize(length);
|
||||
var path = new Path.Line(center, end);
|
||||
path.strokeColor = i % 4 ? 'black' : 'red';
|
||||
}
|
||||
doc.redraw();
|
||||
document.redraw();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,16 +33,11 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
var count = 0;
|
||||
var doc;
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
doc = new Document(canvas);
|
||||
var path = new Path.Rectangle([50, 50], [100, 100]);
|
||||
path.strokeColor = 'black';
|
||||
doc.redraw();
|
||||
}
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var path = new Path.Rectangle([50, 50], [100, 100]);
|
||||
path.strokeColor = 'black';
|
||||
document.redraw();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,22 +33,18 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var count = 0;
|
||||
var doc;
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
doc = new Document(canvas);
|
||||
setInterval(draw, 30);
|
||||
}
|
||||
setInterval(draw, 30);
|
||||
function draw() {
|
||||
count++;
|
||||
doc.activeLayer.children = [];
|
||||
document.activeLayer.children = [];
|
||||
var rect = new Rectangle([150, 150], [300, 300]);
|
||||
var size = Math.abs(Math.sin(count / 40)) * 150 + 10;
|
||||
var path = new Path.RoundRectangle(rect, size);
|
||||
path.fillColor = 'black';
|
||||
doc.redraw();
|
||||
document.redraw();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,28 +33,24 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
|
||||
var point = new Point(1024, 768).divide(2);
|
||||
for (var i = 0; i < 30; i++) {
|
||||
var vector = new Point(1 + 10 * i, 0).rotate(i);
|
||||
var l = vector.length;
|
||||
var path = new Path();
|
||||
path.fillColor = i % 2 ? 'red' : 'black';
|
||||
path.closed = true;
|
||||
for (var j = 0; j < 32; j++) {
|
||||
vector = vector.rotate(45 / 4);
|
||||
var newPoint = point.add(vector).add(vector.rotate(-180).normalize(l * (j % 2 ? 0.1 : -0.1)));
|
||||
path.add(newPoint);
|
||||
}
|
||||
path.smooth();
|
||||
doc.activeLayer.appendBottom(path);
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var point = new Point(document.size) / 2;
|
||||
for (var i = 0; i < 30; i++) {
|
||||
var vector = new Point(1 + 10 * i, 0).rotate(i);
|
||||
var l = vector.length;
|
||||
var path = new Path();
|
||||
path.fillColor = i % 2 ? 'red' : 'black';
|
||||
path.closed = true;
|
||||
for (var j = 0; j < 32; j++) {
|
||||
vector = vector.rotate(45 / 4);
|
||||
var newPoint = point + vector + vector.rotate(-180).normalize(l * (j % 2 ? 0.1 : -0.1));
|
||||
path.add(newPoint);
|
||||
}
|
||||
doc.redraw();
|
||||
path.smooth();
|
||||
document.activeLayer.appendBottom(path);
|
||||
}
|
||||
document.redraw();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,45 +33,42 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
var path = new Path([100, 150], [150, 200], [200, 150]);
|
||||
path.strokeColor = 'black';
|
||||
path.strokeWidth = 30;
|
||||
path.strokeJoin = 'round';
|
||||
|
||||
var path = new Path([240, 150], [290, 200], [340, 150]);
|
||||
path.strokeColor = 'black';
|
||||
path.strokeWidth = 30;
|
||||
path.strokeJoin = 'bevel';
|
||||
|
||||
var path = new Path([380, 150], [430, 200], [480, 150]);
|
||||
path.strokeColor = 'black';
|
||||
path.strokeWidth = 30;
|
||||
path.strokeJoin = 'miter';
|
||||
|
||||
var path = new Path([100, 250], [150, 300], [200, 250]);
|
||||
path.strokeColor = 'black';
|
||||
path.strokeWidth = 30;
|
||||
path.strokeJoin = 'round';
|
||||
path.strokeCap = 'round';
|
||||
|
||||
var path = new Path([240, 250], [290, 300], [340, 250]);
|
||||
path.strokeColor = 'black';
|
||||
path.strokeWidth = 30;
|
||||
path.strokeJoin = 'bevel';
|
||||
path.strokeCap = 'square';
|
||||
|
||||
var path = new Path([380, 250], [430, 300], [480, 250]);
|
||||
path.strokeColor = 'black';
|
||||
path.strokeWidth = 30;
|
||||
path.strokeJoin = 'miter';
|
||||
path.strokeCap = 'butt';
|
||||
|
||||
doc.redraw();
|
||||
}
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var path = new Path([100, 150], [150, 200], [200, 150]);
|
||||
path.strokeColor = 'black';
|
||||
path.strokeWidth = 30;
|
||||
path.strokeJoin = 'round';
|
||||
|
||||
var path = new Path([240, 150], [290, 200], [340, 150]);
|
||||
path.strokeColor = 'black';
|
||||
path.strokeWidth = 30;
|
||||
path.strokeJoin = 'bevel';
|
||||
|
||||
var path = new Path([380, 150], [430, 200], [480, 150]);
|
||||
path.strokeColor = 'black';
|
||||
path.strokeWidth = 30;
|
||||
path.strokeJoin = 'miter';
|
||||
|
||||
var path = new Path([100, 250], [150, 300], [200, 250]);
|
||||
path.strokeColor = 'black';
|
||||
path.strokeWidth = 30;
|
||||
path.strokeJoin = 'round';
|
||||
path.strokeCap = 'round';
|
||||
|
||||
var path = new Path([240, 250], [290, 300], [340, 250]);
|
||||
path.strokeColor = 'black';
|
||||
path.strokeWidth = 30;
|
||||
path.strokeJoin = 'bevel';
|
||||
path.strokeCap = 'square';
|
||||
|
||||
var path = new Path([380, 250], [430, 300], [480, 250]);
|
||||
path.strokeColor = 'black';
|
||||
path.strokeWidth = 30;
|
||||
path.strokeJoin = 'miter';
|
||||
path.strokeCap = 'butt';
|
||||
console.log(path.segments);
|
||||
document.redraw();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,86 +33,81 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
doc.currentStyle = {
|
||||
strokeColor: '#4f7aff',
|
||||
strokeWidth: 1
|
||||
};
|
||||
|
||||
var path = new Path();
|
||||
path.style = {
|
||||
strokeColor: 'black',
|
||||
strokeWidth: 1
|
||||
};
|
||||
var currentSegment;
|
||||
var inLine = new Path([0, 0], [0, 0]);
|
||||
var outLine = new Path([0, 0], [0, 0]);
|
||||
var lastInLine = new Path([0, 0], [0, 0]);
|
||||
lastInLine.visible = false;
|
||||
|
||||
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];
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
document.currentStyle = {
|
||||
strokeColor: '#4f7aff',
|
||||
strokeWidth: 1
|
||||
};
|
||||
|
||||
var path = new Path();
|
||||
path.style = {
|
||||
strokeColor: 'black',
|
||||
strokeWidth: 1
|
||||
};
|
||||
var currentSegment;
|
||||
var inLine = new Path([0, 0], [0, 0]);
|
||||
var outLine = new Path([0, 0], [0, 0]);
|
||||
var lastInLine = new Path([0, 0], [0, 0]);
|
||||
lastInLine.visible = false;
|
||||
|
||||
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;
|
||||
var tool = new Tool({
|
||||
onMouseDown: function(event) {
|
||||
if (event.count > 1) {
|
||||
var first = lastInLine.segments.first;
|
||||
first.point = inLine.segments.first.point;
|
||||
var last = lastInLine.segments.last;
|
||||
last.point = inLine.segments.last.point;
|
||||
lastInLine.visible = true;
|
||||
lastInCircle.position = last.point;
|
||||
}
|
||||
currentSegment = path.add(event.point);
|
||||
inLine.segments.first.point = event.point;
|
||||
outLine.segments.first.point = event.point;
|
||||
inLine.segments.last.point = event.point;
|
||||
outLine.segments.last.point = event.point;
|
||||
inLine.visible = true;
|
||||
outLine.visible = true;
|
||||
|
||||
outCircle.position = event.point.round().add(0.5, 0.5);
|
||||
inCircle.position = event.point.round().add(0.5, 0.5);
|
||||
|
||||
var rect = new PlacedSymbol(rectSymbol);
|
||||
rect.position = event.point.round().add(0.5, 0.5);
|
||||
|
||||
curRect = new Path.Rectangle([0.5, 0.5], [4, 4]);
|
||||
curRect.position = event.point.round();
|
||||
curRect.fillColor = '#4f7aff';
|
||||
curRect.strokeWidth = 0;
|
||||
},
|
||||
|
||||
onMouseDrag: function(event) {
|
||||
var delta = event.point.subtract(event.downPoint);
|
||||
currentSegment.handleOut = delta;
|
||||
currentSegment.handleIn = delta.multiply(-1);
|
||||
outLine.segments.last.point = currentSegment.handleIn.add(event.downPoint);
|
||||
inLine.segments.last.point = currentSegment.handleOut.add(event.downPoint);
|
||||
outCircle.position = outLine.segments.last.point;
|
||||
inCircle.position = inLine.segments.last.point;
|
||||
},
|
||||
|
||||
onMouseUp: function(event) {
|
||||
curRect.remove();
|
||||
}
|
||||
});
|
||||
var curRect;
|
||||
function onMouseDown(event) {
|
||||
if (event.count > 1) {
|
||||
var first = lastInLine.segments.first;
|
||||
first.point = inLine.segments.first.point;
|
||||
var last = lastInLine.segments.last;
|
||||
last.point = inLine.segments.last.point;
|
||||
lastInLine.visible = true;
|
||||
lastInCircle.position = last.point;
|
||||
}
|
||||
currentSegment = path.add(event.point);
|
||||
inLine.segments.first.point = event.point;
|
||||
outLine.segments.first.point = event.point;
|
||||
inLine.segments.last.point = event.point;
|
||||
outLine.segments.last.point = event.point;
|
||||
inLine.visible = true;
|
||||
outLine.visible = true;
|
||||
|
||||
outCircle.position = event.point.round() + [0.5, 0.5];
|
||||
inCircle.position = event.point.round() + [0.5, 0.5];
|
||||
|
||||
var rect = new PlacedSymbol(rectSymbol);
|
||||
rect.position = event.point.round() + [0.5, 0.5];
|
||||
|
||||
curRect = new Path.Rectangle([0.5, 0.5], [4, 4]);
|
||||
curRect.position = event.point.round();
|
||||
curRect.fillColor = '#4f7aff';
|
||||
curRect.strokeWidth = 0;
|
||||
}
|
||||
|
||||
function onMouseDrag(event) {
|
||||
var delta = event.point - event.downPoint;
|
||||
currentSegment.handleOut = delta;
|
||||
currentSegment.handleIn = -delta;
|
||||
outLine.segments.last.point = currentSegment.handleIn + event.downPoint;
|
||||
inLine.segments.last.point = currentSegment.handleOut + event.downPoint;
|
||||
outCircle.position = outLine.segments.last.point;
|
||||
inCircle.position = inLine.segments.last.point;
|
||||
}
|
||||
|
||||
function onMouseUp(event) {
|
||||
curRect.remove();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,25 +33,20 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var path;
|
||||
var tool = new Tool({
|
||||
onMouseDrag: function(event) {
|
||||
if (path) path.remove();
|
||||
var distance = event.downPoint.subtract(event.point).length;
|
||||
path = new Path.Circle(event.downPoint, distance);
|
||||
path.strokeColor = 'black';
|
||||
path.fillColor = 'white';
|
||||
},
|
||||
|
||||
onMouseUp: function(event) {
|
||||
path = null;
|
||||
}
|
||||
});
|
||||
}
|
||||
function onMouseDrag(event) {
|
||||
if (path) path.remove();
|
||||
var distance = (event.downPoint - event.point).length;
|
||||
path = new Path.Circle(event.downPoint, distance);
|
||||
path.strokeColor = 'black';
|
||||
path.fillColor = 'white';
|
||||
};
|
||||
|
||||
function onMouseUp(event) {
|
||||
path = null;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,26 +33,21 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
var path;
|
||||
var tool = new Tool({
|
||||
onMouseDown: function(event) {
|
||||
path = new Path();
|
||||
path.strokeColor = 'black';
|
||||
path.strokeWidth = 5;
|
||||
path.strokeJoin = 'round';
|
||||
path.strokeCap = 'round';
|
||||
path.add(event.point);
|
||||
},
|
||||
onMouseDrag: function(event) {
|
||||
path.arcTo(event.point, true);
|
||||
}
|
||||
});
|
||||
tool.minDistance = 30;
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var path;
|
||||
function onMouseDown(event) {
|
||||
path = new Path();
|
||||
path.strokeColor = 'black';
|
||||
path.strokeWidth = 5;
|
||||
path.strokeJoin = 'round';
|
||||
path.strokeCap = 'round';
|
||||
path.add(event.point);
|
||||
}
|
||||
function onMouseDrag(event) {
|
||||
path.arcTo(event.point, true);
|
||||
}
|
||||
tool.minDistance = 30;
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,72 +33,65 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
|
||||
var path;
|
||||
var minSize = 5;
|
||||
|
||||
var tool = new Tool({
|
||||
onMouseDrag: function(event) {
|
||||
// If the user dragged more then minSize:
|
||||
if (event.delta.length > minSize) {
|
||||
// If there is no path, make one:
|
||||
if (!path) {
|
||||
path = new Path();
|
||||
path.fillColor = 'black';
|
||||
path.add(event.lastPoint);
|
||||
}
|
||||
|
||||
var step = event.delta.divide(2);
|
||||
step.angle = step.angle + 90;
|
||||
|
||||
// The top point: the middle point + the step rotated by 90 degrees:
|
||||
// -----*
|
||||
// |
|
||||
// ------
|
||||
var top = event.middlePoint.add(step);
|
||||
|
||||
// The bottom point: the middle point - the step rotated by 90 degrees:
|
||||
// ------
|
||||
// |
|
||||
// -----*
|
||||
var bottom = event.middlePoint.subtract(step);
|
||||
|
||||
path.add(top);
|
||||
path.insert(0, bottom);
|
||||
path.smooth();
|
||||
} else {
|
||||
// If the user dragged too slowly:
|
||||
|
||||
// If there is currently a path, close it
|
||||
if (path) {
|
||||
path.add(event.point);
|
||||
path.closed = true;
|
||||
path.smooth();
|
||||
|
||||
// Set path to null (nothing) so the path check above
|
||||
// will force a new path next time the user drags fast enough:
|
||||
path = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onMouseUp: function(event) {
|
||||
if (path) {
|
||||
path.add(event.point);
|
||||
path.closed = true;
|
||||
path.smooth();
|
||||
|
||||
// Set path to null (nothing) so the path check above
|
||||
// will force a new path next time the user drags fast enough:
|
||||
path = null;
|
||||
}
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var path;
|
||||
var minSize = 5;
|
||||
tool.maxDistance = 20;
|
||||
function onMouseDrag(event) {
|
||||
// If the user dragged more then minSize:
|
||||
if (event.delta.length > minSize) {
|
||||
// If there is no path, make one:
|
||||
if (!path) {
|
||||
path = new Path();
|
||||
path.fillColor = 'black';
|
||||
path.add(event.lastPoint);
|
||||
}
|
||||
});
|
||||
tool.maxDistance = 20;
|
||||
|
||||
var step = event.delta / 2;
|
||||
step.angle = step.angle + 90;
|
||||
|
||||
// The top point: the middle point + the step rotated by 90 degrees:
|
||||
// -----*
|
||||
// |
|
||||
// ------
|
||||
var top = event.middlePoint + step;
|
||||
|
||||
// The bottom point: the middle point - the step rotated by 90 degrees:
|
||||
// ------
|
||||
// |
|
||||
// -----*
|
||||
var bottom = event.middlePoint - step;
|
||||
|
||||
path.add(top);
|
||||
path.insert(0, bottom);
|
||||
path.smooth();
|
||||
} else {
|
||||
// If the user dragged too slowly:
|
||||
|
||||
// If there is currently a path, close it
|
||||
if (path) {
|
||||
path.add(event.point);
|
||||
path.closed = true;
|
||||
path.smooth();
|
||||
|
||||
// Set path to null (nothing) so the path check above
|
||||
// will force a new path next time the user drags fast enough:
|
||||
path = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseUp(event) {
|
||||
if (path) {
|
||||
path.add(event.point);
|
||||
path.closed = true;
|
||||
path.smooth();
|
||||
|
||||
// Set path to null (nothing) so the path check above
|
||||
// will force a new path next time the user drags fast enough:
|
||||
path = null;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,79 +33,75 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
|
||||
var path;
|
||||
var strokeEnds = 6;
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
// Mouse handling
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
// This script belongs to the following tutorial:
|
||||
//
|
||||
// http://scriptographer.org/tutorials/geometry/working-with-mouse-vectors/#adding-brush-stroke-ends
|
||||
|
||||
var lastPoint;
|
||||
|
||||
var tool = new Tool({
|
||||
onMouseDown: function(event) {
|
||||
path = new Path();
|
||||
path.fillColor = event.count % 2 ? 'red' : 'black';
|
||||
},
|
||||
tool.fixedDistance = 80;
|
||||
|
||||
onMouseDrag: function(event) {
|
||||
// If this is the first drag event,
|
||||
// add the strokes at the start:
|
||||
if (event.count == 1) {
|
||||
addStrokes(event.middlePoint, event.delta.multiply(-1));
|
||||
} else {
|
||||
var step = event.delta.divide(2);
|
||||
step.angle = step.angle + 90;
|
||||
var path;
|
||||
var strokeEnds = 6;
|
||||
|
||||
// The top point: the middle point + the step rotated by 90 degrees:
|
||||
// -----*
|
||||
// |
|
||||
// ------
|
||||
var top = event.middlePoint.add(step);
|
||||
function onMouseDown(event) {
|
||||
path = new Path();
|
||||
path.fillColor = event.count % 2 ? 'red' : 'black';
|
||||
}
|
||||
|
||||
// The bottom point: the middle point - the step rotated by 90 degrees:
|
||||
// ------
|
||||
// |
|
||||
// -----*
|
||||
var bottom = event.middlePoint.subtract(step);
|
||||
var lastPoint;
|
||||
function onMouseDrag(event) {
|
||||
// If this is the first drag event,
|
||||
// add the strokes at the start:
|
||||
if (event.count == 1) {
|
||||
addStrokes(event.middlePoint, event.delta * -1);
|
||||
} else {
|
||||
var step = event.delta / 2;
|
||||
step.angle += 90;
|
||||
|
||||
path.add(top);
|
||||
path.insert(0, bottom);
|
||||
}
|
||||
path.smooth();
|
||||
// The top point: the middle point + the step rotated by 90 degrees:
|
||||
// -----*
|
||||
// |
|
||||
// ------
|
||||
var top = event.middlePoint + step;
|
||||
|
||||
lastPoint = event.middlePoint;
|
||||
},
|
||||
|
||||
onMouseUp: function(event) {
|
||||
var delta = event.point.subtract(lastPoint);
|
||||
delta.length = tool.maxDistance;
|
||||
addStrokes(event.point, delta);
|
||||
path.closed = true;
|
||||
path.smooth();
|
||||
}
|
||||
});
|
||||
|
||||
function addStrokes(point, delta) {
|
||||
var step = delta.rotate(90);
|
||||
var strokePoints = strokeEnds * 2 + 1;
|
||||
point = point.subtract(step.divide(2));
|
||||
step = step.divide(strokePoints - 1);
|
||||
for (var i = 0; i < strokePoints; i++) {
|
||||
var strokePoint = point.add(step.multiply(i));
|
||||
var offset = delta.multiply(Math.random() * 0.3 + 0.1);
|
||||
if (i % 2) {
|
||||
offset = offset.multiply(-1);
|
||||
}
|
||||
strokePoint = strokePoint.add(offset);
|
||||
path.insert(0, strokePoint);
|
||||
}
|
||||
// The bottom point: the middle point - the step rotated by 90 degrees:
|
||||
// ------
|
||||
// |
|
||||
// -----*
|
||||
var bottom = event.middlePoint - step;
|
||||
|
||||
path.add(top);
|
||||
path.insert(0, bottom);
|
||||
}
|
||||
path.smooth();
|
||||
|
||||
lastPoint = event.middlePoint;
|
||||
}
|
||||
|
||||
function onMouseUp(event) {
|
||||
var delta = event.point - lastPoint;
|
||||
delta.length = tool.maxDistance;
|
||||
addStrokes(event.point, delta);
|
||||
path.closed = true;
|
||||
path.smooth();
|
||||
}
|
||||
|
||||
function addStrokes(point, delta) {
|
||||
var step = delta.rotate(90);
|
||||
var strokePoints = strokeEnds * 2 + 1;
|
||||
point -= step / 2;
|
||||
step /= strokePoints - 1;
|
||||
for(var i = 0; i < strokePoints; i++) {
|
||||
var strokePoint = point + step * i;
|
||||
var offset = delta * (Math.random() * 0.3 + 0.1);
|
||||
if (i % 2) {
|
||||
offset *= -1;
|
||||
}
|
||||
strokePoint += offset;
|
||||
path.insert(0, strokePoint);
|
||||
}
|
||||
tool.fixedDistance = 80;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,35 +33,37 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
|
||||
var values = { size: 10 };
|
||||
|
||||
var point, path;
|
||||
|
||||
function getPos(pt) {
|
||||
return (pt.divide(values.size)).round().multiply(values.size);
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
// Values
|
||||
|
||||
tool.fixedDistance = 10;
|
||||
|
||||
var values = { size: tool.fixedDistance };
|
||||
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
// Mouse handling
|
||||
|
||||
var point, path;
|
||||
|
||||
function getPos(pt) {
|
||||
return (pt / values.size).round() * values.size;
|
||||
}
|
||||
|
||||
function onMouseDown(event) {
|
||||
point = getPos(event.point);
|
||||
path = new Path();
|
||||
path.strokeColor = 'black';
|
||||
path.add(point);
|
||||
}
|
||||
|
||||
function onMouseDrag(event) {
|
||||
var p = getPos(event.point);
|
||||
if (point != p) {
|
||||
path.add(p);
|
||||
point = p;
|
||||
}
|
||||
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
var point, path;
|
||||
var tool = new Tool({
|
||||
onMouseDown: function(event) {
|
||||
point = getPos(event.point);
|
||||
path = new Path();
|
||||
path.strokeColor = 'black';
|
||||
path.add(point);
|
||||
},
|
||||
onMouseDrag: function(event) {
|
||||
var p = getPos(event.point);
|
||||
if (!point.equals(p)) {
|
||||
path.add(p);
|
||||
point = p;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,37 +33,40 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
var values = {
|
||||
curviness: 0.5,
|
||||
distance: 10,
|
||||
offset: 10,
|
||||
mouseOffset: true
|
||||
};
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
// Values
|
||||
|
||||
var path;
|
||||
var mul = 1;
|
||||
var tool = new Tool({
|
||||
onMouseDown: function(event) {
|
||||
path = new Path();
|
||||
path.strokeColor = 'black';
|
||||
},
|
||||
tool.minDistance = 10;
|
||||
|
||||
onMouseDrag: function(event) {
|
||||
var step = event.delta.rotate(90 * mul);
|
||||
if (!values.mouseOffset)
|
||||
step.length = values.offset;
|
||||
var segment = new Segment(event.point.add(step));
|
||||
segment.handleIn = event.delta.multiply(-values.curviness);
|
||||
segment.handleOut = event.delta.multiply(values.curviness);
|
||||
path.add(segment);
|
||||
mul *= -1;
|
||||
}
|
||||
});
|
||||
tool.fixedDistance = 10;
|
||||
var values = {
|
||||
curviness: 0.5,
|
||||
distance: tool.minDistance,
|
||||
offset: 10,
|
||||
mouseOffset: true
|
||||
};
|
||||
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
// Mouse handling
|
||||
|
||||
var path;
|
||||
function onMouseDown(event) {
|
||||
path = new Path();
|
||||
}
|
||||
|
||||
var mul = 1;
|
||||
function onMouseDrag(event) {
|
||||
var step = event.delta.rotate(90 * mul);
|
||||
|
||||
if (!values.mouseOffset)
|
||||
step.length = values.offset;
|
||||
|
||||
var segment = new Segment(event.point + step);
|
||||
segment.handleIn = -event.delta * values.curviness;
|
||||
segment.handleOut = event.delta * values.curviness;
|
||||
path.add(segment);
|
||||
mul *= -1;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<script type="text/javascript" src="../../lib/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../../lib/parse-js.js"></script>
|
||||
<script type="text/javascript" src="../../src/Paper.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
|
||||
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
|
||||
|
|
@ -32,76 +33,78 @@
|
|||
<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/Gradient.js"></script>
|
||||
<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var doc = new Document(canvas);
|
||||
|
||||
var values = {
|
||||
minDistance: 30,
|
||||
varyThickness: true
|
||||
};
|
||||
<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
// Values
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
// Mouse handling
|
||||
var values = {
|
||||
minDistance: 10,
|
||||
varyThickness: true
|
||||
};
|
||||
|
||||
var worm;
|
||||
|
||||
var tool = new Tool({
|
||||
onMouseDown: function(event) {
|
||||
worm = new Path();
|
||||
worm.fillColor = '#ffffff';
|
||||
worm.strokeColor = '#000000';
|
||||
worm.add(event.point);
|
||||
},
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
// Mouse handling
|
||||
|
||||
onMouseDrag: function(event) {
|
||||
// the vector in the direction that the mouse moved
|
||||
var step = event.delta;
|
||||
tool.minDistance = values.minDistance;
|
||||
|
||||
// if the vary thickness checkbox is marked
|
||||
// divide the length of the step vector by two:
|
||||
if (values.varyThickness) {
|
||||
step.length = step.length / 2;
|
||||
} else {
|
||||
// otherwise set the length of the step vector to half of minDistance
|
||||
step.length = values.minDistance / 2;
|
||||
}
|
||||
var worm;
|
||||
|
||||
// the top point: the middle point + the step rotated by -90 degrees
|
||||
// -----*
|
||||
// |
|
||||
// ------
|
||||
var top = event.middlePoint.add(step.rotate(-90));
|
||||
// Every time the user clicks the mouse to drag we create a path
|
||||
// and when a user drags the mouse we add points to it
|
||||
function onMouseDown(event) {
|
||||
worm = new Path();
|
||||
worm.fillColor = '#ffffff';
|
||||
worm.strokeColor = '#000000';
|
||||
worm.add(event.point);
|
||||
}
|
||||
|
||||
// the bottom point: the middle point + the step rotated by 90 degrees
|
||||
// ------
|
||||
// |
|
||||
// -----*
|
||||
var bottom = event.middlePoint.add(step.rotate(90));
|
||||
function onMouseDrag(event) {
|
||||
// the vector in the direction that the mouse moved
|
||||
var step = event.delta;
|
||||
|
||||
// add the top point to the end of the path
|
||||
worm.add(top);
|
||||
// if the vary thickness checkbox is marked
|
||||
// divide the length of the step vector by two:
|
||||
if (values.varyThickness) {
|
||||
step.length = step.length / 2;
|
||||
} else {
|
||||
// otherwise set the length of the step vector to half of
|
||||
// minDistance
|
||||
step.length = values.minDistance / 2;
|
||||
}
|
||||
|
||||
// insert the bottom point in the beginning of the path
|
||||
worm.insert(0, bottom);
|
||||
// the top point: the middle point + the step rotated by -90
|
||||
// degrees
|
||||
// -----*
|
||||
// |
|
||||
// ------
|
||||
var top = event.middlePoint + step.rotate(-90);
|
||||
|
||||
// make a new line path from top to bottom
|
||||
var line = new Path.Line(top, bottom);
|
||||
line.strokeColor = '#000000';
|
||||
// the bottom point: the middle point + the step rotated by 90
|
||||
// degrees
|
||||
// ------
|
||||
// |
|
||||
// -----*
|
||||
var bottom = event.middlePoint + step.rotate(90);
|
||||
|
||||
// smooth the segments of the path
|
||||
worm.smooth();
|
||||
},
|
||||
|
||||
onMouseUp: function(event) {
|
||||
worm.closed = true;
|
||||
worm.add(event.point);
|
||||
worm.smooth();
|
||||
}
|
||||
});
|
||||
tool.fixedDistance = 3;
|
||||
tool.minDistance = values.minDistance;
|
||||
// add the top point to the end of the path
|
||||
worm.add(top);
|
||||
|
||||
// insert the bottom point in the beginning of the path
|
||||
worm.insert(0, bottom);
|
||||
|
||||
// make a new line path from top to bottom
|
||||
var line = new Path.Line(top, bottom);
|
||||
line.strokeColor = '#000000';
|
||||
|
||||
// smooth the segments of the path
|
||||
worm.smooth();
|
||||
}
|
||||
|
||||
function onMouseUp(event) {
|
||||
worm.closed = true;
|
||||
worm.add(event.point);
|
||||
worm.smooth();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
|||
Loading…
Reference in a new issue