一个可以展示一个人所有东西的类似导图的 canvas
- 只适合展示在 1920x1080 的屏幕上，3840x2160 最好
- 地址：https://kylebing.cn/tools/mine/
一、初衷
之前有一个想法，就是展示一个人所有的东西，铺在一个平面上。
我最初的想法其实是这样的，但一直没找到实现的方法就一直没开始：
二、实现过程
闲来无事，在研究 canvas 的相关方法时看到了 arcTo() 这个方法。
当研究明白之后就做了一个曲线，之后就发现完全可以延伸这个来实现之前的那个想法。
原理图
一条线，两条线，三条线，越做越多，就实现了现在这个样子
由于之前做过一些小东西，后来发现整个创作的过程如果记录下来还是挺有意思的，于是在这个诞生的过程中把每个变化都记录了下来。
它的缩略过程是这样的：GIF
它的详细过程是这样的：
参考：MDN CanvasRenderingContext2D 相关属性
总结：Canvas.arcTo() 的使用，画一条带圆角的线段
三、使用
github 地址：
我比较喜欢这个由数据转换成图像的过程，比自己拖动导图要更爽一些。
如果感觉有点意思想自己试一下，可以下载这个项目下来填入自己的数据试试看。
由于它是个 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 的屏幕上，因为我想让它一下子全出来，所以不会有滚动操作。
- 无法自动调整字体大小。
- 无法自动调整布局，需要手工指定显示多少列，每列之间的间隔是多少。
目前没什么其它想法了，等有了再慢慢修改，反正最终的目标还是第一条中的那个目标。
Select Language