介绍
openseadragon-paperjs-overlay 是一个结合 OpenSeadragon 和 Paper.js 的 npm 包，它可以在 OpenSeadragon 的图像上绘制可缩放的矢量图形。这个工具使用到了 OpenSeadragon 以及 Paper.js，所以使用前需要确保这两个库都已经安装了。
本篇文章将会介绍如何使用 openseadragon-paperjs-overlay，包括安装，基本使用方式以及示例代码。
安装
安装 openseadragon-paperjs-overlay 均可通过 npm 来进行安装。
npm install openseadragon-paperjs-overlay
基本使用方式
-- -------------------- ---- ------- -- -- ------------- - -------- ------ ------------- ---- ---------------- ------ ----- ---- -------- -- -- ----------------------------- ------ -------- ---- -------------------------------- -- --- ------------- ----- ------ - --------------- --- --------- -- -- ------------- -------- ---------- ----------- ------------ -------------------------- -- ------ ------------- ---------- -------------- ----------- ----------- ------- --- -- --- -------- --------------------------- -- --- -------- ----- ------- - --- ---------------- ------- -- ----- ----- ---- - --- ------------- ---------------- - ------ -- ----- ------- - ----------------------------- - -- -- - ---------------------- ---------------------------------------------- ---------------------- ----- ---------------------------------------------- ---------------------- ----- -- -- ---- ------- - ------------- - ------------------------------------------
上述代码做了如下的事情：
- 引入了 OpenSeadragon、Paper.js 以及 openseadragon-paperjs-overlay。
- 使用 OpenSeadragon 初始化了一个 viewer，同时使用 Paper.js 初始化了一个 Paper。
- 使用 OSDPaper 初始化了一个 overlay，并将其绑定在 viewer 中。
- 在组成画布中创建了一个路径，并将其绑定在 overlay 中。
- 最后，将 overlay 添加到 viewer 中，并让 viewer 显示出来。
示例代码
下面将介绍一个使用 openseadragon-paperjs-overlay 绘制多边形的示例。
-- -------------------- ---- -------
-- -- ------------- - --------
------ ------------- ---- ----------------
------ ----- ---- --------
-- -- -----------------------------
------ -------- ---- --------------------------------
-- --- -------------
----- ------ - ---------------
--- ---------
-- -- ------------- --------
---------- -----------
------------ --------------------------
-- ------
------------- ----------
-------------- -----------
----------- -------
---
-- --- --------
---------------------------
-- --- --------
----- ------- - --- ---------------- -------
-- -------
----- ---- - --- -------------
---------------- - ------
---------------- - --
----------- - -----
-- ------
--- ------- - ------
--- -------- - ------
--- --------- - -----
--- ------- - ------
--- --------- - -----
--- ---------- - --
-------------------------------- ------- -- -
-- --------- -
------- - ------
-------
-
-- --------- -
----- ----- - ---------------
--- ------ - --- ---------------- - -----------
-- ----------- --- -- -
------ - --
-
-- ---------- -- ------ - --- -
-- ---------- --- ----- -
---------------------------------------------------
- ---- -
-- --------
----- ---- - ---------------------------------------------
----- --- - -----------------------------------------
----- ----- - -------------- - --------
----- ------ - -------------- - --------
----- --- - --------------- --------
----- ------- - --- - --
----- --- - ------- - ----------- --- ------- - ----------- - ------- - ---------
-----------------
---------------- -----
-
--------- - ------
---------- - --- -----------------
- ---- -- --------- -- --------- --- ----- -
------------------------------ - -----------------------------------------
-
-
---
-------------------------------------- -- -- -
------- - -----
---------- - --
---
------------------------------------ -- -- -
------- - ------
-------- - ------
--------- - -----
--------- - -----
---
---------------------- ---- --------- ------ ------- ------- ------- ---------- -------- -- --- -- -
-- ---------- -
------------------------------
- ---- -
--------------
------- - -----
-
-------- - ------
--------- - -----
---
--------------------------------- ------- -- -
-- ---------- -- ------------ -
-----------------
-------------- - --- -------------- -- -- -----
- ---- -- ---------- -
-- ------------- -
--------------------- - -- -------------------- - --------- - ---------------------------------------------------
- ---- -
-------- - ------
--------- - -----
--------- - -----
---------- - --
--------------
-
-
---
----------------------------- - -- -- ---
-- ---- ------- - ------------- -
------------------------------------------上述代码中展示了如下的流程：
- 引入 OpenSeadragon、Paper.js，以及 openseadragon-paperjs-overlay。
- 使用 OpenSeadragon 初始化一个 viewer，同时使用 Paper.js 初始化了一个 Paper。
- 使用 OSDPaper 初始化了一个 Overlay，并将其绑定在 Viewer 中。
- 创建一个多边形，并在鼠标点击、拖拽等事件中对多边形进行位移、删除、填色等操作。
- 最后，将自定义 overlay 添加在 viewer 中，并显示出来。
总结
通过本文的介绍，我们了解了 openseadragon-paperjs-overlay 的安装、基本使用方式以及示例代码。我们可以看到，这个工具结合了 OpenSeadragon 和 Paper.js 的优势，使得在 OpenSeadragon 中进行可缩放的矢量图形绘制变得更加容易和快捷。
在实际的开发中，我们可以根据自己的需求对 openseadragon-paperjs-overlay 进行定制，以便更好地适应我们的应用场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554cc81e8991b448d1ff1