一個(gè)在線小白板

• 支持繪制矩形、菱形、三角形、圓形、線段、箭頭、自由畫筆、文字、圖片

• 繪制的圖形支持拖動(dòng)、縮放、旋轉(zhuǎn)、編組

• 支持垂直方向無限滾動(dòng)，一塊無限高度的白板

• 支持放大縮小

• 支持樣式設(shè)置

• 橡皮擦功能

• 支持導(dǎo)入、導(dǎo)出

• 支持前進(jìn)回退

• 本地存儲(chǔ)

• 滾動(dòng)超出后支持一鍵回到內(nèi)容

• 支持多選

• 支持網(wǎng)格模式

• 支持只讀模式，只讀模式支持隨意拖拽

• 支持快捷鍵

安裝

npm i tiny-whiteboard

使用

提供一個(gè)寬高不為0的且定位不為static的容器元素，然后實(shí)例化tiny-whiteboard。

import TinyWhiteboard from "tiny-whiteboard";

// 創(chuàng)建實(shí)例
let app = new TinyWhiteboard({
    container: container
});
// 接下來可以調(diào)用實(shí)例`app`的各種方法或者監(jiān)聽各種事件。
// 具體可以參考/app項(xiàng)目的示例。

限制

1.因?qū)崿F(xiàn)方式原因，元素多了可能會(huì)存在性能和卡頓問題，請三思而后用。

2.因元素點(diǎn)擊檢測實(shí)現(xiàn)方式原因，目前不支持貝塞爾曲線或橢圓之類的圖形。

坐標(biāo)轉(zhuǎn)換相關(guān)

項(xiàng)目內(nèi)涉及到坐標(biāo)轉(zhuǎn)換相關(guān)的比較復(fù)雜和凌亂，如果沒有搞清楚很容易迷失。大體上有以下這些：

1.鼠標(biāo)坐標(biāo)是相對屏幕的，需要轉(zhuǎn)換成相對容器的，也就是鼠標(biāo)坐標(biāo)的x、y需要減去容器和屏幕左側(cè)及上方的距離。

2.元素的坐標(biāo)都是相對容器坐標(biāo)系的，也就是屏幕坐標(biāo)系，原點(diǎn)在左上角，向右及向下為正方向，而畫布的坐標(biāo)在中心位置，也就是容器的中心點(diǎn)，也是向右及向下為正方向，所以繪制元素時(shí)需要把元素坐標(biāo)轉(zhuǎn)換成畫布坐標(biāo)，具體來說就是元素的x、y坐標(biāo)需要容器寬高的1/2。

3.畫布滾動(dòng)后，鼠標(biāo)滾動(dòng)時(shí)只支持垂直方向滾動(dòng)，只讀模式下可以鼠標(biāo)按住畫布進(jìn)行任意拖動(dòng)，滾動(dòng)只是單純記錄一個(gè)滾動(dòng)偏移量scrollX和scrollY，元素的實(shí)際坐標(biāo)是沒有變化的，只是在繪制元素的時(shí)候加上了scrollX和scrollY，向上和向右滾動(dòng)時(shí)scroll值為正，向下和向左滾動(dòng)為負(fù)，元素的x、y坐標(biāo)需要減去scrollX、scrollY。

4.畫布縮放后，縮放是應(yīng)用在畫布整體上，元素的實(shí)際位置和大小是沒有變化的，所以當(dāng)檢測位置時(shí)鼠標(biāo)的位置需要反向縮放才能對應(yīng)到元素的實(shí)際坐標(biāo)，具體來說就是鼠標(biāo)坐標(biāo)先轉(zhuǎn)成畫布坐標(biāo)，然后除以縮放值，最后再轉(zhuǎn)換屏幕坐標(biāo)。

5.當(dāng)元素旋轉(zhuǎn)后，元素的大小和位置的值是沒有變化的，只是通過rotate值進(jìn)行了旋轉(zhuǎn)，所以當(dāng)通過鼠標(biāo)位置檢測元素時(shí)，鼠標(biāo)的位置需要以元素的中心為旋轉(zhuǎn)中心，反向進(jìn)行旋轉(zhuǎn)，然后再進(jìn)行計(jì)算。

