mind-map/web/src/pages/Doc/zh/utils/index.md

内置工具方法

基础工具方法

引用：

import {walk, ...} from 'simple-mind-map/src/utils'

方法

walk(root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0, index = 0)

深度优先遍历树

root：要遍历的树的根节点

parent：父节点

beforeCallback：前序遍历回调函数，回调参数为：root, parent, isRoot, layerIndex, index

afterCallback：后序遍历回调函数，回调参数为：root, parent, isRoot, layerIndex, index

isRoot：是否是根节点

layerIndex：节点层级

index：节点在同级节点里的索引

示例：

walk(tree, null, () => {}, () => {}, false, 0, 0)

bfsWalk(root, callback)

广度优先遍历树

resizeImgSize(width, height, maxWidth, maxHeight)

缩放图片的尺寸

width：图片原本的宽

height：图片原本的高

maxWidth：要缩放到的宽

maxHeight：要缩放到的高

maxWidth和maxHeight可以同时都传，也可以只传一个

resizeImg(imgUrl, maxWidth, maxHeight)

缩放图片，内部先加载图片，然后调用resizeImgSize方法，返回一个promise

simpleDeepClone(data)

极简的深拷贝方法，只能针对全是基本数据的对象，否则会报错

copyRenderTree(tree, root)

复制渲染树数据，示例：

copyRenderTree({}, this.mindMap.renderer.renderTree)

copyNodeTree(tree, root, removeActiveState, keepId)

• removeActiveState：Boolean，默认为false，是否移除节点的激活状态

• keepId：v0.4.6+，Boolean，默认为false，是否保留被复制节点的id，默认会删除id防止节点id重复，但是对于移动节点的场景，节点原id需要保留

复制节点树数据，主要是剔除其中的引用node实例的_node，然后复制data对象的数据，示例：

copyNodeTree({}, node)

imgToDataUrl(src)

图片转成dataURL

downloadFile(file, fileName)

下载文件

throttle(fn, time = 300, ctx)

节流函数

asyncRun(taskList, callback = () => {})

异步执行任务队列，多个任务是同步执行的，没有先后顺序

degToRad(deg)

v0.2.24+

角度转弧度

camelCaseToHyphen(str)

v0.2.24+

驼峰转连字符

joinFontStr({ italic, bold, fontSize, fontFamily })

v0.3.4+

拼接css字体的font属性值

measureText(text, { italic, bold, fontSize, fontFamily })

v0.3.4+

测量文本的宽高，返回值：

{ width, height }

在canvas中模拟css的背景属性

引入：

import drawBackgroundImageToCanvas from 'simple-mind-map/src/utils/simulateCSSBackgroundInCanvas'

使用：

let width = 500
let height = 500
let img = '/1.jpg'
let canvas = document.createElement('canvas')
canvas.width = width
canvas.height = height
drawBackgroundImageToCanvas(ctx, width, height, img, {
  backgroundRepeat: 'repeat-y',
  backgroundSize: '60%',
  backgroundPosition: 'center center'
}, (err) => {
  if (err) {
    // 失败
  } else {
    // 成功
  }
})