npm 包 react-sketch-book 使用教程

简介

react-sketch-book 是一个 React 插件，用于创建交互式的原型设计和演示。使用该插件可以轻松地创建原型图和演示展示，并且可以在自己的项目中使用插件进行二次开发。

安装

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

使用

基础用法

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

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

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

API

ReactSketchBook

属性名 类型 是否必须 默认值 说明
width number 否 800 宽度
height number 否 600 高度
speed number 否 1.2 动画速度
background string 否 '#ffffff' 背景颜色
ratio number 否 2 渲染比率
zoomFactor number 否 1.1 缩放比例
showTime boolean 否 true 显示每帧间隔时间
showFps boolean 否 true 显示帧率
onStart (context: SketchContext) => void 否 - 动画开始时的回调
onFrame (context: SketchContext, frameNumber: number) => void 否 - 每帧的回调
onFinish (context: SketchContext, frameNumber: number) => void 否 - 动画结束时的回调
onBegin (context: SketchContext) => void 否 - 动画开始时的回调(和 onStart 一样)
onStop (context: SketchContext, frameNumber: number) => void 否 - 动画停止时的回调
onResize (context: SketchContext, oldWidth: number, oldHeight: number) => void 否 - 画布大小调整时的回调
onMount (context: SketchContext) => void 否 - 组件挂载时的回调
onUnmount (context: SketchContext) => void 否 - 组件卸载时的回调

SketchContext

属性名 类型 说明
app p5 对象 p5 对象
frameCount number 帧数
elapsedTime number 已经花费的时间(ms)
frameRate number 帧率（frames per second）
deltaTime number 每帧时间差
width number 宽度
height number 高度
mouse Mouse 对象 鼠标
keyboard Keyboard 对象 键盘
sketch ReactSketchBook 对象 ReactSketchBook 对象

Mouse

属性名 类型 说明
x number 鼠标 x 轴坐标
y number 鼠标 y 轴坐标
isPressed boolean 鼠标左键是否按下（只有画布内有效）
isDragged boolean 鼠标是否正在拖动（只有画布内有效）
isReleased boolean 鼠标左键是否释放（只有画布内有效）
isClicked boolean 鼠标左键是否点击（只有画布内有效）
isDoubleClicked boolean 鼠标左键是否双击（只有画布内有效）
isRightPressed boolean 鼠标右键是否按下（只有画布内有效）
pressedTime number 鼠标左键按下的时间（只有画布内有效）
clickTime number 鼠标左键点击的时间（只有画布内有效）
doubleClickTime number 鼠标左键双击的时间（只有画布内有效）
keyPressed Key 对象（或 null） 当前按下的键
pressedKeys Key[] 对象 当前按下的所有键

Keyboard

属性名 类型 说明
pressedKeys Key[] 对象 按下的所有键
keyPressed Key 对象（或 null） 最后按下的键

Key

属性名 类型 说明
keyCode string 或 数字 按键的键码
key string 按键的名称
code string 按键的代码名

结语

react-sketch-book 是一个功能强大、易于使用的插件，可以帮助前端工程师快速创建交互式的原型设计和演示。上述使用教程和示例代码希望能够帮助您了解和使用该插件，从而提高前端开发效率，实现更好的用户体验。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600575c481e8991b448ea739

阅读全文