6.當(dāng)開啟網(wǎng)格時(shí)，坐標(biāo)會(huì)和網(wǎng)格對齊，也就是坐標(biāo)需要對網(wǎng)格的大小取余，然后減去該余數(shù)。

文檔

1.實(shí)例化

<div id="container"></div>

import TinyWhiteboard from "tiny-whiteboard";

// 創(chuàng)建實(shí)例
let app = new TinyWhiteboard({
    container: document.getElementById('container')
});

實(shí)例化選項(xiàng)

表格1-1 畫布狀態(tài)對象state的屬性

實(shí)例屬性

實(shí)例方法

undo()

回退。

redo()

前進(jìn)。

setActiveElementStyle(style)

為畫布當(dāng)前激活的元素設(shè)置樣式。

• style：樣式對象，object類型，具體屬性請參考表格1-2。

表格1-2 元素樣式對象style屬性

setSelectedElementStyle(style)

為當(dāng)前多選元素設(shè)置樣式。

• style：樣式對象，可參考表格1-2。

setCurrentElementsStyle(style)

為當(dāng)前激活或選中的元素設(shè)置樣式。

• style：樣式對象，可參考表格1-2。

cancelActiveElement()

移除當(dāng)前激活元素，即取消當(dāng)前激活元素的激活狀態(tài)。

deleteActiveElement()

從畫布中刪除當(dāng)前的激活元素。

deleteCurrentElements()

從畫布中刪除當(dāng)前激活或選中的元素。

copyCurrentElement()

復(fù)制當(dāng)前激活或選中的元素。只是復(fù)制操作，如果需要粘貼需要調(diào)用下面的pasteCurrentElement()方法。

cutCurrentElement()

剪切當(dāng)前激活或選中的元素。只是剪切操作，如果需要粘貼需要調(diào)用下面的pasteCurrentElement()方法。

pasteCurrentElement(useCurrentEventPos = false)

粘貼被復(fù)制或剪切的元素。

• useCurrentEventPos：是否使用鼠標(biāo)當(dāng)前的位置，默認(rèn)為false，偏移原圖形20px，傳true則粘貼到鼠標(biāo)當(dāng)前所在的位置。

copyPasteCurrentElements()

復(fù)制粘貼當(dāng)前元素。

exportImage(opt)

導(dǎo)出為圖片

• opt：導(dǎo)出選項(xiàng)，Object，具體屬性如下：

  • opt.type：導(dǎo)出圖片類型，String，默認(rèn)為image/png；

  • opt.renderBg：是否顯示背景，Boolean，默認(rèn)為true；

  • opt.useBlob：是否以blob類型導(dǎo)出，Boolean，默認(rèn)為DataURL類型，以blob類型導(dǎo)出時(shí)函數(shù)的返回值是一個(gè)promise；

  • opt.paddingX：繪制的水平內(nèi)邊距，Number，默認(rèn)為10像素；

  • opt.paddingY：繪制的垂直內(nèi)邊距，Number，默認(rèn)為10像素；

  • opt.onlySelected：（v0.1.7+）。是否僅導(dǎo)出被選中的元素，Boolean，默認(rèn)為false；

exportJson()

導(dǎo)出為json數(shù)據(jù)。

showGrid()

顯示網(wǎng)格。

hideGrid()

隱藏網(wǎng)格。

updateGrid(config)

更新網(wǎng)格配置。

• config：配置對象，Object，具體配置可參考表格1-1 的gridConfig屬性。

setEditMode()

設(shè)置為編輯模式。

setReadonlyMode()

設(shè)置為只讀模式。

setData(data, noEmitChange)

設(shè)置畫布數(shù)據(jù)，包括狀態(tài)數(shù)據(jù)及元素?cái)?shù)據(jù)。

