當前位置:吉日网官网 - 傳統美德 - Div & Svg可視化探索筆記

Div & Svg可視化探索筆記

最近因為工作需要做了點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再更新後續。

(?ω?`)

  • 上一篇:焦慮癥的治療方法有哪些?
  • 下一篇:農村黨建工作有哪些?
  • copyright 2024吉日网官网