猜你喜欢

  • npm 包 corn-cli 使用教程

    简介 corn-cli 是一个基于 node.js 编写的命令行工具，用于生成和格式化 cron 表达式。cron 表达式是一个日历表达式，通常用于指定定时执行任务的时间。

    3 年前
  • npm 包 h5-cryptum-resources-retriever 使用教程

    介绍 h5-cryptum-resources-retriever 是一款支持前端使用的 npm 包，可以用来帮助开发者快速地从服务器中获取需要的静态资源。 在前端开发中，我们经常会需要加载各种静态资...

    3 年前
  • npm 包 uglify-es-script 使用教程

    什么是 uglify-es-script uglify-es-script 是一个 Node.js 下的 npm 包，是用来将 JavaScript 代码进行压缩和混淆的工具。

    3 年前
  • npm 包 is-file-utf8 使用教程

    简介 is-file-utf8 是一个基于 Node.js 的 npm 包，用于判断文件是否为 UTF-8 编码。 在前端开发中，经常需要处理文件编码的问题。使用 is-file-utf8 可以快速准...

    3 年前
  • npm 包 layit.css 使用教程

    在前端开发中，样式的编写是不可避免的一部分。而 npm 中的 layit.css 是一个非常好用的 CSS 样式框架，它可以帮助你更快捷地实现布局及样式的设置。本文将为大家介绍 npm 包 layit...

    3 年前
  • npm 包 reddime 使用教程

    前言 在前端开发中，我们常常会使用一些第三方库来提高我们的开发效率和代码质量。其中，npm 就是一个非常常见的包管理工具。在 npm 仓库中，有着数以万计的包供我们使用。

    3 年前
  • npm 包 room_info 使用教程

    在前端开发中，经常需要展示房间信息，包括房间面积、朝向、户型等等。如果每次开发都需要重新写一遍这些逻辑，那么会浪费很多时间和精力。因此，我们可以使用 room_info 这个 npm 包来快速展示房间...

    3 年前
  • npm 包 @drupsys/system_logger 使用教程

    什么是 @drupsys/system_logger？ @drupsys/system_logger 是一个简单易用的前端日志记录工具，可以帮助开发人员记录浏览器端 JavaScript 应用程序的关...

    3 年前
  • npm 包 @fanaticsinc/buoy 使用教程

    在现代 web 开发中，我们经常需要处理各种不同的数据。@fanaticsinc/buoy 是一个轻量级的 JavaScript 库，可以帮助我们快速对数组、对象等数据进行操作。

    3 年前
  • npm包 ihealth-cloud-api 使用教程

    前言 iHealth是一家健康管理服务提供商，提供了各种医疗设备和健康管理应用程序。这些设备和应用程序提供了与云服务器的连接，从而保存个人健康数据和共享数据。为方便开发者使用iHealth云API接口...

    3 年前
  • npm 包 jasmine-let 使用教程

    前言 在编写前端测试代码时，我们经常需要对一些值进行预处理或者复制，这就需要我们去进行一些重复的赋值操作，非常的繁琐。而 jasmine-let 这个 npm 包，提供了一种更加优雅的处理方式，能够在...

    3 年前
  • npm 包 redux-wrangler 使用教程

    前言 Redux 是一种 JavaScript 状态容器，用于编写可预测化应用程序的完美工具。它驱动着许多交互且高度动态的 Web 应用程序。 然而，Redux 并不是一个完美的解决方案。

    3 年前
  • npm 包 merkle-tree-payment-pool 使用教程

    前言 支付池是一种可用于快速处理众多小额支付的技术。它将众多小额支付聚合成一次大额支付，从而降低了支付系统的负担。在前端应用中，我们可以使用 merkle-tree-payment-pool 这个 n...

    3 年前
  • npm 包 method-sets 使用教程

    method-sets 是一个 npm 包，它提供了一些非常有用的方法，可以用于统一不同类型的对象和数据结构的操作。这些方法可以大大简化代码并使代码更易读。在本文中，我们将详细介绍如何使用 metho...

    3 年前
  • npm 包 apollo-link-redux 使用教程

    前言 在开发前端应用的过程中，经常需要管理应用的状态，这时候 Redux 就是一个很好的选择。而使用 GraphQL API 的应用也越来越多，这时候将 Redux 和 GraphQL 结合起来，可以...

    3 年前
  • npm 包 dialogflow-fulfillment-v2-middleware 使用教程

    当你需要在你的网站或应用程序中使用人工智能对话管理器de的时候，Dialogflow是一个好的选择。Dialogflow可以帮助你构建聊天机器人、语音助手等等。而使用 dialogflow-fulfi...

    3 年前
  • npm 包 mip-billboardjs 使用教程

    介绍 mip-billboardjs 是一个基于 Billboard.js 封装的 MIP 组件，是一款优秀的数据可视化图表库。Billboard.js 内置了十几种常见的图表类型，并提供了简便的数据...

    3 年前
  • npm 包 @sardonyxwt/config-provider 使用教程

    在前端开发中，我们经常需要在不同的环境中使用不同的配置文件，如开发环境、测试环境、生产环境等。而随着项目规模的扩大，管理配置文件也逐渐变得复杂。为了解决这个问题，我们可以使用 npm 包 @sardo...

    3 年前
  • npm 包 add-counter 使用教程

    在前端开发中，我们常常需要对页面元素进行计数，以便实现一些动态效果或统计功能。而在这个过程中，使用 npm 包 add-counter 可以让这一过程更加便捷和高效。

    3 年前
  • npm 包 eslint-config-hapjs 使用教程

    1. 什么是 eslint-config-hapjs eslint-config-hapjs 是针对 Hap 应用开发的 eslint 规则集，基于 eslint-config-airbnb 和 es...

    3 年前

相关推荐

    暂无文章