• data：數(shù)據(jù)，一般是通過調(diào)用getData()方法獲取到的數(shù)據(jù)進(jìn)行回填，Object，包括以下兩個(gè)字段：

  • data.state：畫布狀態(tài)數(shù)據(jù)，Object，詳情請參考表格1-1。

  • data.elements：畫布上的元素?cái)?shù)據(jù)，Array。

  • noEmitChange：禁止觸發(fā)歷史記錄收集及change事件觸發(fā)，Boolean，默認(rèn)為false，某些場景下需要設(shè)置為true避免無限循環(huán)。

resize()

當(dāng)容器的大小變化后需要調(diào)用該方法。

updateState(data)

更新畫布狀態(tài)數(shù)據(jù)，只是更新狀態(tài)數(shù)據(jù)，不會(huì)觸發(fā)重新渲染，如有需要重新渲染或其他操作需要自行調(diào)用相關(guān)方法。

• data： 畫布狀態(tài)，Object，詳情可參考表格1-1。

updateCurrentType(drawType)

更新畫布當(dāng)前繪制模式。

• drawType：繪制模式，String，可選值如下表格所示：

deleteElement(element)

從畫布刪除某個(gè)元素。

copyElement(element, notActive = false, pos)

復(fù)制指定的元素。

• notActive：只復(fù)制而不激活，Boolean，默認(rèn)為false。

• pos：是否指定坐標(biāo)，否則會(huì)偏移原位置20像素，Object，格式為{x, y}。

empty()

清空元素。

zoomIn(num)

放大。

• num：放大值，Number，默認(rèn)為0.1。

zoomOut(num)

縮小。

• num：縮小值，Number，默認(rèn)為0.1。

setZoom(zoom)

設(shè)置指定縮放值。

• zoom：Number，0-1。

fit()

縮放移動(dòng)合適的值以適應(yīng)所有元素。

setBackgroundColor(color)

設(shè)置背景顏色。

getData()

獲取數(shù)據(jù)，包括狀態(tài)數(shù)據(jù)及元素?cái)?shù)據(jù)，可進(jìn)行持久化。

scrollTo(scrollX, scrollY)

滾動(dòng)至指定位置。

• scrollX, scrollY：滾動(dòng)距離，Number。

scrollToCenter()

滾動(dòng)至中心，即定位到所有元素的中心位置。

resetCurrentType()

復(fù)位當(dāng)前畫布繪制模式到選擇模式。

selectAll()

選中所有元素。

on(eventName, callback, context)

監(jiān)聽事件。事件請見下方表格：

emit(eventName, ...args)

觸發(fā)事件。

off(eventName, callback?)

解綁事件。

selectAll()

選中所有元素。

fit()

縮放以適應(yīng)所有元素。

updateActiveElementPosition(x, y)

v0.1.4+。更新當(dāng)前激活元素的位置。

updateActiveElementSize(width, height)

v0.1.4+。更新當(dāng)前激活元素的尺寸。

updateActiveElementRotate(rotate)

v0.1.4+。更新當(dāng)前激活元素的旋轉(zhuǎn)角度。

moveUpCurrentElement()

v0.1.5+。將當(dāng)前元素上移一層。

moveDownCurrentElement()

v0.1.5+。將當(dāng)前元素下移一層。

moveTopCurrentElement()

v0.1.5+。將當(dāng)前元素置于頂層。

moveBottomCurrentElement()

v0.1.5+。將當(dāng)前元素置于底層。

2.elements元素管理實(shí)例

可通過app.elements獲取到該實(shí)例。

實(shí)例屬性

實(shí)例方法

hasElements()

當(dāng)前畫布上是否有元素。

getElementsNum()

v0.1.5+。獲取當(dāng)前畫布上的元素?cái)?shù)量。

addElement(element)

添加元素。不會(huì)觸發(fā)渲染，需要手動(dòng)調(diào)用app.render.render()方法重新渲染。

unshiftElement(element)

v0.1.5+。向前添加元素。

insertElement(element, index)

v0.1.5+。添加元素到指定位置。

getElementIndex(element)

v0.1.5+。獲取元素在元素列表里的索引。

deleteElement(element)

刪除元素。不會(huì)觸發(fā)渲染，需要手動(dòng)調(diào)用app.render.render()方法重新渲染。

