用echarts生成的华容道游戏最优解状态关系图 (2022-11-17)

发布时间 2022-11-17 16:30:58

某位朋友研究华容道(又名三国华容道，一种滑块类益智游戏), 于是受到启发, 做一个可视化的状态关系图。

不废话, 直接上图

每个节点的图案不同, 且是动态生成的, 给节点数据的 symbol 赋值为 ‘path://M 0 0 L 1 1…’ 这样的 svg path data 字符串就可以了, echarts 会填充这个路径作为图标, 这个路径字符串由程序动态批量生成.

使用中也发现一些小问题，比如

1. 很难精准控制图形的大小和位置，虽然有相关的配置选项，但echarts仍然会进行自动调整，有时并不符合期望。
2. 缩放与拖拽的鼠标响应区不是很合理，不是所有的空白区域都能同样操作，画面中有些位置，用户不能直观的获知当前鼠标位置是否位于响应区域之内。

如果要更精准的生成这种图，最好是直接代码生成svg。