您可能没有听说过 Paper.js 。 因此，让我们从问题开始：什么是Paper.js？ 它是允许您创建和使用矢量图形的库。 官方网站将其描述为矢量图形脚本的瑞士军刀。

尽管图书馆提供了很多东西，但是即使您从未听说过它，也很容易学习。 在本教程中，我将从库的基本知识开始，然后再转到复杂的主题。

使用PaperScript

有两种使用库的方法。 您可以使用PaperScript，它是JavaScript的扩展，可以帮助您更快地完成工作，也可以只使用普通的旧JavaScript。

PaperScript与您一直使用的旧JavaScript相同。 但是，它增加了对 point 和 size 对象的数学运算符的支持。 它还简化了 Project ， View 和鼠标 Tool 对象的事件处理程序的安装。

加载PaperScript时，必须使用通常的脚本标签，其类型设置为“文本/ paperscript”。 如果要从外部加载代码，则还需要添加带有适当URL的 <script> 标记以加载代码。 您需要指定的最后一个属性是 data-paper-canvas="canvasId" ，或简写版本 canvas="canvasId" ，它告诉库需要处理的画布。 下面的代码在PaperScript中创建一个四边形。

<script type="text/paperscript" canvas="quad">
  var path = new Path();
  path.strokeColor = 'black';
  var pointOne     = new Point(100, 20);
  var pointTwo     = new Point(-100, 100);
  var pointThree   = new Point(300, 30);
  path.moveTo(pointOne);
  path.lineTo(pointOne + pointTwo);
  path.lineTo(pointTwo + pointThree);
  path.lineTo(pointOne + pointThree);
  path.closed = true;
</script>

使用JavaScript

如果您对PaperScript不满意，也可以在项目中使用JavaScript。 如果您决定采用这种方式，则必须再添加几行代码。 您需要做的第一件事是检查DOM是否准备就绪，因为在此之前您将无法使用画布。 之后，您可以使用 paper 对象设置项目和视图。 现在，所有Paper.js类和对象都只能通过 paper 对象访问。

正如我之前指出的，在使用Point和Size时，必须使用Math函数而不是运算符。 下面的代码说明了所有这些区别：