deleteAllElements()

刪除全部元素。不會(huì)觸發(fā)渲染，需要手動(dòng)調(diào)用app.render.render()方法重新渲染。

hasActiveElement()

是否存在激活元素。

setActiveElement(element)

替換激活的元素。不會(huì)觸發(fā)渲染，需要手動(dòng)調(diào)用app.render.render()方法重新渲染。

cancelActiveElement()

取消當(dāng)前激活元素。不會(huì)觸發(fā)渲染，需要手動(dòng)調(diào)用app.render.render()方法重新渲染。

createElement(opts = {}, callback = () => {}, ctx = null, notActive)

創(chuàng)建元素。不會(huì)觸發(fā)渲染，需要手動(dòng)調(diào)用app.render.render()方法重新渲染。

• opts：創(chuàng)建元素的選項(xiàng)；

• callback：回調(diào)函數(shù)，回調(diào)參數(shù)：element（創(chuàng)建的元素）；

• ctx：回調(diào)函數(shù)的上下文對象；

• notActive：是否不要激活該新創(chuàng)建的元素，默認(rèn)為false；

serialize(stringify)

序列化當(dāng)前畫布上的所有元素，可用來持久化數(shù)據(jù)。

• stringify：默認(rèn)為false，返回json對象類型，傳true則返回字符串類型。

createElementsFromData(elements = [])

根據(jù)元素?cái)?shù)據(jù)創(chuàng)建元素，即根據(jù)持久化的數(shù)據(jù)反向創(chuàng)建元素到畫布上。不會(huì)觸發(fā)渲染，需要手動(dòng)調(diào)用app.render.render()方法重新渲染。

3.render渲染類

可通過app.render獲取到該實(shí)例。

該實(shí)例的所有方法都已代理到app實(shí)例上，可以直接通過app.xxx調(diào)用。

4.coordinate坐標(biāo)轉(zhuǎn)換實(shí)例

可通過app.coordinate獲取到該實(shí)例。

實(shí)例方法

addScrollY(y)

加上畫布當(dāng)前垂直的滾動(dòng)距離。

addScrollX(x)

加上畫布當(dāng)前水平的滾動(dòng)距離。

subScrollY(y)

減去畫布當(dāng)前垂直的滾動(dòng)距離。

subScrollX(x)

減去畫布當(dāng)前水平的滾動(dòng)距離。

transformToCanvasCoordinate(x, y)

屏幕坐標(biāo)轉(zhuǎn)換成畫布坐標(biāo)。

transformToScreenCoordinate(x, y)

畫布轉(zhuǎn)換轉(zhuǎn)屏幕坐標(biāo)。

transform(x, y)

綜合轉(zhuǎn)換，屏幕坐標(biāo)轉(zhuǎn)畫布坐標(biāo)，再減去滾動(dòng)值。

windowToContainer(x, y)

相對窗口的坐標(biāo)轉(zhuǎn)換成相對容器的，用于當(dāng)容器非全屏的時(shí)候。

containerToWindow(x, y)

相對容器的坐標(biāo)轉(zhuǎn)換成相對窗口的，用于當(dāng)容器非全屏的時(shí)候。

scale(x, y)

屏幕坐標(biāo)在應(yīng)用畫布縮放后的位置。

reverseScale(x, y)

屏幕坐標(biāo)在反向應(yīng)用畫布縮放后的位置。

gridAdsorbent(x, y)

網(wǎng)格吸附。

5.event事件實(shí)例

可通過app.event獲取該實(shí)例。

實(shí)例方法

on(eventName, callback, context)

監(jiān)聽事件。事件請見下方表格：

