简介
paper.js 是一个强大的矢量图形库，它允许使用JavaScript创建复杂的2D矢量图形和动画。它是一个npm包，可以方便地在您的项目中使用。
本文将介绍如何使用npm包 paper.js 来创建矢量图形以及一些常见的应用场景。
安装
要使用 paper.js，首先需要安装它。打开终端并输入以下命令：
npm install paper
这将会安装最新版本的 paper.js 到你的项目中。
基础
创建画布
创建一个画布非常简单。只需添加一个 HTML canvas 标签到页面中，并将其ID设置为任意值:
<canvas id="myCanvas"></canvas>
然后，在 JavaScript 中引入 paper.js 库，选择要渲染画布的元素并创建一个 PaperScope 对象。 PaperScope 是 paper.js 的核心类，它表示整个 paper.js 应用程序的环境。
import paper from 'paper';
const canvas = document.getElementById('myCanvas');
paper.setup(canvas);绘制形状
现在我们可以开始绘制形状了。paper.js 提供了各种形状，例如 Path、Rectangle、Circle 等。 我们可以通过调用这些形状的构造函数来创建它们。
以下是一个简单的示例，使用 Path 类绘制一条直线：
const path = new paper.Path({
strokeColor: 'black',
});
path.add(new paper.Point(100, 100));
path.add(new paper.Point(200, 200));这将创建一条从点（100,100）到点（200,200）的黑色直线。 在上面的示例中，我们首先创建了一个 Path 对象，然后使用 add() 方法添加两个点。
添加文本
要在画布上添加文本，只需创建一个 PointText 对象并设置其内容和位置。例如：
const text = new paper.PointText({
point: [50, 50],
content: 'Hello World!',
fillColor: 'black',
fontFamily: 'Arial',
fontWeight: 'bold',
fontSize: 24,
});示例
接下来，我们将创建一个绘制方块的示例应用程序。 我们将绘制一个简单的矩形，并允许用户通过拖动鼠标来调整它的大小。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- ---------------
------- ---------------------------------------
-------
------ -
------- --- ----- ------
-
--------
-------
------
------- -----------------------
--------
----- ------ - ------------------------------------
--------------------
----- ---- - --- ------------------- --- ---- -----
----- ---- - --- ---------------------------
-------------- - ------
--- ---------- - ------
--- ------ - -----
--- ------------ - -----
----- ----------- - ------- -- -
-- ----------------------------------- -
---------- - -----
------ - ----------------------------------------------
------------ - -----------------
-
--
----- ----------- - ------- -- -
-- ------------ -
----- ------- - -----------------------------------------------
---------------- - --------
-
--
----- --------- - -- -- -
---------- - ------
--
------------------------------------ -------------
------------------------------------ -------------
---------------------------------- -----------
---------
-------
-------在上面的示例中，我们首先创建了一个矩形和一个 Path.Rectangle 对象。 然后，我们添加了三个事件处理程序：onMouseDown、onMouseDrag 和 onMouseUp。 当用户单击鼠标
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32575
