Paper.js 官方教程学习,顺手翻译(意译)

来源:互联网 发布:7.0魔兽世界mac客户端 编辑:程序博客网 时间:2024/06/06 14:18

官方教程地址链接
http://paperjs.org/tutorials/getting-started/using-javascript-directly/

Scope

每个Scope都有自己的view和project

The global paper object through which the library is exposed is also
such a PaperScope object.

通过库暴露出来的全局paper object也是一个PaperScope object
所以在使用方面

PaperScope object 等价 paper object

Setting Up a Scope

直接使用JavaScript时,在大多数情况下,要保证有一个Scope(范围)。
在这个范围内,仍然可以通过使用 new Project()和new View(canvas)构造函数创建它们来处理多个项目或视图。

// Get a reference to the canvas objectvar canvas = document.getElementById('myCanvas');// Create an empty project and a view for the canvas:paper.setup(canvas);

简单来说,在使用paper.js以前,你需要用到上面两条语句。

Making the Scope Global

It might not seem so practical to access all classes and objects
through the paper object, so here are two strategies for circumventing
that.

程序员总是很懒,多打一个paper都不愿意,所以这里,有两个简单方法。

paper.install(window);

个人倾向于下面这种。如果有需要查看具体的例子,可以通过最上方的链接传送。

with (paper) {}

Installing Event Handlers

view.onFrame = function(event) {            // On each frame, rotate the path by 3 degrees:            path.rotate(3);        }

we have to do is install these handlers on the existing view object:
view is automatically created for us if we use the
paperScope.setup(canvas) function

在view 上设置Event Handlers
并且,view 已经通过 paper.setup()函数创建过。

Working with Tools

Tool对象是指用户可以通过鼠标和键盘进行交互的脚本。
onMouseDown, onMouseUp, onMouseDrag, onMouseMove, 之类的都通过这个对象控制。

var tool = new Tool();tool.onMouseDown = function(event) {}tool.onMouseDrag = function(event) {}

Multiple Tools

使用 多个Tool可以在不同的情况下,Tool可以做出不同的反应。
代码部分较长。具体代码请看 官网。

原创粉丝点击