• e：事件對象，非原始事件對象，為處理后的事件對象，格式如下：

  {
        originEvent: e,// 原始事件對象
        unGridClientX,
        unGridClientY,
        clientX,
        clientY
  }
  

  clientX和clientY是經(jīng)過了一系列轉(zhuǎn)換的：

  1.將相當(dāng)于瀏覽器窗口左上角的坐標(biāo)轉(zhuǎn)換成相對容器左上角

  2.如果畫布進(jìn)行了縮放，那么鼠標(biāo)坐標(biāo)要反向進(jìn)行縮放

  3.x、y坐標(biāo)加上了畫布水平和垂直的滾動(dòng)距離scrollX和scrollY

  4.如果開啟了網(wǎng)格，那么坐標(biāo)要吸附到網(wǎng)格上

  unGridClientX、unGridClientY和clientX、clientY的區(qū)別是沒有經(jīng)過第四步的處理。用于位置檢測等不需要吸附的場景。

  對于第三步來說，向下滾動(dòng)scroll值為正，而canvas坐標(biāo)系向下為正，所以要造成元素向上滾動(dòng)的效果顯示的時(shí)候元素的y坐標(biāo)需要減去scroll值，但是元素真實(shí)的y值并未改變，所以對于鼠標(biāo)坐標(biāo)來說需要加上scroll值，這樣才能匹配元素真實(shí)的y坐標(biāo)，水平方向也是一樣的。

• event：事件類的實(shí)例對象，存在以下屬性：

  屬性名稱	類型	描述
  isMousedown	Boolean	鼠標(biāo)是否按下
  mousedownPos	Object	按下時(shí)的鼠標(biāo)位置，格式見下方。
  mouseOffset	Object	鼠標(biāo)當(dāng)前位置和按下時(shí)位置的差值，格式見下方。
  lastMousePos	Object	記錄上一時(shí)刻的鼠標(biāo)位置，格式為{x, y}，經(jīng)過處理的坐標(biāo)。
  mouseDistance	Number	前一瞬間的鼠標(biāo)移動(dòng)距離。
  lastMouseTime	Number	記錄上一時(shí)刻的時(shí)間，時(shí)間戳格式。
  mouseDuration	Number	前一瞬間經(jīng)過的時(shí)間，單位為毫秒。
  mouseSpeed	Number	前一瞬間的鼠標(biāo)移動(dòng)速度，單位為px/ms。

  • mousedownPos屬性格式：

    {
          x: 0,// 經(jīng)過了以上4步轉(zhuǎn)換后的坐標(biāo)
          y: 0,
          unGridClientX: 0,// 經(jīng)過了除第4步的坐標(biāo)
          unGridClientY: 0,
          originClientX: 0,// 原始沒有經(jīng)過任何處理的坐標(biāo)
          originClientY: 0
    }
    

  • mouseOffset屬性格式：

    {
          x: 0,// 經(jīng)過了以上4步轉(zhuǎn)換后的坐標(biāo)差數(shù)據(jù)
          y: 0,
          originX: 0,// 原始沒有經(jīng)過任何處理的坐標(biāo)差數(shù)據(jù)
          originY: 0
    }
    

emit(eventName, ...args)

觸發(fā)事件。

off(eventName, callback?)

解綁事件。

6.cursor鼠標(biāo)樣式實(shí)例

可通過app.cursor獲取該實(shí)例。

實(shí)例方法

set(type = "default")

設(shè)置鼠標(biāo)指針樣式。

hide()

隱藏鼠標(biāo)指針。

reset()

復(fù)位鼠標(biāo)指針。

setCrosshair()

設(shè)置為 ? 字型。

setMove()

設(shè)置為 可移動(dòng) 狀態(tài)。

setEraser()

設(shè)置為橡皮擦樣式。

7.history歷史記錄管理實(shí)例

可通過app.history獲取該實(shí)例。

實(shí)例方法

undo()

后退。

redo()

前進(jìn)。

add(data)

添加一個(gè)歷史記錄數(shù)據(jù)，data一般是通過app.getData()獲取到的數(shù)據(jù)。

clear()

清空歷史記錄數(shù)據(jù)。

8.export導(dǎo)入導(dǎo)出實(shí)例

可通過app.export獲取該實(shí)例。

實(shí)例方法

exportImage(opt)

導(dǎo)出為圖片，參數(shù)詳見前面的文檔。

exportJson()

導(dǎo)出為json數(shù)據(jù)。

