paper.js 官方教程学习，顺手翻译（意译）二

Geometry

Point, Size and Rectangle

这里 强调

basic types such as Point, Size and Rectangle are objects that describe geometric attributes of graphical items.

Point，Size，Rectangle 是 用来描述属性的 对象。

还不是Graphical Items

var myPoint = new Point(10, 20);
console.log(myPoint); // { x: 10, y: 20 }

var myPath = new Path();
myPath.add(myPoint);

myPoint is simply describing the coordinates that were used to produce the first segment of myPath. Modifying myPoint would not change that segment after it was created.

并且，在上述代码执行以后，myPath的属性和myPoint已经没有关系。

修改myPoint，不会影响myPath

上面这段话，没有经过实例测试，不过想来，应该就是这样。

Point

var myPoint = new Point();
console.log(myPoint); // { x: 0, y: 0 }

// Now let's change the x coordinate to 10...
myPoint.x = 10;

// ...and the y coordinate to x + 10
myPoint.y = myPoint.x + 10;
console.log(myPoint); // { x: 10, y: 20 }

点对象，即(x,y)。可以不给值进行初始化，默认为(0,0)

Did you know?

The console.log() function sends text to the console of the browser and is very useful to debug scripts.

我是挺喜欢console.log()做调试的，但是electron里面渲染线程似乎没有办法将信息输出到控制台。所以初学者来说，找一个合适的调试器真的很重要。

var secondPoint = new Point(firstPoint);
var secondPoint = firstPoint.clone();

上面代码片段，说明了如何复制一个点对象。

其中 secondPoint 和 firstPoint，除了数值一样，没有其他关系。

在paper.js 对于点的描述，还提供了一种 极坐标 的形式 （角度，长度）,但是并没有在官网看到相应的示例。

Size

(宽度，高度)

var mySize = new Size();
console.log(mySize); // { width: 0, height: 0 }

mySize.width = 10;
mySize.height = mySize.width + 10;
console.log(mySize); // { width: 10, height: 20 }

var mySize = new Size(20, 40);
console.log(mySize); // { width: 20, height: 40 }
mySize.width = mySize.width * 2;
console.log(mySize); // { width: 40, height: 40 }

Rectangle

可以由 Point 和 Size一起描述

第一种创建方式

var topLeft = new Point(10, 20);
var rectSize = new Size(200, 100);
var rect = new Rectangle(topLeft, rectSize);
console.log(rect); // { x: 10, y: 20, width: 200, height: 100 }
console.log(rect.point); // { x: 10, y: 20 }
console.log(rect.size); // { width: 200, height: 100 }

第二种创建方式

var rect = new Rectangle(10, 20, 200, 100);
console.log(rect); // { x: 10, y: 20, width: 200, height: 100 }

第三种创建方式

var bottomLeft = new Point(10, 120);
var topRight = new Point(210, 20);
var rect = new Rectangle(bottomLeft, topRight);
console.log(rect); // { x: 10, y: 20, width: 200, height: 100 }

var rect = new Rectangle(new Point(10, 120),

new Point(210, 20));

这样也可以

We could also nest constructor calls and pass them directly to the rectangle constructor.

Rectangle Properties

Rectangle的属性：http://paperjs.org/reference/rectangle

// We start by creating a rectangle of dimension and
// location set to 0
var rect = new Rectangle();
console.log(rect); // { x: 0, y: 0, width: 0, height: 0 }

// Now we can for example define its size...
rect.size = new Size(100, 200);

// and its center
rect.center = new Point(100, 100);
console.log(rect); // { x: 50, y: 0, width: 100, height: 200 }

var rect = new Rectangle();
rect.left = 100;
rect.right = 200;
rect.bottom = 400;
rect.top = 200;
console.log(rect); // { x: 100, y: 200, width: 100, height: 200 }

Rectangle的所有属性，都可以在创建之后再制定。