关于

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)。