Paper.jsa nice vector graphics library    江嘉诚
PaperScript•   <head>•   <script type="text/javascript" src="js/paper.js">•   </script>•   <script type="text/paperscript"...
基本概念• Point• Size• Rectangle•   多种构造函数•   大量的语法糖•   便捷的数学运算•   运算符重载
基本概念• var point = new Point(20, 40);• console.log(point); // { x: 20, y: 40 }• var size = new Size();• console.log(size); ...
基本概念•   var point1 = new Point(10, 20);•   var point2 = point1 * 4;•   var point3 = point2 - point1;•   var point4 = point...
Vector
Vector
Path
Path•   var path = new Path();•   path.strokeColor = black;•   path.add(new Point(30, 75));•   path.add(new Point(30, 25))...
Path• path.fullySelected = true;• var copy = path.clone();• copy.fullySelected = true;• copy.position.x += 100;• copy.smoo...
Path• var myCircle =    new Path.Circle(new Point(100, 70), 50);• myCircle.strokeColor = black;• myCircle.selected = true;
Path
Path• var myCircle =    new Path.Circle(new Point(100, 70), 50);• myCircle.strokeColor = black;• myCircle.selected = true;...
Path
Path
Event• function onMouseDown(event) {•   // event.point• }• function onMouseDrag(event) { }• function onMouseUp(event) { }•...
Event• tool.minDistance = 10;• tool.maxDistance = 10;• tool.fixedDistance = 10;
Event• event.point• event.middlePoint• event.delta
ItemTransform Layer
ProjectLayerGroup
Bound
Symbol
Raster• var circle =      new Path.Circle(new Point(80, 50), 5);• circle.fillColor = red;• var raster = circle.rasterize();
HitTest            CompoundPathPointText               Style
Paper.js的优点•   简单而清晰的概念•   大量的语法糖•   倡导基于矢量绘图•   统一使用Path•   引人入胜的例子•   Processing的有力竞争者
Upcoming SlideShare
Loading in …5
×

Paperjs presentation

376 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
376
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Paperjs presentation

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

×