重构线性地图开发总结

之前制作过一份简单的 minecraft (opens new window) 线性地图,现在基于 svg 重构了一版。现在是时候总结两者的区别了

之前的文章 canvas 地图开发总结 中最后提到

总感觉选 canvas 是个巨大失误,如果用 svg 的话...

但事实并不是我想象的样子,在 svg 版地图的开发中我还是遇到了些我意想之外的问题

# 选择框架

整体基于 svg 的话,只好将 svg 嵌入到 DOM 中。在重构之前 vue3 也正式发布,所以就计划使用 vue 来生成 DOM,一边也正式使用下 vue3。同时 vite 也适合项目的要求,所以就一同加入。但 hammer 不支持 ESM 模块导入,后来找到 @egjs/hammerjs,不但支持模块导入,而且还可以按需加载

所以整体的构架就是 svg vue 3 (opens new window) vite (opens new window) @egjs/hammerjs (opens new window)

# 开发

整体的逻辑和功能都和之前的版本保持一致,最明显的区别就是现在的地图只在最初绘制一次,避免 canvas 经过操作后需要重新绘制,增强拖动和缩放的性能

同时加入 css变量 与 自适应地浅色和深色模式,增加一些加载和过度动画

# svg 地图绘制

  • 通过 viewBox 来定义绘制的范围
  • 通过 rect 和 circle 标签绘制正方形边界与圆形边界
  • 通过 path 来实现自定义地图线路
  • 通过 text 标签显示文本信息

整体难度和 canvas 差不多

同时由于 svg 良好的交互性,我实现了在 canvas 中比较难实现的显示线路的 notes 信息的功能。当鼠标移动到有记录 notes 信息的线路上就会显示提示信息

# 缩放和拖动

由于要兼容手机和电脑,所以依然选择之前的方案。但由于地图只绘制一次,会造成文本的大小和线路的粗细不好随缩放变化,影响视觉。所以就利用 css 变量动态传值,动态改变其值

然后当数据较多和放大过大会引起性能严重下降,缩放和拖动卡到不行,最后不得已限制了缩放的最大程度。canvas 版本在这方面表现就更加优秀些

# 总结

  • svg 与 canvas 各有优势和缺点,最好按照需求选择
  • svg 更加适用于具有交互性的小型项目,比如可变色的图标、小型的图标动画或者按照路径移动的动画
  • canvas 更加适合数据变动比较大的项目
  • vite 使用很方便,开发启动和更新很快,没有配置文件也可以正常启动和打包
  • vue3 的 setup 和 组合式API 配合使用拆分代码使用还是挺容易
  • vue3 的 teleport 可以将内容发送到DOM的任意节点,包括 title 标签来实现动态改变网页标题。我似乎想到了一个黑科技用法
  • vue3 的 emits 无法与 多个根节点 同时使用

​地图 (opens new window)

查看源码 (opens new window)

开发 vue 组件库代码提示生成工具的总结
git单模板多项目的探索

git单模板多项目的探索

我在用单模板进行多项目开发的尝试和探索