Div & Svg visual exploration notes

Recently, I need to do some HTML5 visualization research because of my work. Why is there no font color? As a designer, I am very unhappy. This is my first post. I have made some mistakes. Please forgive me for your understanding. I want to generate a large number of simple graphics on the page, such as 10

Thousands of blocks and drag and drop them.

There are three basic ways of thinking, traditional Div, Svg, and Canvas.

In order to add drag and drop, canvas is not used for the time being.

Because canvas cannot generate dom nodes and there is no attribute such as id, you need to determine the mouse position to obtain the element before operating it.

Although it is not impossible to write a function of isMouseinObj(), I always feel that dealing with a certain object individually in the future will be a long night (mainly because of laziness).

.

.

However, from the perspective of generating graphics, canvas is theoretically the fastest.

Because I am afraid of death and worry that the Dom will crash too much, I plan to partition and generate blocks first, so: A simple diagram, the overall division is as follows, assume that the values ????of the two input boxes are m, n respectively, and each blue block includes n green blocks.

Click on each blue block to generate n green blocks below.

Click GenAll to generate m*n green blocks at one time.

Click Drag to drag the green block.

The simulation begins.

The first is to use div to simulate the box.

Because it is familiar and easy to write.

Div dragging methods can be divided into two types.

Jquery-ui's draggble has many other parameters, please refer to the api documentation.

Now assume a new situation: the green square can only be dragged within the dotted box.

By default, Html elements are not draggable, so you need to set the draggable attribute of the draggable element to true.

At the same time, elements cannot be placed into other elements by default, so event.preventDefault() needs to be set to allow placement.

In this example, add draggable to the green block with class abox.

Add preventDefault for the dotted box with class wrap.

Then the data is transferred through dataTransfer to realize the movement of the box.

Since Svg also generates Dom nodes directly in Html, in theory it can realize all the functions that Div can achieve, and the drawing effect is better.

Then generate the Svg element and set its properties.

Loop to generate Svg blocks and add drag properties.

But there is a problem with this method: it is slow.

When only 10,000 blocks are generated, the efficiency is immeasurably low.

However, Svg cannot use Html5's native Drag and Drop events.

Compared with referencing plug-ins, this efficiency is much improved.

Judging from the results, when the number is small, both Div and Svg can be used for simple operations on simple shapes such as blocks.

However, the total number of generated blocks is set to 100,000, and it is found that from the perspective of generation alone, the rendering time of Svg is about 1/2 of that of Div (this refers to drawing Svg directly in the Dom instead of drawing Svg through the js plug-in).

After adding the drag and drop function, Div using Html5 native drag and drop events and Svg using mouse events are obviously faster than drag and drop using js plug-ins.

Therefore, although the plug-in is powerful, it is too slow to process a large number of nodes.

Therefore, it is more comfortable to use Svg graphically.

But there is one unresolved issue.

Use mouse events to drag Svg. When the mouse moves too fast, the mousemove event cannot be triggered, resulting in the movement effect not being achieved.

After a cursory search, it seems that you can add a transparent background layer to receive all trigger events, but I haven't studied it in depth yet.

That’s it for this article.

We will update later after the mousemove bug is resolved.