scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2024-12-29 09:22:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add Layer & Group script tags to Examples

Browse source
This commit is contained in:
Jonathan Puckey 2011-02-11 18:50:08 +01:00
parent 62409a18d4
commit 538bda6a09
18 changed files with 63 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
examples/Animated/animatedStar.html
View file

@ -14,6 +14,8 @@
<script type="text/javascript" src="../../src/PathItem.js"></script> <script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Path.js"></script> <script type="text/javascript" src="../../src/Path.js"></script>
<script type="text/javascript" src="../../src/Doc.js"></script> <script type="text/javascript" src="../../src/Doc.js"></script>
<script type="text/javascript" src="../../src/Layer.js"></script>
<script type="text/javascript" src="../../src/Group.js"></script>
<script> <script>
var canvas, doc; var canvas, doc;
var count = 0; var count = 0;
@ -25,7 +27,7 @@
function draw() { function draw() {
count++; count++;
doc.children = []; doc.activeLayer.children = [];
var point = new Point(1024, 768).divide(2); var point = new Point(1024, 768).divide(2);
for(var i = 0; i < 35; i++) { for(var i = 0; i < 35; i++) {
var vector = new Point(20 + 10 * i, 0).rotate(i * (360 / 35 * 2) * Math.sin(count / 150)); var vector = new Point(20 + 10 * i, 0).rotate(i * (360 / 35 * 2) * Math.sin(count / 150));
@ -40,9 +42,9 @@
path.add(newPoint); path.add(newPoint);
} }
path.smooth(); path.smooth();
doc.children.push(path); doc.activeLayer.appendTop(path);
} }
doc.children.reverse(); doc.activeLayer.children.reverse();
doc.redraw(); doc.redraw();
} }
</script> </script>

6
examples/Scripts/arcTo.html
View file

@ -14,6 +14,8 @@
<script type="text/javascript" src="../../src/PathItem.js"></script> <script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Path.js"></script> <script type="text/javascript" src="../../src/Path.js"></script>
<script type="text/javascript" src="../../src/Doc.js"></script> <script type="text/javascript" src="../../src/Doc.js"></script>
<script type="text/javascript" src="../../src/Layer.js"></script>
<script type="text/javascript" src="../../src/Group.js"></script>
<script> <script>
window.onload = function() { window.onload = function() {
var canvas = document.getElementById('canvas'); var canvas = document.getElementById('canvas');
@ -34,9 +36,9 @@
path.arcTo(point.add(vector), true); path.arcTo(point.add(vector), true);
} }
} }
doc.children.push(path); doc.activeLayer.appendTop(path);
} }
doc.children.reverse(); doc.activeLayer.children.reverse();
doc.redraw(); doc.redraw();
} }

4
examples/Scripts/circle.html
View file

@ -14,6 +14,8 @@
<script type="text/javascript" src="../../src/PathItem.js"></script> <script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Path.js"></script> <script type="text/javascript" src="../../src/Path.js"></script>
<script type="text/javascript" src="../../src/Doc.js"></script> <script type="text/javascript" src="../../src/Doc.js"></script>
<script type="text/javascript" src="../../src/Layer.js"></script>
<script type="text/javascript" src="../../src/Group.js"></script>
<script> <script>
var count = 0; var count = 0;
var doc; var doc;
@ -24,7 +26,7 @@
for(var i = 0; i < 70; i++) { for(var i = 0; i < 70; i++) {
var path = new Path.Circle(center, i * 5); var path = new Path.Circle(center, i * 5);
path.strokeColor = 'black'; path.strokeColor = 'black';
doc.children.push(path); doc.activeLayer.appendTop(path);
} }
doc.redraw(); doc.redraw();
} }

4
examples/Scripts/letter.html
View file

@ -14,6 +14,8 @@
<script type="text/javascript" src="../../src/PathItem.js"></script> <script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Path.js"></script> <script type="text/javascript" src="../../src/Path.js"></script>
<script type="text/javascript" src="../../src/Doc.js"></script> <script type="text/javascript" src="../../src/Doc.js"></script>
<script type="text/javascript" src="../../src/Layer.js"></script>
<script type="text/javascript" src="../../src/Group.js"></script>
<script> <script>
window.onload = function() { window.onload = function() {
var canvas = document.getElementById('canvas'); var canvas = document.getElementById('canvas');
@ -36,7 +38,7 @@
new Segment(new Point(56.984375, 286.0546875), new Point(10.03076171875, 6.6875)) new Segment(new Point(56.984375, 286.0546875), new Point(10.03076171875, 6.6875))
); );
letterPath.fillColor = 'black'; letterPath.fillColor = 'black';
doc.children.push(letterPath); doc.activeLayer.appendTop(letterPath);
doc.redraw(); doc.redraw();
} }
</script> </script>

