paper.js 官方教程学习,顺手翻译(意译)二
来源:互联网 发布:财务报表数据下载 编辑:程序博客网 时间:2024/05/18 20:10
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 + 10myPoint.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 0var 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 centerrect.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的所有属性,都可以在创建之后再制定。
- paper.js 官方教程学习,顺手翻译(意译)二
- Paper.js 官方教程学习,顺手翻译(意译)
- Android测试官方教程翻译(二)--构建本地单元测试
- Cocos2d-js官方完整项目教程翻译:二、Cocos2d-js的“Hello World”
- Unity3D Shader官方教程翻译(二)
- Unity3D Shader官方教程翻译(二)
- Unity3D Shader官方教程翻译(二)
- Unity3D Shader官方教程翻译(二)
- Unity3D Shader官方教程翻译(二)
- Unity3D Shader官方教程翻译(二)
- Unity3D Shader官方教程翻译(二)(ShaderLab)
- Android Geofence的学习(二)继续翻译官方文档
- 【opencv 官方教程】翻译7 机器学习
- 翻译的艺术 —— 句子的翻译(意译)
- Redis 集群教程(官方翻译)
- Gensim官方教程翻译(二)——主题与转换(Topics and Transformations)
- XCode4.3创建第一个ios入门项目,翻译至官方教程(二)
- Java 3D API官方教程[翻译二]
- 详解DNS的常用记录(下):DNS系列之三
- uva11090 给你一个有向图,求出平均权值最小的环
- ScrollView中EditText导致自动滚动问题
- 一、FFMPEG源码编译
- (转)“AI售前”,一根被忽略的敏感神经
- paper.js 官方教程学习,顺手翻译(意译)二
- 日志
- 第八周项目1——建立顺序串的算法库
- 【实战】7-1 商品管理模块接口定义
- BAT常用命令
- linux挂载windows nfs文件夹
- 关于c++的初接触
- hdu 1573 中国剩余定理
- getContextpath、getServletPath、getRealpath的不同