paper.js/examples/Tools/Worm Farm.html
2011-02-12 18:10:42 +01:00

98 lines
No EOL
3.1 KiB
HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<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="../../src/Paper.js"></script>
<script type="text/javascript" src="../../src/item/Item.js"></script>
<script type="text/javascript" src="../../src/basic/Point.js"></script>
<script type="text/javascript" src="../../src/basic/Rectangle.js"></script>
<script type="text/javascript" src="../../src/basic/Size.js"></script>
<script type="text/javascript" src="../../src/path/Segment.js"></script>
<script type="text/javascript" src="../../src/path/PathItem.js"></script>
<script type="text/javascript" src="../../src/path/Path.js"></script>
<script type="text/javascript" src="../../src/document/Doc.js"></script>
<script type="text/javascript" src="../../src/item/Layer.js"></script>
<script type="text/javascript" src="../../src/item/Group.js"></script>
<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
<script type="text/javascript" src="../../src/tool/Tool.js"></script>
<script>
window.onload = function() {
var canvas = document.getElementById('canvas');
var doc = new Doc(canvas);
var values = {
minDistance: 30,
varyThickness: true
};
////////////////////////////////////////////////////////////////////////////////
// Mouse handling
var worm;
var tool = new Tool({
onMouseDown: function(event) {
worm = new Path();
worm.fillColor = '#ffffff';
worm.strokeColor = '#000000';
worm.add(event.point);
},
onMouseDrag: function(event) {
// the vector in the direction that the mouse moved
var step = event.delta;
// 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;
}
// the top point: the middle point + the step rotated by -90 degrees
// -----*
// |
// ------
var top = event.middlePoint.add(step.rotate(-90));
// the bottom point: the middle point + the step rotated by 90 degrees
// ------
// |
// -----*
var bottom = event.middlePoint.add(step.rotate(90));
// 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();
},
onMouseUp: function(event) {
worm.closed = true;
worm.add(event.point);
worm.smooth();
}
});
tool.document = doc;
tool.fixedDistance = 3;
tool.minDistance = values.minDistance;
}
</script>
</head>
<body>
<canvas id='canvas' width=1024 height=768></canvas>
</body>