6
examples/Scripts/lines.html
View file

@ -14,6 +14,8 @@
<script type="text/javascript" src="../../src/PathItem.js"></script> <script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Path.js"></script> <script type="text/javascript" src="../../src/Path.js"></script>
<script type="text/javascript" src="../../src/Doc.js"></script> <script type="text/javascript" src="../../src/Doc.js"></script>
<script type="text/javascript" src="../../src/Layer.js"></script>
<script type="text/javascript" src="../../src/Group.js"></script>
<script> <script>
var count = 0; var count = 0;
var doc; var doc;
@ -25,13 +27,13 @@
function draw() { function draw() {
count++; count++;
doc.children = []; doc.activeLayer.children = [];
var point = new Point(1024, 768).divide(2); var point = new Point(1024, 768).divide(2);
var vector = new Point(100, 0); var vector = new Point(100, 0);
for(var i = 0; i < 180; i++) { 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 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))));
path.strokeColor = i % 4 ? 'black' : 'red'; path.strokeColor = i % 4 ? 'black' : 'red';
doc.children.push(path); doc.activeLayer.appendTop(path);
} }
doc.redraw(); doc.redraw();
} }

4
examples/Scripts/rectangle.html
View file

@ -14,6 +14,8 @@
<script type="text/javascript" src="../../src/PathItem.js"></script> <script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Path.js"></script> <script type="text/javascript" src="../../src/Path.js"></script>
<script type="text/javascript" src="../../src/Doc.js"></script> <script type="text/javascript" src="../../src/Doc.js"></script>
<script type="text/javascript" src="../../src/Layer.js"></script>
<script type="text/javascript" src="../../src/Group.js"></script>
<script> <script>
var count = 0; var count = 0;
var doc; var doc;
@ -23,7 +25,7 @@
var path = new Path.Rectangle([50, 50], [100, 100]); var path = new Path.Rectangle([50, 50], [100, 100]);
path.strokeColor = 'black'; path.strokeColor = 'black';
console.log(path); console.log(path);
doc.children.push(path); doc.activeLayer.appendTop(path);
doc.redraw(); doc.redraw();
} }
</script> </script>

6
examples/Scripts/roundRectangle.html
View file

@ -14,6 +14,8 @@
<script type="text/javascript" src="../../src/PathItem.js"></script> <script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Path.js"></script> <script type="text/javascript" src="../../src/Path.js"></script>
<script type="text/javascript" src="../../src/Doc.js"></script> <script type="text/javascript" src="../../src/Doc.js"></script>
<script type="text/javascript" src="../../src/Layer.js"></script>
<script type="text/javascript" src="../../src/Group.js"></script>
<script> <script>
var count = 0; var count = 0;
var doc; var doc;
@ -24,12 +26,12 @@
} }
function draw() { function draw() {
count++; count++;
doc.children = []; doc.activeLayer.children = [];
var rect = new Rectangle([150, 150], [300, 300]); var rect = new Rectangle([150, 150], [300, 300]);
var size = Math.abs(Math.sin(count / 40)) * 150 + 10; var size = Math.abs(Math.sin(count / 40)) * 150 + 10;
var path = new Path.RoundRectangle(rect, size); var path = new Path.RoundRectangle(rect, size);
path.fillColor = 'black'; path.fillColor = 'black';
doc.children.push(path); doc.activeLayer.appendTop(path);
doc.redraw(); doc.redraw();
} }
</script> </script>

6
examples/Scripts/star.html
View file

@ -14,6 +14,8 @@
<script type="text/javascript" src="../../src/PathItem.js"></script> <script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Path.js"></script> <script type="text/javascript" src="../../src/Path.js"></script>
<script type="text/javascript" src="../../src/Doc.js"></script> <script type="text/javascript" src="../../src/Doc.js"></script>
<script type="text/javascript" src="../../src/Layer.js"></script>
<script type="text/javascript" src="../../src/Group.js"></script>
<script> <script>
window.onload = function() { window.onload = function() {
var canvas = document.getElementById('canvas'); var canvas = document.getElementById('canvas');
@ -33,9 +35,9 @@
path.add(newPoint); path.add(newPoint);
} }
path.smooth(); path.smooth();
doc.children.push(path); doc.activeLayer.appendTop(path);
} }
doc.children.reverse(); doc.activeLayer.children.reverse();
doc.redraw(); doc.redraw();
} }
</script> </script>

