canvas-mine 一个类似导图的东西，展示自己的所有东西

[kylebing]

一个可以展示一个人所有东西的类似导图的 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 的屏幕上，因为我想让它一下子全出来，所以不会有滚动操作。
• 无法自动调整字体大小。
• 无法自动调整布局，需要手工指定显示多少列，每列之间的间隔是多少。

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

[senjyougahara]

可以加个缩放拖拽功能，默认展示所有导图，可以进行缩放操作，拖拽移动

[kylebing]

@senjyougahara #1 这个不会有，只用于查看，不进行操作，也不会有滚动。就只当个图片用。

[bangbo]

挺有意思的😄

[CHTuring]

我用 markmap-lib 实现过一个同样的功能，不过不是手写

[CHTuring]