npm 包 @jake-niemiec/react-planner 使用教程

介绍

@jake-niemiec/react-planner 是一款基于 React 的二维平面绘图插件。它提供了丰富的 API 接口和组件，可以帮助前端开发者快速搭建二维平面绘图应用。

安装

你可以通过 npm 安装：

--- ------- --------------------------- ------

或使用 yarn 安装：

---- --- ---------------------------

使用

基础使用

------ ------ - --------- - ---- --------
------ - -------- ------- - ---- ------------------------------

----- --- ------- --------- -
  -------- -
    ------ -
      -----
        -------- --
        -------- ----------- ------------ --
      ------
    --
  -
-

------ ------- ----

上面的代码中，我们通过在组件内引入 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

阅读全文

猜你喜欢

  • npm包 async-polyfill使用教程

    简介 async-polyfill是一个用于在较旧的浏览器和 Node.js 版本中提供 async/await 功能的 polyfill 库。该 polyfill 库是基于 generators 和...

    3 年前
  • npm 包 bs58smartcheck 使用教程

    什么是 bs58smartcheck ？ bs58smartcheck 是一个轻便的 JavaScript 库，用于对使用 Base58 编码的字符串进行检查和校验。

    3 年前
  • npm 包 build-gradle-reader 使用教程

    在前端开发过程中，我们经常需要通过构建工具来管理、打包和发布项目，而 build.gradle 是基于 Groovy 语言的构建工具配置文件，用于定义各种任务和操作。

    3 年前
  • npm 包 dmbc-js-client 使用教程

    在前端开发中，使用 npm 包可以大大提高开发效率和代码质量。而 dmbc-js-client 就是一个非常优秀的 npm 包，在前端实现数据采集和分析方面有着广泛的应用。

    3 年前
  • npm 包 http-services 使用教程

    在前端开发中，我们经常需要调用 RESTful API 进行数据交互，而 http-services 是一个方便易用的 npm 包，可以帮助我们更快速地处理和管理网络请求，本文将详细介绍它的使用教程。

    3 年前
  • npm 包 ionic2-jpush 使用教程

    前言 随着移动互联网的飞速发展，APP已经逐渐成为了人们生活中不可或缺的一部分。在APP的开发中，推送功能已经成为了必须的功能之一。极光推送作为国内领先的推送解决方案之一，其使用广泛，免费配额较大，使...

    3 年前
  • npm 包 random-this 使用教程

    在前端开发中，我们经常需要生成随机数，例如生成随机字符串、生成随机颜色等。而 JavaScript 自带的 Math.random() 方法并不好用，需要自己写一些复杂的逻辑来实现。

    3 年前
  • npm包searchive-web-api-interface使用教程

    介绍 searchive-web-api-interface是一个npm包，它提供了一种简单的方式来应用searchive-web API。searchive-web是一个搜索引擎，它使用分布式网络...

    3 年前
  • npm 包 webpack-zip-plugin 使用教程

    webpack-zip-plugin 是一个用于打包压缩文件的插件，它可以将打包后的文件自动压缩成 ZIP 格式。本文将介绍如何使用 webpack-zip-plugin，并附带详细的代码示例。

    3 年前
  • npm 包 mobx-weapp 使用教程

    mobx-weapp 是 mobx 在小程序中的封装，使得在小程序中使用 mobx 更加便捷。在本文中，我们将会详细介绍如何使用 mobx-weapp，并提供相应示例代码。

    3 年前
  • npm 包 ng-emoji 使用教程

    ng-emoji 是一款基于 Angular 的 npm 包，用于在 Web 应用程序中添加表情符号以及自定义表情符号。本文将详细介绍 ng-emoji 的使用方法和示例代码，帮助初学者快速上手 ng...

    3 年前
  • npm 包 tslintcust 使用教程

    什么是 tslintcust tslintcust 是一款基于 TSLint 的前端代码规范检测工具，它提供了一些额外的规则以及自定义配置，可以帮助开发者更好地规范代码的编写，提高代码的可读性和可维护...

    3 年前
  • npm 包 devis-mongo-client 使用教程

    简介 devis-mongo-client 是一个基于 Node.js 平台的 MongoDB 数据库操作工具。它提供了一种简单的方式来连接 MongoDB 数据库，并进行数据的增删改查操作。

    3 年前
  • npm 包 pdf-to-json 使用教程

    PDF 文件通常用于更好地呈现文档，但有时候需要通过提取 PDF 内容并将其转换为 JSON 格式来更好地进行文本分析。幸运的是，npm 上有许多工具可以帮助我们完成这项任务。

    3 年前
  • npm 包 searchive-cli 使用教程

    介绍 npm 是 JavaScript 包的管理器，作为前端工程师，我们日常使用 npm 安装依赖包以及上传自己写的包到 npm 仓库。npm 提供了很多命令行工具，如 npm install、npm...

    3 年前
  • npm 包 searchive-client 使用教程

    在前端开发过程中，我们经常需要使用 npm 包来优化我们的工作流程。其中，searchive-client 是一个非常有用的包，可以让我们快速地获取搜索引擎的信息。

    3 年前
  • npm 包 searchive-create-index 使用教程

    如果你是一位前端开发者，那么你一定知道 npm（Node Package Manager）和其中的众多可用包，而 searchive-create-index 就是其中一个非常实用的包。

    3 年前
  • npm 包 @jdists/jphps 使用教程

    简介 @jdists/jphps 是一个用于生成 JavaScript 代码的工具包，它可以将简单到复杂的字符串转换为 JavaScript 代码，支持多种常见的转换方式，如转义、压缩、格式化等。

    3 年前
  • npm 包 dreamix-monitor 使用教程

    在开发前端应用时，我们经常需要使用监控工具来确保应用的正常运行。而 npm 包 dreamix-monitor 就是一款非常优秀的监控工具，它支持多种监控指标，如请求量、并发数、延迟等等。

    3 年前
  • npm 包 hyper-missed-cmd 使用教程

    简介 当你在使用命令行工具 Hyper 时，是否曾经输入过一个不存在的命令而无法得到正确的反馈？这时候，你需要一个名为 hyper-missed-cmd 的 npm 包。

    3 年前

相关推荐

    暂无文章