关于
Paper.js — 矢量图形脚本的瑞士军刀。
Paper.js 是一个开源的基于 HTML5 Canvas 运行的矢量图形脚本框架。 它提供了清晰的场景图/DOM,同时拥有许多强大的功能来创建和使用矢量图形和贝塞尔曲线,所有这些都被巧妙地包含在一个设计良好,干净一致的编程接口中。
Paper.js 基于 Scriptographer,并且很大程度上兼容 Scriptographer,Scriptographer 是 Adobe Illustrator 的脚本环境,它拥有一个活跃的开发者社区,并且有十几年的发展。
Paper.js 简单易学,适合初学者,对许多中高级开发者的学习也有很多帮助。
Paper.js 由 Jürg Lehni 和 Jonathan Puckey 开发完成,发布遵从MIT协议。
入门
- 首先,我们可以看看一些示例。
- 下载 Paper.js,或者从Github 仓库查看最新版本。
- 想学习 Paper.js? 从我们的教程开始。
- 如果你有任何的问题或意见,可以加入我们的邮件列表。
- 想及时了解最新信息,可以关注我们的 Twitter。
总览
Paper.js不仅仅是Canvas的包装器,它提供了更多功能:
- 矢量图形的场景图/DOM:使用嵌套图层(nested layers)、组(groups)、路径(paths)、复合路径(compound paths)、 栅格(rasters)、 标记(symbols)等等。
- 图形项目的处理和绘制是自动的并且经过优化,你可以构建或修改你的物体和样式,并将绘图命令交给Paper.js处理。
- 精心设计并经过千锤百炼的API。
- PaperScript,是 JavaScript 的扩展,允许脚本的局部作用域执行而不会污染全局作用域,共享同一个库的代码时,每个页面的多个脚本可以在它单独的作用域内执行,并添加了对任意对象的运算符重载支持。
- 很好地解释了矢量图形中的矢量。Paper.js 将矢量数学视为一等公民,它通过其核心类型(如Point、Size和Rectangle)尽可能简单地处理矢量和几何图形。PaperScript 进一步简化了对 Point 和 Size 对象的操作,可以使用常规的运算符语法在这些对象上进行直接的数学运算,就像它们是纯数字一样。
- 可以构建路径并以非常方便和精细的方式控制它们的曲线(curves)和段(segments)。
- 可以查看并控制任何物体的精确边界框,支持的不同笔划端和斜接限制的复杂笔划样式。
- 平滑曲线,并通过点拟合曲线来简化路径段。
- 模拟当前Canvas对象缺少的虚线笔划,接近原生绘图速度。
- 通过 JavaScript 的模拟支持 Illustrator 和 Photoshop 中的大多数混合模式:正片叠底,滤色,叠加,柔光,强光,颜色减淡,颜色加深,变暗,变亮,差值,排除,色相,饱和度,亮度, 颜色,增加,减去,平均和反相。
阅读我们的教程以了解更多有关 Paper.js 的信息。
浏览器支持
Paper.js 主要面向支持 Canvas对象 和 EcmaScript 5 的现代浏览器。尽管理论上可以编写代码来支持旧版浏览器(IE8及以下版本,我们期待你的加入!),但我们目前还不支持那些旧版浏览器,让我们继续前进吧!