介绍
@jake-niemiec/react-planner 是一款基于 React 的二维平面绘图插件。它提供了丰富的 API 接口和组件，可以帮助前端开发者快速搭建二维平面绘图应用。
安装
你可以通过 npm 安装：
npm install @jake-niemiec/react-planner --save
或使用 yarn 安装：
yarn add @jake-niemiec/react-planner
使用
基础使用
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - -------- ------- - ---- ------------------------------
----- --- ------- --------- -
-------- -
------ -
-----
-------- --
-------- ----------- ------------ --
------
--
-
-
------ ------- ----上面的代码中，我们通过在组件内引入 Planner 和 ToolBar 组件，实现了一个简单的绘图应用。其中 width 和 height 分别是绘图区域的宽高。
节点和线段
@jake-niemiec/react-planner 中，节点和线段是绘图应用的基本元素。我们可以通过 Planner 组件的 addNode 和 addLine 方法添加节点和线段。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - -------- ------- - ---- ------------------------------
----- --- ------- --------- -
--------------- -
----------------------
-- ----
-- ----
------ ---
------- ---
----- ----------
---
-
--------------- -
----- ----- - ---------------------------
----- ----- - ---------------------------
--------------------------- -------
-
-------- -
------ -
-----
---------
------- ----------- -- -----------------------------------
------- ----------- -- -----------------------------------
----------
--------
-----------
------------
-------------- -- ------------- - ---------
--
------
--
-
-
------ ------- ----上面的代码中，我们通过 addNode 方法添加了一个自定义类型的节点，通过 addLine 方法添加了一条连接第一个和第二个节点的线段。
操作和事件监听
@jake-niemiec/react-planner 提供了一系列的事件监听和方法，可以帮助我们操作绘图应用。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - -------- ------- - ---- ------------------------------
----- --- ------- --------- -
--------------- -
----------------------
-- ----
-- ----
------ ---
------- ---
----- ----------
---
-
--------------- -
----- ----- - ---------------------------
----- ----- - ---------------------------
--------------------------- -------
-
------------------------- -
-------------------- -------
-
---------------------- -
----------------------
-
------------------------- -
-------------------- -------
-
---------------------- -
----------------------
-
-------- -
------ -
-----
---------
------- ----------- -- -----------------------------------
------- ----------- -- -----------------------------------
----------
--------
-----------
------------
-------------- -- ------------- - ---------
----------------------- -- -------------------------------
-------------------- -- ----------------------------
----------------------- -- -------------------------------
-------------------- -- ----------------------------
--
------
--
-
-
------ ------- ----在上面的代码中，我们通过 onNodeSelected、onNodeUnselected、onLineSelected 和 onLineUnselected 监听了对节点和线段的选择和取消选择操作，并在控制台输出了选中的节点和线段信息。
结束语
@jake-niemiec/react-planner 可以帮助我们快速搭建二维平面绘图应用。通过本文的介绍和示例代码，我们可以快速上手并了解到其基础用法和一些常见操作。希望这篇教程对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566af81e8991b448e2ede