Div & Svg可视化探索笔记
发布网友
发布时间：2024-05-14 08:17
共1个回答
热心网友
时间：2024-06-21 21:37
最近因为工作需要做了点HTML5可视化研究如下
为什么没有字体颜色作为一个设计师很不爽
第一次发文有写错的地方还请诸位高手多多包涵
设想，要在页面中生成大量的简单图形，比如10万个方块，并对它们进行拖拽操作。
基本思路有三种方式，传统Div，Svg，与Canvas。
为了加拖拽，暂时没有用canvas。
因为canvas无法生成dom节点，不存在id这种属性，需要通过判断鼠标位置来获取元素再进行操作。虽然写个isMouseinObj()的function也不是不行，但总觉得以后针对某对象单独处理会夜长梦多（主要还是懒）。。。不过从生成图形角度讲，canvas理论上是最快的。
因为贪生怕死担心Dom过多死机，准备先分区生成方块，于是：
一个简图，整体划分如下，设两个input框的值分别为m, n，每个蓝块包括n个绿块。点击每个蓝块可在下方生成n个绿块。
点击GenAll可一次性生成m*n个绿块。点击Drag可对绿块进行拖拽。
模拟开始。
首先是用div模拟方块。因为比较熟悉写起来也简单。
Div的拖拽方式可以分成两种。
Jquery-ui的draggble还有很多其他参数，请参考api文档。
现在假定一种新情形：绿色方块只能拖拽到虚线框之内。
默认情况下，Html元素均不可拖拽，所以需要设置拖拽元素的draggable属性为true。同时，默认无法将元素放置到其他元素中，所以需要event.preventDefault()设置允许放置。
本例中，为class为abox的绿方块添加draggable。
为class为wrap的虚线框添加preventDefault。
之后通过dataTransfer传输数据，实现box的移动。
由于Svg也是直接在Html中生成Dom节点，理论上Div所能实现的功能它都可以实现，并且绘图效果更佳。
然后生成Svg元素，并设置其属性。
循环生成Svg方块并添加拖拽属性。
但这种方式有个问题，就是——慢。当生成仅10000个方块时，效率便低的不可估量。
然而Svg无法应用Html5原生的Drag and Drop事件。
相比于引用插件，这样的效率提高了不少。
从结果上看，在数量少时，针对方块这种简单图形的简单操作Div和Svg均可胜任。然而设置了总共生成100000个方块，发现单从生成的角度，Svg的渲染用时大约是Div的1/2（这里指Dom中直接绘制Svg而非通过js插件绘制Svg）。
加上拖拽功能后，用Html5原生拖放事件的Div，及用鼠标事件的Svg，明显快快快快于应用js插件拖放的效率。于是乎插件虽然强大但对于大量节点的处理实在过于缓慢。
于是在图形化上还是应用Svg更舒畅一些。
但有一个尚未解决的问题。
应用鼠标事件拖动Svg，当鼠标移动过快时，mousemove事件无法触发，导致移动效果不能实现。粗略查了下似乎可以添加透明背景层接收所有触发事件，不过还没有深入研究。
这篇就到此吧。等解决了mousemove的bug再更新后续。
(´・ω・`)