window.onload = function() {
  var canvas = document.getElementById('quad');
  paper.setup(canvas);
  var path = new paper.Path();
  path.strokeColor = 'black';
  var pointOne     = new paper.Point(100, 20);
  var pointTwo     = new paper.Point(-100, 100);
  var pointThree   = new paper.Point(300, 30);
  path.moveTo(pointOne);
  path.lineTo(pointOne.add(pointTwo));
  path.lineTo(pointTwo.add(pointThree));
  path.lineTo(pointOne.add(pointThree));
  path.closed = true;
  paper.view.draw();
 
 从上面的代码片段可以明显看出，在使用Paper.js时，使用PaperScript相对容易。 因此，从现在开始的所有示例都将基于PaperScript。 
 
 
项目层次结构
 
 
 如果您曾经使用过Adobe Photoshop或Illustrator之类的图形设计应用程序，则必须熟悉图层的概念。 这些程序中的每一层都有自己的内容，当与其他层结合时，它们会产生最终结果。 Paper.js中也存在类似的层，可以使用project.layers进行访问。 
 
 
 最初，每个项目都有一个可通过project.activeLayer访问的单层。 您创建的任何新项目都将作为其子级添加到当前活动层中。 可以使用活动层的layer.children属性访问特定层中的所有子级。 
 
 
 有多种方法可以访问所有这些孩子。 如果仅需要访问任何项目的第一个和最后一个孩子，则可以分别使用item.firstChild和item.lastChild 。 您还可以为任何子代分配一个特定的名称，然后在以后使用该名称访问它。 假设您正在处理的图层大约有30个孩子。 一步一步地遍历所有这些都是不切实际的。 因此，该库具有layer.children.length属性，您可以使用该属性获取子代总数，然后使用for循环遍历列表。 
 
 
 此代码段使用我们刚刚讨论的所有属性访问各个子级： 
 
 
var circleA = new Path.Circle(new Point(45, 150), 45);
var circleB = new Path.Circle(new Point(110, 150), 20);
var circleC = new Path.Circle(new Point(165, 150), 35);
var circleD = new Path.Circle(new Point(255, 150), 55);
var circleE = new Path.Circle(new Point(375, 150), 65);
var circleF = new Path.Circle(new Point(475, 150), 35);
circleC.name = 'GreenCircle';
project.activeLayer.firstChild.fillColor = 'orange';
project.activeLayer.lastChild.fillColor = 'pink';
project.activeLayer.children[1].fillColor = 'purple';
project.activeLayer.children['GreenCircle'].fillColor = 'lightgreen';
for (var i = 3; i < 5; i++) {
  project.activeLayer.children[i].fillColor = 'tomato';
 
 下面的嵌入式演示显示了正在运行的脚本。 您可以验证所有圆圈的颜色是否与我们在上面的代码中分配给它们的颜色匹配。 
 
 
 您还可以使用item.parent方法访问项目的父项，例如用于访问其所有子项的item.children方法。 每当您创建新项目时，其父项将始终是项目的当前活动层。 但是，可以通过将项目添加为另一个layer或group的子项来更改它。 
 
 
 在继续之前，让我解释一下一个group实际含义。 老实说， layer和group都非常相似。 两者之间的主要区别是，您创建的任何新项目都会自动添加到活动层，但是如果是组，则必须自己添加项目。 
 
 
 您可以通过多种方式将项目添加到组中。 您可以将数组项传递给组构造函数，并将它们全部添加到组的item.children数组中。 要在创建组后将其添加到组中，可以使用item.addChild(item)函数。 您还可以使用item.insertChild(index, item)函数在特定索引处插入子item.insertChild(index, item) 。 
 
 
 删除项目也和添加项目一样容易。 要从项目中删除任何项目，可以使用item.remove()函数。 请记住，这不会破坏项目，您可以随时将其添加回项目中。 如果您删除的项目有任何孩子，那么所有孩子也将被删除。 如果要删除所有子项但保持原样，该怎么办？ 这可以通过使用item.removeChildren()函数来实现。 
 
 
 现在，术语item已在本教程中出现多次。 那是什么 Paper.js项目中出现的所有内容都是一个item 。 这包括layers ， paths ， groups等。尽管不同的项目具有特定于它们的属性，但其他属性也适用于所有这些属性。 
 
 
 如果要向用户隐藏项目，则可以通过将item.visible值item.visible为false 。 您还可以使用item.clone()函数克隆任何项目。 此函数返回克隆的项目，您可以将其存储在变量中并在以后进行操作。 您还可以使用item.opacity属性更改任何项目的不透明度。 0到1之间的任何值都将使该项目透明。 
 
 
 您还可以使用item.blendMode属性为任何项目设置混合模式。 混合模式需要作为string传递。 该库还提供了item.selected属性，如果将其设置为true ，则会在该元素的顶部创建视觉轮廓。 这在调试期间非常有用，因为它允许您查看路径的构造，各个分段点和项目的边界框。 
 
 
 可以在Paper.js项目中轻松缩放，旋转或移动项目。 在本节中，我将简要介绍所有这些转换。 
 
 
 要更改位置item ，您可以使用它item.position属性和设置位置，以一个新的起点。 如果要移动元素，可以在+=运算符的帮助下进行。 
 
 
 您还可以使用item.scale(scale)函数缩放任何项目。 这将围绕其中心点缩放项目。 您可以通过将其指定为第二个参数来围绕其他点缩放项目，例如item.scale(scale, point) 。 此外，该库还允许您通过传递两个数字作为参数来在垂直和水平方向上缩放项目，例如item.scale(scaleX, scaleY) 。 
 
 
 旋转项目类似于缩放它们。 您可以使用item.rotate(angle)函数围绕元素的中心旋转元素。 角度以度为单位指定，旋转沿顺时针方向进行。 要围绕特定点旋转项目，还可以将一个点作为第二个参数传递，例如item.rotate(angle, point) 。 
 
 
 下面的代码片段应用了我们刚刚在三个不同的矩形上讨论的所有转换和操作。 
 
 
var rectA = new Path.Rectangle(new Point(250, 70), new Size(120, 120));
rectA.fillColor = 'pink';
var rectB = rectA.clone();
rectB.fillColor = 'purple';
rectB.position += new Point(80, 80);
rectB.opacity = 0.6;
rectB.blendMode = 'color-burn';
rectB.scale(1.5);
rectB.rotate(45);
var rectC = rectB.clone();
rectC.fillColor = 'lightgreen';
rectC.position += new Point(-180, 0);
rectC.blendMode = 'color-dodge';
rectC.scale(1.5);
 
 该代码几乎是不言自明的。 我从矩形A克隆矩形B，矩形B获取矩形A的所有属性。矩形B和C也是一样。 
 
 
 请注意，我使用了上面讨论的+=运算符来移动项目。 此运算符相对于其旧位置移动项目，而不使用绝对值。 
 
 
 下面的演示向您展示了所有这些转换之后的最终结果。 您可以尝试不同的混合模式或在演示中更改其他属性，以查看它们如何影响最终结果。 
 
 
最后的想法
 
 
 如前所述，Paper.js易于学习，可让您轻松创建矢量图形。 本教程介绍了使用该库所需的非常基本的知识。 很快，我们将发布该系列的下一个教程，该教程将详细讨论路径和几何。 
 
 
 同时，必须指出，JavaScript已成为在网络上工作的事实语言之一。 它并非没有学习曲线，并且有许多框架和库也让您忙碌。 如果您正在寻找其他资源来学习或在工作中使用，请查看Envato市场中可用的资源 。 
 
 
 在此之前，我建议您创建一些我们自己的基本演示并实践到目前为止所学的知识。 如果您对本教程有任何疑问，请在评论中告诉我。 
 
  
翻译自: https://code.tutsplus.com/tutorials/getting-started-with-paperjs-projects-and-items--cms-26481
				
到目前为止，在本系列中，我已经介绍了Paper.js中的项目和项 ， 路径和几何以及用户交互 。 该库还允许您为项目中的各种项目设置动画。 如果将其与基于用户输入的操作能力结合起来，则可以创建一些非常酷的效果。 本教程将介绍如何为Paper.js中的项目设置动画。 
 本教程后面的部分还将介绍图像处理以及如何处理单个像素的颜色。 该库还使您可以从矢量创建栅格，最后将进行介绍。 
 P...
				
PaperScript代码在它自己的范围内自动执行，不受全局范围的影响，仍然可以访问所有全局浏览器对象和函数，比如文档或窗口。
默认情况下，paper .js库只将一个对象导出到全局作用域:paper对象。它包含标准库定义的所有类和对象。当使用PaperScript时，用户不需要关心这些，因为在PaperScript代码中，通过使用聪明的范围，所有的对象和函数看起来都是全局的。
PaperScript还提供了项目、视图和鼠标工具对象的自动创建，并简化了这些对象的事件处理程序的安装。
绘制一个线段
				
Paper.js 3D挤出动画效果实现解析
本文将深入解析如何使用 Paper.js 创建具有 3D 挤出效果的动画。Paper.js 是一个强大的矢量图形库，通过其简洁的 API 可以实现复杂的动画效果。这个示例展示了如何通过连接两个旋转路径的点来创建视觉上的 3D 挤出效果。
1. 路径与线段
在 Paper.js 中，Path 类用于创建矢量路径。本示例使用了两种路径：
静...
				
Paper.js 使用教程
1. 项目介绍
Paper.js 是一个基于 HTML5 Canvas 的矢量图形脚本工具，它将 Scriptographer 移植到 JavaScript 和浏览器中。Paper.js 提供了强大的矢量图形处理能力，适用于各种需要图形绘制和处理的场景。无论是简单的图形绘制，还是复杂的动画效果，Paper.js 都能轻松应对。
2. 项目快速启动
安装 Paper.js...
				
Paper.js - 一个强大的JavaScript矢量图形库
Paper.js是一个开源的JavaScript矢量图形库，专为Web设计师和开发人员提供易用性和灵活性。通过使用Paper.js，您可以在浏览器中创建复杂的2D图形、动画和交互式应用。
项目介绍
Paper.js的目标是让Web设计人员能够轻松地在JavaScript环境中进行图形设计。它提供了丰富的API和工具，使得开发者可以专注...
 预先构建的开发版本： 和分支。
安装Paper.js
 在项目中作为依赖项安装和维护Paper.js的推荐方法是通过针对浏览器，Node.js或Electron的 。
 如果已经安装了NPM，只需在项目文件夹中键入以下命令之一： 
npm install paper
 执行后，您将在项目的node_modules文件夹中找到一个paper文件夹。
 有关如何安装Node.js和NPM的更多信息，请阅读“ ”一章。
使用哪个版本
各种发行版都带有Paper.js的两个不同的预构建版本，分别为精简版和普通版：
 paper-full.js –浏览器的完整版本，包括PaperScript支
要使用它，请导入它并使用选择工具之一​​。
 import * as pst from 'paper-select-tool' ;
var core = document . getElementById ( 'core' ) ,
    settings ;
window . onload = function ( ) {
  settings = Settings ( ) ;
  pst . lasso ( settings , core ) ;
// ...
var things = [ { point : new paper . Point ( 100 , 1
				
将Paper.js与Electron一起使用
该项目只是扩展了项目， Paper.js其中添加了Paper.js 。
 在Electron应用程序中使用Paper.js的最简单方法是Paper.js在一个简单的网站中一样，使用[removed]标记加载它。
安装依赖项
 npm install
 npm start
				
阅读前两个教程后，您应该能够创建路径和一些基本的预定义形状。 您还应该能够简化或展平您的路径，以及将它们绘制在不同的图层上并将它们融合在一起。 
 即使我们已经走了很长一段路，但仍然缺少一件事。 到目前为止，我们的画布和用户之间没有任何交互。 如果我们能够为用户提供与各种路径进行交互或自己绘制内容的能力，那将是很好的。 本教程将从tool变量开始，涵盖用户交互的所有基础知识。 
工具和工具事件...