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