Paperjs presentation
- 1. Paper.js a nice vector graphics library 江嘉诚
- 2. 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>
- 3. 基本概念 • Point • Size • Rectangle • 多种构造函数 • 大量的语法糖 • 便捷的数学运算 • 运算符重载
- 4. 基本概念 • 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 }
- 5. 基本概念 • 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();
- 6. Vector
- 7. Vector
- 8. Path
- 9. 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;
- 10. Path • path.fullySelected = true; • var copy = path.clone(); • copy.fullySelected = true; • copy.position.x += 100; • copy.smooth();
- 11. Path • var myCircle = new Path.Circle(new Point(100, 70), 50); • myCircle.strokeColor = 'black'; • myCircle.selected = true;
- 12. Path
- 13. Path • var myCircle = new Path.Circle(new Point(100, 70), 50); • myCircle.strokeColor = 'black'; • myCircle.selected = true; • myCircle.removeSegment(0);
- 14. Path
- 15. Path
- 16. Event • function onMouseDown(event) { • // event.point • } • function onMouseDrag(event) { } • function onMouseUp(event) { } • function onMouseMove(event) { } • function onFrame(event) {
- 17. Event • tool.minDistance = 10; • tool.maxDistance = 10; • tool.fixedDistance = 10;
- 18. Event • event.point • event.middlePoint • event.delta
- 21. Bound
- 22. Symbol
- 23. Raster • var circle = new Path.Circle(new Point(80, 50), 5); • circle.fillColor = 'red'; • var raster = circle.rasterize();
- 24. HitTest CompoundPath PointText Style
- 25. Paper.js的优点 • 简单而清晰的概念 • 大量的语法糖 • 倡导基于矢量绘图 • 统一使用Path • 引人入胜的例子 • Processing的有力竞争者