AlgoMotion

用于算法可视化的轻量级Canvas绘制工具

Install

npm i algomotion

Demo

• Array(数组) Here
• Tree(树结构) Here
• Graph(图) Here

API

General

配置项

• Set

  名称	含义（涉及数字，单位均为px）	默认值
  height	Canvas高度	250
  width	Canvas宽度	800
  blockMaxSize	数字块(最大)边长(圆形直径)	50
  emphasisColor	强调块背景色	#bedce3
  emphasisTextColor	强调块字体颜色	#1c474d
  textColor	普通块字体颜色	#eefcf5
  fillColor	普通块背景色	#14cdc8
  barrierColor	Barrier的颜色	red
  font	数字大小	20
  hidpi	HiDPI支持	true
  fps	动画帧率	60
  speed	动画执行速度	1.0
  motion	是否使用movesReader读取mvs中的操作步骤	false
  postion	启用motion时，绑定mvs执行的进度	undefined
  staticTime	定义一些静止动作的持续时间(如强调、空白动作等)(单位为浩渺)	800

position使用方法：

• Vue

let value = ref(0);
let set = {
	position: [value]
}

• 普通JS请查看Demo源码，postion会在控制台打印。

• info

  名称	含义
  dta	放置数据
  mvs	放置操作步骤

方法

名称	作用
init(set,info,canvas)	初始化函数
destory()	析构函数
pause(boolean)	控制暂停继续动画
setMovesReader(func)	设定mvs处理器，处理器为一个函数，默认详见：默认MovesReader。
setPosition(idx)	控制关键帧的位置
clear()	清除所有的强调状态和标记

Array

配置项

• set

  名称	含义（涉及数字，单位均为px）	默认值
  maxGap	块最大间隔	25
  blockRadius	块圆角半径	5
  motionOffset	动画的上下偏移范围	50

方法

名称	作用
swapBlock(idx1,idx2)	提供index，展示交换动画
emphasizeBlock(idx,boolean)	提供index和一个布尔值，用于切换是否强调展示
addBarrier(arr)	提供一个数组，数组内为index，用于在对应块之前放置分隔标记（兼容旧参数：仅一个数字）
removeBarrier(arr)	提供一个数组，数组内为index，用于在对应块之前删除分隔标记（兼容旧参数：仅一个数字）
addBlock(idx,num)	添加一个新数字块
removeBlock(idx)	删除一个数字块

Tree

配置项

• Set

  名称	含义（涉及数字，单位均为px）	默认值
  maxLayerHeight	树每一层的最大高度	70
  emphasisLineColor	强调连线颜色	#1c474d

  另外，树枝的颜色为fillColor，交换(swap)时会变为emphasisTextColor。

• Info

  树结点的索引，是其在完美二叉树中的位置，从0开始。

方法

名称	作用
swapNode(idx1,idx2)	提供index，展示交换动画
emphasizeNode(idx,boolean)	提供index和一个布尔值，用于切换是否强调展示
addNode(idx,num)	添加一个新结点
removeNode(idx)	删除一个结点

Graph

基于较为原始的力引导布局的无向图。

配置项

• Set

  名称	含义（涉及数字，单位均为px）	默认值
  blockSize	每个结点的大小(替代原blockMaxSize)	40
  emphasisLineColor	强调连线颜色	#1c474d

• Info

  名称	含义
  rel	放置关系矩阵(二维)[建议仅填充上三角]

方法

名称	作用
emphasizeNode(idx,boolean)	提供index和一个布尔值，用于切换是否强调展示结点
emphasizeLink(idx1, idx2, boolean)	提供index和一个布尔值，用于切换是否强调展示边

关于默认的MovesReader

• Array

  支持的mvs格式(8种)：

  get(index),swap(index1,index2),add(idx,number),remove(index),barrier(arr),unbarrier(arr),clear(),blank()

  其中：

  • get(index)为高亮一次第index个元素
  • barrier(arr)在第index个元素前添加标记，即Demo中的AddBarrier，可以传递多个参数作为index，如barrier(1,2)
  • unbarrier(arr)用法同上，但是用以删除标记
  • clear()为清除所有barrier标记
  • blank()为什么都不做，等待一次，用于配合其他动作

• Tree

  支持的mvs格式(5种)：

  get(index),swap(index1,index2),insert(index,number),remove(index),blank()

  其中：

  • index为结点在完全二叉树中的位置
  • blank()为什么都不做，等待一次，用于配合其他动作

• Graph

  支持的mvs格式(6种)：

  emp(index),unemp(index),link(index1,index2),unlink(index1,index2),clear(),blank()

  其中：

  • emp/unemp为切换结点的强调展示状态

  • link/unlink为切换边的强调展示状态

  • blank()为什么都不做，等待一次，用于配合其他动作