@javiercrowsoft/graffiti 是一款基于 React 的 JavaScript 库，它提供了一种简单直接的方式来在图片上进行涂鸦 annotation，支持多种注释样式和自定义注释工具。
安装
使用 npm 安装：
npm i @javiercrowsoft/graffiti
使用 yarn 安装：
yarn add @javiercrowsoft/graffiti
使用方式
首先，你需要一个存在的图片。 @javiercrowsoft/graffiti 支持在任意大小和比例的画布上绘制注释，所以先要确定图片的大小和比例。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ---------------------------
----- -------- - --------------------------------------
----- --- - -- -- -
-----
--------- -------------- --
------
--
------ ------- ----这段代码将渲染一个图片，并给它添加了 Graffiti 的注释工具。
默认情况下，Graffiti 会显示一个红色的圆圈，当点击图片时弹出注释工具。但是这看起来并不好看，如果我们要自定义注释工具样式，可以在 tags 属性中传递一个数组。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ---------------------------
------ - ----------------- - ---- -----------------
----- -------- - --------------------------------------
----- --- - -- -- -
----- ---- - -
-
----- ------------------ --------- ---
------ --------
-------- ---- - ----- -----
-------- --------- -- ---------------- ------ ---------
--
--
------ -
-----
--------- -------------- ----------- --
------
--
--
------ ------- ----这段代码将渲染一个带有自定义标签工具的图片。现在，当我们点击标签工具时，它将带有一个 lalebl 并且向控制台输出点击事件。
如何自定义标签工具样式
为了自定义标签工具样式，你需要先了解 Graffiti 内部标签的默认样式，然后通过 CSS 或样式对象覆盖它们。这里有几个常用的样式名：
.tags-container：标签容器的父元素，位于图片的顶部.tag-wrapper：标签的包装器，包含标签图标和气泡提示.tag-content：包含标签图标和气泡提示文本的元素
属性名和值和 CSS 相同，只是转成了驼峰式写法，例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ---------------------------
------ - ----------------- - ---- -----------------
----- -------- - --------------------------------------
----- --- - -- -- -
----- ---- - -
-
----- ------------------ --------- ---
------ --------
-------- ---- - ----- -----
-------- --------- -- ---------------- ------ ---------
--
--
----- ------ - -
----------- -
----------- ------
--
----------- -
--------- -------
----------- -------
------ --------
----------- -------- --- --- ------
-------- ------
------------- ------
------------ ------
-
--
------ -
-----
--------- -------------- ----------- --------------- --
------
--
--
------ ------- ----这段代码将渲染一个自定义样式的带有标签工具的图片。
如何添加注释
要添加注释，我们需要使用 addAnnotation 方法并将其作为回调传递给 Graffiti。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ---------------------------
------ - ----------------- - ---- -----------------
----- -------- - --------------------------------------
----- --- - -- -- -
----- ---- - -
-
----- ------------------ --------- ---
------ --------
-------- ---- - ----- -----
-------- ----- - -------- -------- --- -- -- -
----- -- - --------------------------------------- ---
-------------------
-- --------
-- --------
---
------ -------
---
--
--
--
----- ------ - -
----------- -
----------- ------
--
----------- -
--------- -------
----------- -------
------ --------
----------- -------- --- --- ------
-------- ------
------------- ------
------------ ------
-
--
------ -
-----
--------- -------------- ----------- --------------- --
------
--
--
------ ------- ----这段代码将保持我们之前的定制标签，但是当我们点击工具时，它将以绿色绘制一个新的注释。
如何保存注释
Graffiti 提供了一个 toDataURL 方法，该方法将保存标记并将其转换为一张新图像。
-- -------------------- ---- -------
------ ------ - ------ - ---- --------
------ -------- ---- ---------------------------
------ - ----------------- - ---- -----------------
----- -------- - --------------------------------------
----- --- - -- -- -
----- -------- - -------------
----- ---- - -
-
----- ------------------ --------- ---
------ --------
-------- ---- - ----- -----
-------- ----- - -------- -------- --- -- -- -
----- -- - --------------------------------------- ---
-------------------
-- --------
-- --------
---
------ -------
---
--
--
-
----- ------------------ --------- ---
------ ------
-------- ---- - --- -----
-------- ----- - -------- -------- --- -- -- -
----- -- - --------------------------------------- ---
-------------------
-- --------
-- --------
---
------ -----
---
--
--
--
----- ------ - -
----------- -
----------- ------
--
----------- -
--------- -------
----------- -------
------ --------
----------- -------- --- --- ------
-------- ------
------------- ------
------------ ------
-
--
----- ----------- - -- -- -
----- ------ - -----------------------------
-- --- --- ------ ----- ----
--
----- --------------- - -- -- -
------------------------------------
-
------ -
-----
--------- -------------- -------------- ----------- --------------- --
-----
------- -------------------------- --------------------
------- ------------------------------- --- --------------------
------
------
--
--
------ ------- ----这段代码将保持我们之前的定制标签，除此之外，我们还添加了一个保存注释并清除所有注释的按钮。要保存注释，请点击"保存注释"按钮，将弹出一个新的窗口，其中包含转换为图像的注释。此时，您可以将其下载到本地或将其发送到另一个服务端点进行保存。
总结
在本文中，我们介绍了 @javiercrowsoft/graffiti npm 包的使用。通过本文，你可以了解如何在图片上使用 Graffiti 注释。您可以定制 Graffiti 的样式和使用 Graffiti 的 API 调整和添加注释。最后，我们展示了如何将 Graffiti 注释保存到新图像中，以及如何清除注释。希望这些代码对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc5967216659e2443a2