在前端开发中，展示大量图片和进行关键点标注是一项十分常见的需求。而 OpenSeadragon 是一款高性能、开源、易扩展的图片浏览库，而通过使用它的一个 npm 包 openseadragon-annotations-cellmarker，可以轻松实现关键点标注的功能。
安装
使用 npm 安装 openseadragon-annotations-cellmarker：
npm install openseadragon-annotations-cellmarker
在项目中引入配置和自定义注释框的方法，并实例化 OpenSeadragon：
-- -------------------- ---- -------
---- ------------------- -------------- ------ ------ -------------
------- ------------------------------------
------- -----------------------------------------------
------- -------------------------------------------
--------
-- -----------
--- ------------- - --------------------------------------
--------------------------------------------------------- - --
--- ------ - ---------------
--- -----------------
---------- --------------------------
------------ --------------
-------------- -----
------------------ -----------
------------- -------
-------------- ------
---
--- ---------- - --- -------------------------------------------- -
-------- ---------------------------------------------
---------- --------------------------
---------- -----
-------------- -----
---------- ---------
---
-- ------------
------------------------------------ --------------- -
-- -----------------
---
---------配置说明
注释框的基本样式
OpenSeadragon 默认提供了下面这个样式：
-- -------------------- ---- -------
-
------- -
----------------------- -
-- ----
---------- --
-- ----
------------ ----------
-- ----
---------- ---------- ---- --- ------
-- ----
------------ ----------
-- ------
----------- --
-- -----
-------------- --
-------------- -
--
--------------------- --- --- ----
-- ---
-
-我们可以根据自己的需求对上述样式进行配置。
注释框的基本属性
在实例化 cellmarker 时，可以配置下列属性：
element：引用包含画布的元素。必须是 HTMLDivElement。prefixUrl：引用要使用的图标集URL的URL前缀。默认值是 './images/openseadragon/' 。sizeRatio：用于计算框大小的图像像素比率，默认为 0.01。此值乘以图像分辨率给出注释框的外部边框宽度。fillColor：单元格覆盖区域的填充颜色。默认为蓝色。allowDragging：允许用户在打开的图像上拖动单元格；默认为false。
实现关键点标注功能
定义注释框完成后，我们需要监听 cell-select 事件来获取在大图上选择单元格后的相关位置数据，并进行关键点标注。具体示例如下：
-- -------------------- ---- -------
-- ------------
------------------------------------ --------------- -
--- ------------ - ---------------
-- ------
--- ----- - ------------------------------------------
---------------------------- -
--------------
--
-- -----------------
----- - ---------------------------------------------------------------------------
---------------------------- -
---------------------- --- ------------- -
--- ------- - ----------------------------------
--- ------ - ------------------------------
------------------------------------
----------------- - ------------- - ----------------- - --- - -----
---------------- - ------------- - ------------------ - --- - -----
----------------------------
--------------------------------------------------------------
-
--
---这样，我们就实现了一个简单的关键点标注功能。
总结
本文介绍了如何使用 npm 包 openseadragon-annotations-cellmarker 来实现基于 OpenSeadragon 的关键点标注功能，并详细说明了配置项的含义，以及实现示例。当然，通过对该库的深入学习，我们还可以实现更为复杂的标注功能。相信本文对于初学者来说是一篇不错的入门材料。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672693660cf7123b36739