在Web应用程序中，为了使用户更好地理解和交互，常常需要添加标尺和测量组件。 @dbmdz/mirador-physicalruler 就是一个方便易用的用于在Web上添加标尺和测量组件的NPM包，本文将详细介绍如何使用 @dbmdz/mirador-physicalruler 包。
什么是 @dbmdz/mirador-physicalruler
@dbmdz/mirador-physicalruler 是一个基于 Mirador Viewer 的 Web 应用程序，用于添加标尺和测量组件。 Mirador Viewer 是一个用于 Web 上呈现文化遗产数码资源的开源工具包。该工具包提供了一个可扩展的基于WebGL的查看器，用于浏览文化遗产数码资源。
安装
安装 @dbmdz/mirador-physicalruler 非常简单：
npm install @dbmdz/mirador-physicalruler
使用
在项目中使用，需要引入 @dbmdz/mirador-physicalruler 包，在所需的位置创建 Viewer，并在 Viewer 之前添加分隔符，将分隔符分为上下两部分，并在适当的位置插入 rulerPlugin。
-- -------------------- ---- -------
------ ------- ---- ----------------------------
------ - ------------------- - ---- -------------------------------
----- ------- - ----------------
--- ----------
-------- -
-
--------------- ------------------------------------------------------
------------ --
--
--
-------------- -------
--------- -
---------- -
--------------- -----
--
--
---
-----------------------
------------------------------------- -
----------- ------------------------------------------------------
--
--
----- ------- - ------------------------------------
-------------------------------- -- -
----- ---- - -------------
-- ------- ---- --- -------- -- ----------- --- ---------------------- -
--------------------- -----------------------
-
---配置
初始化配置
在初始化时，@dbmdz/mirador-physicalruler 应该被添加到 Mirador 插件中。
-- -------------------- ---- -------
-- ------------
------ - ------------------- - ---- -------------------------------
----------------
--- ----------
-------- -
-
--------------- ------------------------------------------------------
------------ --
--
--
-------- ---- -----------------------
---始终显示标尺
默认情况下，标尺只在选择时显示，但可以配置成始终显示，只需将标尺配置为悬浮：
-- -------------------- ---- -------
-- ------------
------ - -------------------- ------------------- - ---- -------------------------------
----------------
--- ----------
-------- -
-
--------------- ------------------------------------------------------
------------ --
--
--
-------- ---- --------------------- ------------ - ----- ------------------- - ----
---指定标尺颜色和粗细
默认情况下，标尺是黑色的，但可以通过配置以指定颜色，单位为像素：
-- -------------------- ---- -------
-- ------------
------ - ------------------- - ---- -------------------------------
----------------
--- ----------
-------- -
-
--------------- ------------------------------------------------------
------------ --
--
--
-------- -
--- ---------------------
------ -
------ --
------ ------
--
---
--
---添加参考长度
在测量过程中，可以新增一个默认长度，用于参考测量结果。
-- -------------------- ---- -------
-- ------------
------ - ------------------- - ---- -------------------------------
----------------
--- ----------
-------- -
-
--------------- ------------------------------------------------------
------------ --
--
--
-------- -
--- ---------------------
---------------- -
------- ---
----- -----
--
---
--
---示例
-- -------------------- ---- -------
------ ------- ---- ----------------------------
------ - -------------------- ------------------- - ---- -------------------------------
----- ------- - ----------------
--- ----------
-------- -
-
--------------- ------------------------------------------------------
------------ --
--
--
-------------- -------
--------- -
---------- -
--------------- -----
--
--
---
-----------------------
------------------------------------- -
----------- ------------------------------------------------------
--
--
----- ------- - ------------------------------------
-------------------------------- -- -
----- ---- - -------------
-- ------- ---- --- -------- -- ----------- --- ---------------------- -
------------------
--- ---------------------
------------ - ----- ------------------- --
------ -
------ --
------ ------
--
---------------- -
------- ---
----- -----
--
--
--
-
---结论
@dbmdz/mirador-physicalruler 包方便易用，在添加标尺和测量组件时具有指导意义，并且与 Mirador Viewer 相互兼容，可很好地用于文化遗产数码资源的开发。本文通过详细介绍该包的功能和使用方法，希望能够帮助开发者更好地理解和学习该工具包，以及在自己的项目中实现添加标尺和测量功能的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c4581e8991b448e5c6f