View
188
Download
0
Category
Tags:
Preview:
Citation preview
Paper.js
江嘉诚
a nice vector graphics library
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>
基本概念
• Point• Size • Rectangle
• 多种构造函数• 大量的语法糖• 便捷的数学运算• 运算符重载
基本概念
• 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 }
基本概念
• 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();
Vector
Vector
Path
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;
Path
• path.fullySelected = true;
• var copy = path.clone();• copy.fullySelected = true;• copy.position.x += 100;
• copy.smooth();
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;
• myCircle.removeSegment(0);
Path
Path
Event
• function onMouseDown(event) {• // event.point• }
• function onMouseDrag(event) { }
• function onMouseUp(event) { }
• function onMouseMove(event) { }
• function onFrame(event) {
Event
• tool.minDistance = 10;• tool.maxDistance = 10;• tool.fixedDistance = 10;
Event
• event.point• event.middlePoint• event.delta
Item
Transform
Layer
Layer
Group
Project
Bound
Symbol
Raster
• var circle = new Path.Circle(new Point(80, 50), 5);• circle.fillColor = 'red';
• var raster = circle.rasterize();
CompoundPath
PointText
HitTest
Style
Paper.js的优点
• 简单而清晰的概念• 大量的语法糖• 倡导基于矢量绘图• 统一使用 Path• 引人入胜的例子• Processing的有力竞争者
Recommended