网页可视化元素操作——svg.js

    最近公司的新需求是做一个可以自己编辑页面元素形状，旋转，拖动以及填充图片的功能，经查觉得svg.js是一个较好的实现方式，配合插件svg.draggable.js 可实现元素的拖动。

    

 

踩过的坑：

1  项目中需要用到最新的版本，旧版和新版初始化图像的用法不一样  我用的svg.js ：3.0.13  svg.draggable.js: 3.0.2

需要找到对应的版本文档，版本过低打包后也会出现问题

2、用svg画扇形需要了解每一个参数的用意  path参数文档

<path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
        fill="yellow" stroke="blue" stroke-width="5" />

M表示起点，随后跟着的 v或者h 分别代表以当前点垂直/水平移动的距离，a表示以150，150 为半径画弧，要特别注意随后的三个数，因为有两个点可以画出4个弧，扇形参数

3 可以用对象数组记录当前页面中的每一个元素，包括其类型，宽高，方向，从而通过后端存储信息，在下次打开页面的时候恢复之前的编辑状态

4 svg元素没有dom元素的z-index 要想设置拖动目标元素设置为最上层无法实现，可以通过双击删除当前元素，在当前位置生成新的元素，这样就是最上层了，单击操作和拖动操作有冲突，不建议如此实现