Ame's blog Ame's blog
首页
  • 前端核心

    • HTML
    • CSS
    • JavaScript
    • Web API接口
    • TypeScript
    • 浏览器
    • UI库
    • 前端框架
    • 前端工具库
  • 也许是后端

    • node
  • 学习笔记

    • 暂时为空
UI
  • 编译原理
  • 网络
  • 计算机组成
  • 数据结构与算法
  • 操作系统原理
  • 设计模式
  • 数据库
  • 面试
关于
  • 网站
  • 前端通用资源
  • Vue资源
  • React资源
  • Node资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Ame

做一个懂UI的前端工程师
首页
  • 前端核心

    • HTML
    • CSS
    • JavaScript
    • Web API接口
    • TypeScript
    • 浏览器
    • UI库
    • 前端框架
    • 前端工具库
  • 也许是后端

    • node
  • 学习笔记

    • 暂时为空
UI
  • 编译原理
  • 网络
  • 计算机组成
  • 数据结构与算法
  • 操作系统原理
  • 设计模式
  • 数据库
  • 面试
关于
  • 网站
  • 前端通用资源
  • Vue资源
  • React资源
  • Node资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • vis-network中文文档

  • fabricJS中文文档

  • paperJS中文文档

    • paperJS 关于
      • 关于
      • 入门
      • 总览
      • 浏览器支持
      • 常见问题
        • 我们的项目需要XX功能,你们能实现吗?
        • 为什么不基于 SVG ?
        • 如何导出为矢量图形?
        • 会因为使用许多变量而污染全局变量吗?
        • 竞争力如何?不是已经有很多关于 Canvas 的封装库了?
        • 为什么为什么不直接使用 HTML5 Canvas ?
        • 可以在不编写 PaperScript 的情况下使用 Paper.js 吗?
    • paperJS 特点
    • paperJS 下载
    • paperJS 入门
    • paperJS 几何
    • paperJS 路径
    • paperJS 交互
  • pixiJS教程

  • spritejs

  • 数据可视化
  • paperJS中文文档
Ame
2020-06-11

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

编辑 (opens new window)
上次更新: 2021/03/31, 14:03:00
part-8
paperJS 特点

← part-8 paperJS 特点→

最近更新
01
TypeScript类型定义
03-20
02
Typescript
03-19
03
常用兼容IE或增强浏览器的库
03-09
更多文章>
Theme by Vdoing | Copyright © 2020-2021 Ame | MIT License | 鲁ICP备18003274号-2
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式