4
examples/Scripts/strokeJoin.html
View file

@ -14,6 +14,8 @@
<script type="text/javascript" src="../../src/PathItem.js"></script> <script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Path.js"></script> <script type="text/javascript" src="../../src/Path.js"></script>
<script type="text/javascript" src="../../src/Doc.js"></script> <script type="text/javascript" src="../../src/Doc.js"></script>
<script type="text/javascript" src="../../src/Layer.js"></script>
<script type="text/javascript" src="../../src/Group.js"></script>
<script> <script>
var count = 0; var count = 0;
var doc; var doc;
@ -24,7 +26,7 @@
path.strokeColor = 'black'; path.strokeColor = 'black';
path.strokeWidth = 30; path.strokeWidth = 30;
path.strokeJoin = 'bevel'; path.strokeJoin = 'bevel';
doc.children.push(path); doc.activeLayer.appendTop(path);
doc.redraw(); doc.redraw();
} }
</script> </script>

6
examples/Scripts/temp.html
View file

@ -14,6 +14,8 @@
<script type="text/javascript" src="../../src/PathItem.js"></script> <script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Path.js"></script> <script type="text/javascript" src="../../src/Path.js"></script>
<script type="text/javascript" src="../../src/Doc.js"></script> <script type="text/javascript" src="../../src/Doc.js"></script>
<script type="text/javascript" src="../../src/Layer.js"></script>
<script type="text/javascript" src="../../src/Group.js"></script>
<script> <script>
var count = 0; var count = 0;
var doc; var doc;
@ -27,11 +29,11 @@
// var path = new Path.RoundRectangle(rect, 200); // var path = new Path.RoundRectangle(rect, 200);
// path.strokeColor = 'black'; // path.strokeColor = 'black';
// console.log(path); // console.log(path);
// doc.children.push(path); // doc.activeLayer.appendTop(path);
// //
// // var path = new Path.Rectangle(rect); // // var path = new Path.Rectangle(rect);
// // path.strokeColor = 'black'; // // path.strokeColor = 'black';
// // doc.children.push(path); // // doc.activeLayer.appendTop(path);
// doc.redraw(); // doc.redraw();
} }
</script> </script>

6
examples/Tools/Circles.html
View file

@ -14,6 +14,8 @@
<script type="text/javascript" src="../../src/PathItem.js"></script> <script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Path.js"></script> <script type="text/javascript" src="../../src/Path.js"></script>
<script type="text/javascript" src="../../src/Doc.js"></script> <script type="text/javascript" src="../../src/Doc.js"></script>
<script type="text/javascript" src="../../src/Layer.js"></script>
<script type="text/javascript" src="../../src/Group.js"></script>
<script type="text/javascript" src="../../src/ToolEvent.js"></script> <script type="text/javascript" src="../../src/ToolEvent.js"></script>
<script type="text/javascript" src="../../src/ToolHandler.js"></script> <script type="text/javascript" src="../../src/ToolHandler.js"></script>
<script type="text/javascript" src="../../src/Tool.js"></script> <script type="text/javascript" src="../../src/Tool.js"></script>
@ -25,12 +27,12 @@
var tool = new Tool({ var tool = new Tool({
onMouseDrag: function(event) { onMouseDrag: function(event) {
if(event.count != 1) if(event.count != 1)
doc.children.pop(); doc.activeLayer.children.pop();
var distance = event.downPoint.subtract(event.point).length; var distance = event.downPoint.subtract(event.point).length;
var path = new Path.Circle(event.downPoint, distance); var path = new Path.Circle(event.downPoint, distance);
path.strokeColor = 'black'; path.strokeColor = 'black';
path.fillColor = 'white'; path.fillColor = 'white';
doc.children.push(path); doc.activeLayer.appendTop(path);
} }
}); });
tool.document = doc; tool.document = doc;

4
examples/Tools/Clouds.html
View file

