algomotion v0.7.2

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	放置操作步骤

方法

Array

配置项

• set

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

方法

Tree

配置项

• Set

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

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

• Info

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

方法

Graph

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

配置项

• Set

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

• Info

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

方法

关于默认的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()为什么都不做，等待一次，用于配合其他动作