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

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

一、初衷

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

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

mine

二、实现过程

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

原理图

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

2023-07-13 10 39 23

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

它的缩略过程是这样的：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},
    ]
},

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