@ -14,6 +14,8 @@
<script type="text/javascript" src="../../src/PathItem.js"></script> <script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Path.js"></script> <script type="text/javascript" src="../../src/Path.js"></script>
<script type="text/javascript" src="../../src/Doc.js"></script> <script type="text/javascript" src="../../src/Doc.js"></script>
<script type="text/javascript" src="../../src/Layer.js"></script>
<script type="text/javascript" src="../../src/Group.js"></script>
<script type="text/javascript" src="../../src/ToolEvent.js"></script> <script type="text/javascript" src="../../src/ToolEvent.js"></script>
<script type="text/javascript" src="../../src/ToolHandler.js"></script> <script type="text/javascript" src="../../src/ToolHandler.js"></script>
<script type="text/javascript" src="../../src/Tool.js"></script> <script type="text/javascript" src="../../src/Tool.js"></script>
@ -30,7 +32,7 @@
path.strokeJoin = 'round'; path.strokeJoin = 'round';
path.strokeCap = 'round'; path.strokeCap = 'round';
path.add(event.point); path.add(event.point);
doc.children.push(path); doc.activeLayer.appendTop(path);
}, },
onMouseDrag: function(event) { onMouseDrag: function(event) {
path.arcTo(event.point, true); path.arcTo(event.point, true);

4
examples/Tools/Dripping Brush.html
View file

@ -14,6 +14,8 @@
<script type="text/javascript" src="../../src/PathItem.js"></script> <script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Path.js"></script> <script type="text/javascript" src="../../src/Path.js"></script>
<script type="text/javascript" src="../../src/Doc.js"></script> <script type="text/javascript" src="../../src/Doc.js"></script>
<script type="text/javascript" src="../../src/Layer.js"></script>
<script type="text/javascript" src="../../src/Group.js"></script>
<script type="text/javascript" src="../../src/ToolEvent.js"></script> <script type="text/javascript" src="../../src/ToolEvent.js"></script>
<script type="text/javascript" src="../../src/ToolHandler.js"></script> <script type="text/javascript" src="../../src/ToolHandler.js"></script>
<script type="text/javascript" src="../../src/Tool.js"></script> <script type="text/javascript" src="../../src/Tool.js"></script>
@ -38,7 +40,7 @@
path = new Path(); path = new Path();
path.fillColor = 'black'; path.fillColor = 'black';
path.add(event.lastPoint); path.add(event.lastPoint);
doc.children.push(path); doc.activeLayer.appendTop(path);
} }
var step = event.delta.divide(2); var step = event.delta.divide(2);

4
examples/Tools/Fancy Brush.html
View file

@ -14,6 +14,8 @@
<script type="text/javascript" src="../../src/PathItem.js"></script> <script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Path.js"></script> <script type="text/javascript" src="../../src/Path.js"></script>
<script type="text/javascript" src="../../src/Doc.js"></script> <script type="text/javascript" src="../../src/Doc.js"></script>
<script type="text/javascript" src="../../src/Layer.js"></script>
<script type="text/javascript" src="../../src/Group.js"></script>
<script type="text/javascript" src="../../src/ToolEvent.js"></script> <script type="text/javascript" src="../../src/ToolEvent.js"></script>
<script type="text/javascript" src="../../src/ToolHandler.js"></script> <script type="text/javascript" src="../../src/ToolHandler.js"></script>
<script type="text/javascript" src="../../src/Tool.js"></script> <script type="text/javascript" src="../../src/Tool.js"></script>
@ -34,7 +36,7 @@
onMouseDown: function(event) { onMouseDown: function(event) {
path = new Path(); path = new Path();
path.fillColor = event.count % 2 ? 'red' : 'black'; path.fillColor = event.count % 2 ? 'red' : 'black';
doc.children.push(path); doc.activeLayer.appendTop(path);
}, },
onMouseDrag: function(event) { onMouseDrag: function(event) {

4
examples/Tools/Grid.html
View file

@ -14,6 +14,8 @@
<script type="text/javascript" src="../../src/PathItem.js"></script> <script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Path.js"></script> <script type="text/javascript" src="../../src/Path.js"></script>
<script type="text/javascript" src="../../src/Doc.js"></script> <script type="text/javascript" src="../../src/Doc.js"></script>
<script type="text/javascript" src="../../src/Layer.js"></script>
<script type="text/javascript" src="../../src/Group.js"></script>
<script type="text/javascript" src="../../src/ToolEvent.js"></script> <script type="text/javascript" src="../../src/ToolEvent.js"></script>
<script type="text/javascript" src="../../src/ToolHandler.js"></script> <script type="text/javascript" src="../../src/ToolHandler.js"></script>
<script type="text/javascript" src="../../src/Tool.js"></script> <script type="text/javascript" src="../../src/Tool.js"></script>
@ -37,7 +39,7 @@
path = new Path(); path = new Path();
path.strokeColor = 'black'; path.strokeColor = 'black';
path.add(point); path.add(point);
doc.children.push(path); doc.activeLayer.appendTop(path);
}, },
onMouseDrag: function(event) { onMouseDrag: function(event) {
var p = getPos(event.point); var p = getPos(event.point);

4
examples/Tools/MultiLines.html
View file

@ -14,6 +14,8 @@
<script type="text/javascript" src="../../src/PathItem.js"></script> <script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Path.js"></script> <script type="text/javascript" src="../../src/Path.js"></script>
<script type="text/javascript" src="../../src/Doc.js"></script> <script type="text/javascript" src="../../src/Doc.js"></script>
<script type="text/javascript" src="../../src/Layer.js"></script>
<script type="text/javascript" src="../../src/Group.js"></script>
<script type="text/javascript" src="../../src/ToolEvent.js"></script> <script type="text/javascript" src="../../src/ToolEvent.js"></script>
<script type="text/javascript" src="../../src/ToolHandler.js"></script> <script type="text/javascript" src="../../src/ToolHandler.js"></script>
<script type="text/javascript" src="../../src/Tool.js"></script> <script type="text/javascript" src="../../src/Tool.js"></script>
@ -35,7 +37,7 @@
for (var i = 0; i < values.lines; i++) { for (var i = 0; i < values.lines; i++) {
var path = new Path(); var path = new Path();
path.strokeColor = '#000000'; path.strokeColor = '#000000';
doc.children.push(path); doc.activeLayer.appendTop(path);
paths.push(path); paths.push(path);
} }
}, },

