Upcoming SlideShare
×

# Paperjs presentation

334 views
302 views

Published on

Published in: Spiritual, Technology
0 Likes
Statistics
Notes
• Full Name
Comment goes here.

Are you sure you want to Yes No
Your message goes here
• Be the first to comment

• Be the first to like this

Views
Total views
334
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
3
0
Likes
0
Embeds 0
No embeds

No notes for slide

### Paperjs presentation

1. 1. Paper.jsa nice vector graphics library 江嘉诚
2. 2. 基本概念• Point• Size• Rectangle• 多种构造函数• 大量的语法糖• 便捷的数学运算• 运算符重载
3. 3. 基本概念• var point = new Point(20, 40);• console.log(point); // { x: 20, y: 40 }• var size = new Size();• console.log(size); // { width: 0, height: 0 }• var rect = new Rectangle(point, size);• console.log(rect);• // { x: 10, y: 20, width: 200, height: 100 }
4. 4. 基本概念• var point1 = new Point(10, 20);• var point2 = point1 * 4;• var point3 = point2 - point1;• var point4 = point3 + 30;• var point6 = point5 * new Point(3, 2);• vector.angle += 90;• Point.random();
5. 5. Vector
6. 6. Vector
7. 7. Path
8. 8. Path• var path = new Path();• path.strokeColor = black;• path.add(new Point(30, 75));• path.add(new Point(30, 25));• path.add(new Point(80, 25));• path.add(new Point(80, 75));• path.closed = true;
9. 9. Path• path.fullySelected = true;• var copy = path.clone();• copy.fullySelected = true;• copy.position.x += 100;• copy.smooth();
10. 10. Path• var myCircle = new Path.Circle(new Point(100, 70), 50);• myCircle.strokeColor = black;• myCircle.selected = true;
11. 11. Path
12. 12. Path• var myCircle = new Path.Circle(new Point(100, 70), 50);• myCircle.strokeColor = black;• myCircle.selected = true;• myCircle.removeSegment(0);
13. 13. Path
14. 14. Path
15. 15. Event• function onMouseDown(event) {• // event.point• }• function onMouseDrag(event) { }• function onMouseUp(event) { }• function onMouseMove(event) { }• function onFrame(event) {
16. 16. Event• tool.minDistance = 10;• tool.maxDistance = 10;• tool.fixedDistance = 10;
17. 17. Event• event.point• event.middlePoint• event.delta
18. 18. ItemTransform Layer
19. 19. ProjectLayerGroup
20. 20. Bound
21. 21. Symbol
22. 22. Raster• var circle = new Path.Circle(new Point(80, 50), 5);• circle.fillColor = red;• var raster = circle.rasterize();
23. 23. HitTest CompoundPathPointText Style
24. 24. PaperScript• <head>• <script type="text/javascript" src="js/paper.js">• </script>• <script type="text/paperscript" canvas=“canvas">• </script>• </head>• <body>• <canvas id=“canvas" resize></canvas>• </body>