9.background背景設(shè)置實(shí)例

可通過app.background獲取該實(shí)例。

實(shí)例方法

addBackgroundColor()

添加背景顏色，背景色值為app.state.backgroundColor。

remove()

移除背景。

canvasAddBackgroundColor(ctx, width, height, backgroundColor)

給一個(gè)canvas設(shè)置背景顏色，非css樣式。

• ctx：canvas繪圖上下文。

10.selection多選實(shí)例

可通過app.selection獲取該實(shí)例。

實(shí)例方法

selectElements(elements = [])

選中指定元素。

copySelectionElements(pos)

復(fù)制粘貼當(dāng)前選中的元素。

• pos：是否指定粘貼的坐標(biāo)，否則會(huì)偏移原位置20像素，Object，格式為{x, y}。

getSelectionElements()

獲取當(dāng)前被選中的元素。

hasSelectionElements()

當(dāng)前是否存在被選中元素。

deleteSelectedElements()

從畫布刪除當(dāng)前選中的元素。

setSelectedElementStyle(style)

為當(dāng)前選中的元素設(shè)置樣式。

11.mode模式實(shí)例

可通過app.mode獲取該實(shí)例。

實(shí)例方法

setEditMode()

設(shè)置為編輯模式。

setReadonlyMode()

設(shè)置為只讀模式。

12.imageEdit圖片選擇實(shí)例

可通過app.imageEdit獲取該實(shí)例。

13.textEdit文字編輯實(shí)例

可通過app.textEdit獲取該實(shí)例。

14.keyCommand快捷鍵實(shí)例

可通過app.keyCommand獲取該實(shí)例。

實(shí)例屬性

實(shí)例方法

bindEvent()

綁定keydown事件。

unBindEvent()

解綁keydown事件。如果你的事件會(huì)和快捷鍵沖突，那么可以暫時(shí)調(diào)用該方法解綁快捷鍵的keydown事件。

addShortcut(key, fn, ctx)

添加快捷鍵命令。

• key：快捷鍵，允許三種組合方式：單個(gè)按鍵（如Enter）、或（Tab | Insert）、與（Shift + a），具體的按鍵名稱可以app.keyCommand.keyMap查看。

• fn：快捷鍵對應(yīng)的執(zhí)行函數(shù)。

• ctx：函數(shù)的上下文。

removeShortcut(key, fn)

移除快捷鍵命令。

15.工具方法

可以通過如下方式獲取到內(nèi)置的工具方法：

import TinyWhiteboard from "tiny-whiteboard";

TinyWhiteboard.utils.xxx

createCanvas(width,height,opt = { noStyle: false, noTranslate: false, className: '' })

創(chuàng)建canvas元素。

• width：寬度

• height：高度

• opt：選項(xiàng)

  • opt.noStyle：是否不需要設(shè)置樣式，如果需要的話，那么會(huì)給canvas元素加上left=0和top=0的絕對定位樣式；
  • noTranslate：是否不需要將畫布原點(diǎn)移動(dòng)到畫布中心；
  • className：添加到畫布元素上的類名；

getTowPointDistance(x1, y1, x2, y2)

計(jì)算兩點(diǎn)之間的距離。

getPointToLineDistance(x, y, x1, y1, x2, y2)

計(jì)算點(diǎn)到直線的距離。

checkIsAtSegment(x, y, x1, y1, x2, y2, dis = 10)

檢查是否點(diǎn)擊到了一條線段。

• dis：點(diǎn)距離線段多少距離內(nèi)都認(rèn)為是點(diǎn)擊到了；

radToDeg(rad)

弧度轉(zhuǎn)角度。

degToRad(deg)

角度轉(zhuǎn)弧度。

getTowPointRotate(cx, cy, tx, ty, fx, fy)

計(jì)算中心點(diǎn)相同的兩個(gè)坐標(biāo)相差的角度數(shù)。

getRotatedPoint(x, y, cx, cy, rotate)

獲取坐標(biāo)經(jīng)指定中心點(diǎn)旋轉(zhuǎn)指定角度的坐標(biāo)，順時(shí)針還是逆時(shí)針rotate傳正負(fù)即可。

