npm 包 react-sketch-book 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

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

安装

npm install react-sketch-book --save

使用

基础用法

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

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

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

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