基于Web的svg编辑器（2）——画布

实现过程中，参考了一点点 svg-edit 开源项目的网页效果。但它的代码实现我并没有深入研究了解，因为它的功能非常多，代码也不好看懂。

如果你做的svg编辑器很复杂，要做的很深入，建议还是不要使用 SVG.js，因为这个库封装度很高，会做一些奇怪的操作，有时候需要针对这个 SVG.js 做 hack，非常不优雅。我的建议是自己封装，如果你要开发完成度很高的编辑器的话。

因为要经常操作 DOM，jquery 还是必要的。

本文在不断修订中。

DOM结构

编辑器的 DOM 结构（从父节点到子节点）：

1. div#workarea 对应编辑器视口，是编辑器的最外层div，用于限定编辑器的可视区域。

2. div#editor-container 作用是容器，除了放置下面提到的 svg#canvas外，还可以放置一些绝对定位的 div，使其悬浮在画布上方。

3. svg#canvas 画布，作用是显示轮廓线、选中框、锚点控制点等非svg真正内容的显示。

4. svg#svgcontent svg 的真正内容。该元素位于 svg#canvas 的中心位置。

5. svg#canvasBg 和 svg#svgcontent 为兄弟节点

div#workarea

div#workarea 必须为绝对定位，因为我们需要用到它的 widht/height 做坐标换算。为了显示滚轮，你还需要设置 overflow: auto。

div#editor-container

作用是可以放一些 div 块。

svg#canvas

作为根部svg，理论上 id 起名为 svgroot 比较好，不过因为写了太多代码了，已经不好改了（不好改也说明我的架构没写好）。canvas 理论上只是 svgcontent 的背景而已，怪我没有命名好。

canvas 负责显示轮廓线、选中框、拖拽控制点等。之所以不放到 svg#svgcontent 里显示，是因为后者作为我们绘制的 svg 的本体的存在，在编辑 svg 的过程中，需要做画布缩放功能（通过 viewBox 和 width/height 实现），缩放后的 stroke 的宽度都是会发生变化的。而轮廓线这类 高亮线 最好不做粗细变化，故而将它们的显示放到 svg#canvas。

当然可以考虑通过将 vector-effect 属性设置为 non-scaling-stroke，使得 stroke 的宽度在缩放后不改变。但是，缩放控制点是 rect 或者 cirle 元素，它们不适合随着画布放大缩小而变得非常大或者小到无法选中。

svg#svgcontent

这个就是 svg 编辑器的核心。所有元素都会绘制到这个内嵌 svg 上。

注意要设置overflow 属性为 visible，否则超出高宽的部分将无法显示出来。

此外，如果考虑后期添加 “图层” 功能，那就需要创建一个 g#layout_1 元素，绘制的图形都放在这里。

svg#canvasBg

这个 svg 元素的作用是显示背景色，在这个 svg 元素的高宽需要和 svg#svgcontent 相等。此外这个 svg 下，有一个高度和高度都是 100% 的 rect，它的 fill 属性设置的颜色值，即为背景色。

当然我们可以把这个 rect 元素放到 svg#svgcontent 下，作为后者第一个元素。不过这样做选中元素的排布下移功能（类似Photoshop的图层位置改变），要注意不要跑到这个 rect 的下面去了。此外导入时，要给导入的 svg 元素的第一个元素钱追加这个 rect。导出时，也同样道理，要删除掉这个 rect 再导出。

初始化

为了方便描述，下面我将 svg#svgcontent 叫做 draw（因为它负责真正的绘制任务），将 svg#canvas 叫做 canvas（作为舞台的存在）。

在 draw 初始化时，就要给它设置 width/height， viewBox 设置为 0 0 width height。

然后我们想让 draw 位于 canvas 的正中央。将 svg#canvas 的宽高设为 svg#svgcontent 的宽高的3倍（当然你可以设置为其他的倍数），然后修改 draw 的 x 和 y 属性为 canvas 的宽高减去 draw 的宽高，并除以2得到的值。这样，draw 就能居中了。不过我们还想让 draw 的中心点同时也能位于 视口 的中心点上。

这时我们就需要修改 div#workarea 的 scrollTop 和 scrollLeft 属性了。scrollLeft 的值为：(canvas.width - workarea.width)/ 2，scrollTop 同理。

画布功能

画布缩放

通过修改 draw 的 height 和 width 来实现缩放。

height 和 width 的值必须为 viewBox 的后两个参数的相同倍数。此外，在修改 draw 的宽高的同时，要修改 draw 的 x 和 y，canvas 的宽高，以及 workarea 的 scrollTop。

说到缩放，就会涉及到缩放中心，缩放中心可以为下面三种情况：

1. 视口中心点（通过输入缩放倍率的方式，且没有选中任何元素）
2. 光标的位置（通过滚轮的方式，放大镜工具）
3. 选中的元素的中心位置（有元素被选中，且通过输入的方式缩放画布）

要做到按缩放中心进行缩放，还要考虑 workarea 的计算。

画布移动功能

待完成