getElementCenterPoint(element)

獲取元素的中心點(diǎn)坐標(biāo)。

• element：元素，Object，必要的字段如為{ x, y, width, height }；

getElementCornerPoint(element, dir)

獲取元素的四個(gè)角坐標(biāo)。

• element：元素，Object，必要的字段如為{ x, y, width, height }；

• dir：要獲取的哪個(gè)角，可選項(xiàng)為：topLeft、topRight、bottomRight、bottomLeft；

getElementRotatedCornerPoint(element, dir)

獲取元素旋轉(zhuǎn)后的四個(gè)角坐標(biāo)。參數(shù)同上。

checkPointIsInRectangle(x, y, rx, ry, rw, rh)

判斷一個(gè)坐標(biāo)是否在一個(gè)矩形內(nèi)。第三個(gè)參數(shù)可以直接傳一個(gè)帶有x、y、width、height屬性的元素對象。

getBoundingRect(pointArr = [], returnCorners = false)

獲取多個(gè)點(diǎn)的外包圍框。

返回?cái)?shù)據(jù)：

{
  x,
  y,
  width,
  height,
}

• pointArr：點(diǎn)數(shù)組，數(shù)組的每一項(xiàng)的格式為：[x, y]；

• returnCorners：v0.1.4+。以四個(gè)角坐標(biāo)的形式返回：

[
  [x0, y0],
  [x1, y1],
  [x2, y2],
  [x3, y3],
]

deepCopy(obj)

簡單深拷貝，只能用于拷貝純粹的對象。

getFontString(fontSize, fontFamily)

拼接canvas文字字體字號(hào)字符串。

splitTextLines(text)

將文本切割成行，返回一個(gè)數(shù)組。

getTextActWidth(text, style)

計(jì)算文本的實(shí)際渲染寬度。

• style：對象類型，包含fontSize和fontFamily兩個(gè)屬性；

getWrapTextMaxRowTextNumber(text)

計(jì)算換行文本的最長一行的文字?jǐn)?shù)量。

throttle(fn, ctx, time = 100)

節(jié)流函數(shù)。

downloadFile(file, fileName)

下載文件。

getElementCorners(element)

獲取元素的四個(gè)角的坐標(biāo)，應(yīng)用了旋轉(zhuǎn)之后的，返回一個(gè)數(shù)組。

getMultiElementRectInfo(elementList = [])

獲取多個(gè)元素的最外層包圍框信息。返回{minx,maxx,miny,maxy};

createImageObj(url)

創(chuàng)建圖片對象，即new Image()的圖片對象，返回promise。

16.圖形繪制工具方法

可以通過如下方式獲取到內(nèi)置的圖形繪制工具方法：

import TinyWhiteboard from "tiny-whiteboard";

TinyWhiteboard.draw.xxx

drawRect(ctx, x, y, width, height, fill = false)

繪制矩形。

• ctx：canvas繪圖上下文。

• fill：是否進(jìn)行填充。

drawDiamond(ctx, x, y, width, height, fill = false)

繪制菱形。

drawTriangle(ctx, x, y, width, height, fill = false)

繪制三角形。

drawCircle(ctx, x, y, r, fill = false)

繪制圓形。

drawLine(ctx, points)

繪制折線。

• points：折線的端點(diǎn)列表。Array，數(shù)組的每一項(xiàng)為[x, y]。

drawArrow(ctx, pointArr)

繪制箭頭。

pointArr：箭頭的首尾兩個(gè)頂點(diǎn)坐標(biāo)，Array，數(shù)組的每一項(xiàng)為[x, y]。

drawLineSegment(ctx, mx, my, tx, ty, lineWidth = 0)

繪制線段。

• lineWidth：線寬

drawText(ctx, textObj, x, y)

繪制文字。

• textObj：文本數(shù)據(jù)，Object，字段如下：
  • textObj.text：文本字符串；
  • textObj.style：文本屬性，Object，需包含三個(gè)字段：fontSize、fontFamily、lineHeightRatio（行高，需為數(shù)字類型，比如1.5，代表行高1.5倍）；

