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可以做出不同的反应。
代码部分较长。具体代码请看 官网。
- Paper.js 官方教程学习,顺手翻译(意译)
- paper.js 官方教程学习,顺手翻译(意译)二
- 【opencv 官方教程】翻译7 机器学习
- 翻译的艺术 —— 句子的翻译(意译)
- Redis 集群教程(官方翻译)
- 全局意译 之 翻译方法
- 学习ApacheHttpComponents,HttpCore第一部分,基本翻译官方教程
- libcurl简单教程(翻译自官方教程)
- Openbravo官方教程: 翻译Openbravo
- solr官方指南翻译 教程
- caffe2官方教程翻译整理
- matplotlib.pyplot官方翻译教程
- matterport Mask_RCNN官方教程翻译
- Cocos2d-js官方完整项目教程翻译:一、构建Cocos2d-js开发环境
- Cocos2d-js官方完整项目教程翻译:二、Cocos2d-js的“Hello World”
- 【转】【翻译】Orx官方教程:0.基础(Basic)
- Android官方教程翻译(5)——设置ActionBar
- Android官方教程翻译(6)——添加ActionBar
- 《Unity Shader入门精要》 第三章学习笔记
- ubuntu17.04安装wps
- 抢啥iPhoneX!ofo小黄车的移动物联网黑科技同样魅力指数爆表
- Android属性之excludeFromRecents
- dubbo改造旧工程(ssm/ssh)
- Paper.js 官方教程学习,顺手翻译(意译)
- 设计模式之过滤器模式
- 线程本地变量ThreadLocal
- 机器学习之工程师入门路线
- EL表达式入门
- bzoj小记
- 每天一个linux命令(5):rm 命令
- AGC012
- Html+css编写规范