4
examples/Tools/Wave.html
View file

@ -14,6 +14,8 @@
<script type="text/javascript" src="../../src/PathItem.js"></script> <script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Path.js"></script> <script type="text/javascript" src="../../src/Path.js"></script>
<script type="text/javascript" src="../../src/Doc.js"></script> <script type="text/javascript" src="../../src/Doc.js"></script>
<script type="text/javascript" src="../../src/Layer.js"></script>
<script type="text/javascript" src="../../src/Group.js"></script>
<script type="text/javascript" src="../../src/ToolEvent.js"></script> <script type="text/javascript" src="../../src/ToolEvent.js"></script>
<script type="text/javascript" src="../../src/ToolHandler.js"></script> <script type="text/javascript" src="../../src/ToolHandler.js"></script>
<script type="text/javascript" src="../../src/Tool.js"></script> <script type="text/javascript" src="../../src/Tool.js"></script>
@ -35,7 +37,7 @@
onMouseDown: function(event) { onMouseDown: function(event) {
path = new Path(); path = new Path();
path.strokeColor = 'black'; path.strokeColor = 'black';
doc.children.push(path); doc.activeLayer.appendTop(path);
}, },
onMouseDrag: function(event) { onMouseDrag: function(event) {

6
examples/Tools/Worm Farm.html
View file

@ -14,6 +14,8 @@
<script type="text/javascript" src="../../src/PathItem.js"></script> <script type="text/javascript" src="../../src/PathItem.js"></script>
<script type="text/javascript" src="../../src/Path.js"></script> <script type="text/javascript" src="../../src/Path.js"></script>
<script type="text/javascript" src="../../src/Doc.js"></script> <script type="text/javascript" src="../../src/Doc.js"></script>
<script type="text/javascript" src="../../src/Layer.js"></script>
<script type="text/javascript" src="../../src/Group.js"></script>
<script type="text/javascript" src="../../src/ToolEvent.js"></script> <script type="text/javascript" src="../../src/ToolEvent.js"></script>
<script type="text/javascript" src="../../src/ToolHandler.js"></script> <script type="text/javascript" src="../../src/ToolHandler.js"></script>
<script type="text/javascript" src="../../src/Tool.js"></script> <script type="text/javascript" src="../../src/Tool.js"></script>
@ -38,7 +40,7 @@
worm.fillColor = '#ffffff'; worm.fillColor = '#ffffff';
worm.strokeColor = '#000000'; worm.strokeColor = '#000000';
worm.add(event.point); worm.add(event.point);
doc.children.push(worm); doc.activeLayer.appendTop(worm);
}, },
onMouseDrag: function(event) { onMouseDrag: function(event) {
@ -75,7 +77,7 @@
// make a new line path from top to bottom // make a new line path from top to bottom
var line = new Path.Line(top, bottom); var line = new Path.Line(top, bottom);
line.strokeColor = '#000000'; line.strokeColor = '#000000';
doc.children.push(line); doc.activeLayer.appendTop(line);
// smooth the segments of the path // smooth the segments of the path
worm.smooth(); worm.smooth();