一个可以展示一个人所有东西的类似导图的 canvas

• 只适合展示在 1920x1080 的屏幕上，3840x2160 最好
• 地址：https://kylebing.cn/tools/mine/

一、初衷

之前有一个想法，就是展示一个人所有的东西，铺在一个平面上。

我最初的想法其实是这样的，但一直没找到实现的方法就一直没开始：

二、实现过程

闲来无事，在研究 canvas 的相关方法时看到了 arcTo() 这个方法。
当研究明白之后就做了一个曲线，之后就发现完全可以延伸这个来实现之前的那个想法。

原理图

一条线，两条线，三条线，越做越多，就实现了现在这个样子

由于之前做过一些小东西，后来发现整个创作的过程如果记录下来还是挺有意思的，于是在这个诞生的过程中把每个变化都记录了下来。

它的缩略过程是这样的：GIF

它的详细过程是这样的：

• https://github.com/KyleBing/canvas-mine/discussions/1

参考：MDN CanvasRenderingContext2D 相关属性
总结：Canvas.arcTo() 的使用，画一条带圆角的线段

三、使用

github 地址：

• https://github.com/KyleBing/canvas-mine

我比较喜欢这个由数据转换成图像的过程，比自己拖动导图要更爽一些。
如果感觉有点意思想自己试一下，可以下载这个项目下来填入自己的数据试试看。 由于它是个 canvas ，所以如果你想保存它，可以直接鼠标右击选择保存图片。

它的参数是这样的：

 /** * CanvasMine * @param name {String}主题名 * @param attaches {[]} 内容 * @param columnCount {Number} 展示为多少列 * @param columnOffsetX {Number} 列之间的间隔 * @param isShowSerialNumber {Boolean} 是否显示序号 * @param isShowCanvasInfo {Boolean} 是否显示 canvas 信息 */ constructor( name, attaches, columnCount, columnOffsetX, isShowSerialNumber, isShowCanvasInfo ) 

内容数据是这样的：

{ name: '证件', isImportant: false, children: [ {name: '身份证', isImportant: false}, {name: '驾驶证 C1D', isImportant: false}, ] }, 

其它可修改的配置，源文件中都有对应的注释。

四、目前的不足

• 只显示在 1920x1080 的屏幕上，因为我想让它一下子全出来，所以不会有滚动操作。
• 无法自动调整字体大小。
• 无法自动调整布局，需要手工指定显示多少，每列之间的间隔是多少。

目前没什么其它想法了，等有了再慢慢修改，反正最终的目标还是第一条中的那个目标。