Paperjs presentation

334 views
302 views

Published on

Published in: Spiritual, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
334
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
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>

×