Paperjs presentation

•Descargar como PPTX, PDF•

1 recomendación•463 vistas

sharp-blade

Tecnología Meditación

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();

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

• var myCircle =
new Path.Circle(new Point(100, 70), 50);
• myCircle.strokeColor = 'black';
• myCircle.selected = true;

• myCircle.removeSegment(0);

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

Raster

• var circle =
new Path.Circle(new Point(80, 50), 5);
• circle.fillColor = 'red';

• var raster = circle.rasterize();

Paper.js的优点

• 简单而清晰的概念
• 大量的语法糖
• 倡导基于矢量绘图
• 统一使用Path
• 引人入胜的例子
• Processing的有力竞争者

Más contenido relacionado

La actualidad más candente

jQuery Foot-Gun Featuresdmethvin

Empowering End-users to Find Point-of-interests with a Public DisplayTetsuo Yamabe

WebXR if X = how?Luis Diego González-Zúñiga, PhD

ECMAScript 5: Новое в JavaScriptДепартамент Стратегических Технологий

Cpp Ankit Dubey

Testing Black BoxMingHo Chang

D3.js - A picture is worth a thousand wordsApptension

C questionsmohamed sikander

Webgl para JavaScriptersgerbille

You will learn RxJS in 2017名辰洪

Angular.js + Rails at WeWork or: The Accidental FeatureJonathan Magen

Web Components With RailsBoris Nadion

Arraysmohamed sikander

Dion Almaer & Ben Galbraith - Build Once, Deploy EverywhereCarsonified Team

Exploring CanvasKevin Hoyt

Implementation of c string functionsmohamed sikander

In a galaxy far, far away - A procedural generation taleShay Davidson

CouchdbСаги Усаги

Pointer level 2mohamed sikander

F(2)lukman abbas

La actualidad más candente (20)

jQuery Foot-Gun Features

Empowering End-users to Find Point-of-interests with a Public Display

WebXR if X = how?

ECMAScript 5: Новое в JavaScript

Cpp

Testing Black Box

D3.js - A picture is worth a thousand words

C questions

Webgl para JavaScripters

You will learn RxJS in 2017

Angular.js + Rails at WeWork or: The Accidental Feature

Web Components With Rails

Arrays

Dion Almaer & Ben Galbraith - Build Once, Deploy Everywhere

Exploring Canvas

Implementation of c string functions

In a galaxy far, far away - A procedural generation tale

Couchdb

Pointer level 2

F(2)

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

19. Item Transform Layer

20. Project Layer Group

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的有力竞争者