paperJS 关于
# 关于
Paper.js — 矢量图形脚本的瑞士军刀。
Paper.js 是一个开源的基于 HTML5 Canvas 运行的矢量图形脚本框架。 它提供了清晰的场景图/DOM,同时拥有许多强大的功能来创建和使用矢量图形和贝塞尔曲线,所有这些都被巧妙地包含在一个设计良好,干净一致的编程接口中。
Paper.js 基于 Scriptographer (opens new window),并且很大程度上兼容 Scriptographer (opens new window),Scriptographer (opens new window) 是 Adobe Illustrator 的脚本环境,它拥有一个活跃的开发者社区,并且有十几年的发展。
Paper.js 简单易学,适合初学者,对许多中高级开发者的学习也有很多帮助。
Paper.js 由 Jürg Lehni (opens new window) 和 Jonathan Puckey (opens new window) 开发完成,发布遵从MIT协议 (opens new window)。
# 入门
- 首先,我们可以看看一些示例 (opens new window)。
- 下载 (opens new window) Paper.js,或者从Github 仓库 (opens new window)查看最新版本。
- 想学习 Paper.js? 从我们的教程 (opens new window)开始。
- 如果你有任何的问题或意见,可以加入我们的邮件列表 (opens new window)。
- 想及时了解最新信息,可以关注我们的 Twitter (opens new window)。
# 总览
Paper.js不仅仅是Canvas的包装器,它提供了更多功能:
- 矢量图形的场景图/DOM:使用嵌套图层(nested layers)、组(groups)、路径(paths)、复合路径(compound paths)、 栅格(rasters)、 标记(symbols)等等。
- 图形项目的处理和绘制是自动的并且经过优化,你可以构建或修改你的物体和样式,并将绘图命令交给Paper.js处理。
- 精心设计并经过千锤百炼的API。
- PaperScript,是 JavaScript 的扩展,允许脚本的局部作用域执行而不会污染全局作用域,共享同一个库的代码时,每个页面的多个脚本可以在它单独的作用域内执行,并添加了对任意对象的运算符重载支持。
- 很好地解释了矢量图形中的矢量。Paper.js 将矢量数学视为一等公民,它通过其核心类型(如Point (opens new window)、Size (opens new window)和Rectangle (opens new window))尽可能简单地处理矢量和几何图形。PaperScript 进一步简化了对 Point 和 Size 对象的操作,可以使用常规的运算符语法在这些对象上进行直接的数学运算,就像它们是纯数字一样。
- 可以构建路径并以非常方便和精细的方式控制它们的曲线(curves)和段(segments)。
- 可以查看并控制任何物体的精确边界框,支持的不同笔划端和斜接限制的复杂笔划样式。
- 平滑曲线,并通过点拟合曲线来简化路径段。
- 模拟当前Canvas对象缺少的虚线笔划,接近原生绘图速度。
- 通过 JavaScript 的模拟支持 Illustrator 和 Photoshop 中的大多数混合模式:正片叠底,滤色,叠加,柔光,强光,颜色减淡,颜色加深,变暗,变亮,差值,排除,色相,饱和度,亮度, 颜色,增加,减去,平均和反相。
阅读我们的教程 (opens new window)以了解更多有关 Paper.js 的信息。
# 浏览器支持
Paper.js 主要面向支持 Canvas对象 和 EcmaScript 5 的现代浏览器。尽管理论上可以编写代码来支持旧版浏览器(IE8及以下版本,我们期待你的加入!),但我们目前还不支持那些旧版浏览器,让我们继续前进吧!
# 常见问题
# 我们的项目需要XX功能,你们能实现吗?
如果我们认为这是一个有用的功能,我们会将它添加到我们的蓝图 (opens new window)中。 如果您需要在短期内实现,请与我们联系商讨赞助开发流程。
# 为什么不基于 SVG ?
我们决定使用 Canvas对象 作为主要后端,因为在我们的初始测试中我们发现 Canvas 比 SVG 更快,我们可以优化并完全控制我们自己的场景图/DOM。 SVG导入/导出经过我们的充分测试,是完全可用的。 请参阅下一个问题。
# 如何导出为矢量图形?
2012年11月,paper.js 实现了 SVG 的导入和导出。查看 project.importSVG(svg) (opens new window),item.importSVG(svg) (opens new window) / project.exportSVG() (opens new window),item.exportSVG() (opens new window)。在未来,我们可能通过使用额外的库来实现PDF导出功能。
# 会因为使用许多变量而污染全局变量吗?
不用担心,所有 Paper.js 都在自己的作用域范围内编译并存放在全局 paper (opens new window) 变量中。每个PaperScript 脚本都在自己的作用域范围内运行,执行时它们看上去是在全局作用域,但实际上是在 paper 对象中。 如果您选择不使用 PaperScript 而更喜欢纯JavaScript,那么,你将失去通过简单的数学运算符对 Point 和 Size 对象进行矢量数学运算的额外好处,并且你必须访问 paper 对象上的所有原型。 你可以选择调用 paper.install(window) 来污染全局作用域,将所有 Paper.js 原型注入其中,并且无需通过 paper 对象访问所有内容。
# 竞争力如何?不是已经有很多关于 Canvas 的封装库了?
我们知道现在已经有很多Canvas封装库了,但我们可以看到 Paper.js 远不止于此。 它是一个广泛的库,源于多年的 Scriptographer (opens new window) 矢量图形和API设计经验。 它提供了许多非常有用的工具来处理 canvas 缺乏的矢量图形:精心设计的场景图和DOM,针对许多贝塞尔曲线相关的高度优化和精确的数学计算,例如边界框计算(有和没有笔画扩展,包括所有不同的笔划样式,甚至斜角限制),曲线和路径长度(使用 Gauss-Legendre 数值积分),路径时间参数化(在给定的偏移/长度下找到贝塞尔参数,使用Newton-Raphson根发现法),曲线拟合和快速路径扁平化,我们可以用近乎原生的速度来实现 Canvas 缺失的虚线功能。
# 为什么为什么不直接使用 HTML5 Canvas ?
关于使用 Paper.js 的一系列额外益处,请参阅上一个问题。
# 可以在不编写 PaperScript 的情况下使用 Paper.js 吗?
当然可以,但这样你会失去一些优势,比如:自动规划作用域和运算符重载,但与此同时,这样调试起来会更方便,性能也稍有提升。教程中 直接使用 Javascript (opens new window) 描述了这部分内容。两者也可以混合使用,参考教程中 PaperScript (opens new window)Interoperability (opens new window)。