drawImage(ctx, element, x, y, width, height)

繪制圖片。

element：圖片數(shù)據(jù)，Object，字段如下：

element.ratio：圖片的長寬比；

element.imageObj：要繪制到canvas上的圖片對象或其他能被canvas繪制的對象；

17.圖形點(diǎn)擊檢測工具方法

可以通過如下方式獲取到內(nèi)置的圖形點(diǎn)擊檢測工具方法：

import TinyWhiteboard from "tiny-whiteboard";

TinyWhiteboard.checkHit.xxx

checkIsAtMultiSegment(segments, rp)

檢測是否點(diǎn)擊到折線上。

• segments：折線的端點(diǎn)數(shù)組，Array，數(shù)組的每一項(xiàng)為[fx, fy, tx, ty]，即線段的首尾兩個(gè)坐標(biāo)；

• rp：要檢測的點(diǎn)，格式為{x, y}；

checkIsAtRectangleEdge(element, rp)

檢測是否點(diǎn)擊到矩形邊緣。

• element：Object，需包含字段{ x, y, width, height }

checkIsAtRectangleInner(element, rp)

檢測是否點(diǎn)擊到矩形內(nèi)部。

checkIsAtCircleEdge(element, rp)

檢測是否點(diǎn)擊到圓的邊緣，圓的半徑為width和height中的較小值的一半。

checkIsAtLineEdge(element, rp)

檢測是否點(diǎn)擊到線段邊緣。

• element：Object，格式如下：

{
    pointArr: [
        [x, y],
        ...
    ]
}

checkIsAtFreedrawLineEdge(element, rp)

檢測是否點(diǎn)擊到自由畫筆圖形邊緣。element字段同上。

checkIsAtDiamondEdge(element, rp)

檢測是否點(diǎn)擊到菱形邊緣。

• element：Object，需包含字段{ x, y, width, height }

checkIsAtTriangleEdge(element, rp)

檢測是否點(diǎn)擊到三角形邊緣。

• element：Object，需包含字段{ x, y, width, height }

checkIsAtArrowEdge(element, rp)

檢測是否點(diǎn)擊到箭頭邊緣。

• element：Object，格式如下：

{
    pointArr: [
        [x1, y1],
        [x2, y2]
    ]
}

18.內(nèi)置元素類

可以通過以下方式獲取到某個(gè)元素類：

import TinyWhiteboard from "tiny-whiteboard";

TinyWhiteboard.elements.xxx

目前存在以下元素類：

基礎(chǔ)元素實(shí)例屬性

基礎(chǔ)元素實(shí)例方法

on(eventName, callback, context)

v0.1.4+。監(jiān)聽元素事件。事件請見下方表格：

serialize()

序列化元素，返回的數(shù)據(jù)可用于進(jìn)行持久化及回顯。

render()

渲染元素。

setStyle(style = {})

設(shè)置元素的繪圖樣式。

move(ox, oy)

移動(dòng)元素，在元素當(dāng)前的位置上累加ox、oy。

updatePos(x, y)

更新元素的位置。

updateSize(width, height)

更新元素的寬高。

updateRect(x, y, width, height)

更新元素的位置及寬高。

offsetRotate(or)

旋轉(zhuǎn)元素，在元素當(dāng)前的旋轉(zhuǎn)角度上累加or角度。

rotateByCenter(rotate, cx, cy)

根據(jù)指定中心點(diǎn)旋轉(zhuǎn)元素的各個(gè)點(diǎn)。對于由多個(gè)點(diǎn)坐標(biāo)組成的元素來說是修改其pointArr坐標(biāo)，對于其他元素來說是修改其x、y坐標(biāo)。

isHit(x, y)

檢測該坐標(biāo)是否能擊中該元素。

getEndpointList()

v0.1.4+。獲取圖形應(yīng)用了旋轉(zhuǎn)之后的端點(diǎn)列表?？捎糜谟?jì)算元素的外包圍框數(shù)據(jù)。

License

MIT