"Fanvas Technology decryption" HTML5 canvas for dirty area redraw

First of all, Fanvas is the author of the Penguin company developed, will be open source flash to canvas tools.

Dirty area repainting (dirty rectangle) is not a fresh technology, which existed when the earliest 2D games were born.

A complex term or concept is not much to say, simply put, dirty area repainting is every frame when drawing the graphical interface, only to redraw the changed area, rather than full-screen refresh. Obviously, this will definitely bring about a performance boost.

For example, take a look at the bottom two graphs:

Suppose this is a continuous 2-frame animation, then from the first frame to the second frame, in fact, only the butterfly region changes. So the so-called dirty area is the sum of two pictures of the red box, to erase the previous frame of the butterfly, and then the new area of the butterfly position is also erased, and then to draw a new background and butterflies. This is compared to the full screen redraw, redrawing the area is dozens of times times smaller, because the canvas 2d is CPU processing, then the CPU processing of the number of pixels is much less, it is logical that the efficiency of the animation will improve.

It looks very simple, and probably only takes 2 steps:

1, find out the rectangular region of the frame change;

2, using the canvas API to achieve dirty area redraw.

However, the question comes, how to calculate the change area? Does canvas provide a ready-made interface? Let's take a look at the example of the butterfly above.

First, let's look at the calculation of dirty areas.

If the animation is very simple, not using the "display list", all the patterns are drawn in a layer, then "perhaps" the plotter, that is, the developer, may know the location of the butterfly, and then manually specify the redraw area. Uh... Wait, there seems to be something wrong, it is impossible to manually specify the area to redraw every time!!!

Look at the situation in Fanvas, Fanvas used a display list, split the pattern into multiple components, components and components in the form of "display list", which refers to the technology of Flash. Here, the butterfly is encapsulated as a shape, and the butterflies are flying in the picture, and the shape is moved and rotated in the parent element. Initially, when a butterfly is drawn in shape, it is possible to occupy a rectangular area (x:0,y:0,width:100,height:50), which is referenced in the internal coordinate system of the shape (not yet on the stage). Then, when the butterflies are added to the stage, they need to be shifted and rotated, for example to do the displacement (x:400,y:100), and rotate the 60 degrees. How do you calculate a new rectangle at this time?

This process is actually the local coordinate system mapping to the global coordinate system problem, involving the matrix calculation, you can refer to the article I wrote earlier, here is not much to say. http://km.oa.com/articles/show/238103. Also, to mention, here is actually a difficult point, when the initial drawing (x:0,y:0,width:100,height:50), how the rectangle is calculated? If you are drawing a picture, of course, good calculation; if it is a series of vector lines, this is slightly troublesome, but this is not discussed here, because Fanvas is the Flash export Canvas animation, when the export of flash comes with this matrix information.

All of the above calculations are under one premise: we know that butterflies are the only components that change, but how do you automatically recognize the changes in the actual animation process?

To start with the principle of animation, the animation process is divided into 4 kinds of operations:

1. Create a new component (such as a butterfly) and add it to the stage;

2. Move, rotate, and shrink the original components;

3. Remove the existing components;

4. Modify the mask relationship of the component, this is a bit special, if the Flash animation is not familiar with the classmate may not understand, but it is not important, we know that there is this matter, does not affect the continued reading of the article.

So, in Fanvas, we need to deal with the above 4 cases separately.

1. NEW: Only 1 dirty rectangles, this is the component itself;

2. Move/rotate/shrink: The rectangular area of a frame on a component is dirty, and a new frame of rectangular area is also a dirty area;

3. Delete: The same as the new situation;

4. Mask change: Same as 2.

After figuring out these details, it's a good idea how to do it, but it's just a list of dirty areas before each frame is drawn, and then all the dirty area rectangles are calculated before you start drawing.

Next, let's look at the second step, how does canvas work, and does the dirty area redraw the interface?

In fact, the canvas does not have a real dirty area to redraw the interface, but there is a clip, which is generally used to implement a matte, but can also be trickery to implement dirty area repainting. By the author test, the simple use of clip although performance optimization is not too obvious, but there is still a 20% increase. More complex, of course, you can do their own according to the Dirty area list, rewrite each component of the drawing method, self-implementation of dirty area repainting, but I estimate ah, JS write so much logic, and ultimately thankless.

Let's take a look at the code:

 for (var0; i < dirtyrectlist.length; i++) {     var rect = Dirtyrectlist[i];     Ctx.clearrect (Rect.x, Rect.y, Rect.width, rect.height); } ctx.beginpath ();  for (var0; i < dirtyrectlist.length; i++) {    var rect =  Dirtyrectlist[i];    Ctx.rect (Rect.x, Rect.y, Rect.width, rect.height);} Ctx.clip ();

Believe that the variable name has been clearly exposed to their own use, we should understand that the implementation of the dirty area repainting is very simple, just need to add a clip before all the painting, to fix.

But Ah, there is a big hole here, it is estimated that some classmates also know.

As shown, there will be some 1px white lines or clean bugs, especially if the stage itself is stretched, the bug is more obvious. After the author many times groping, probably made clear, is mainly dirty area to calculate carefully (if the stage has stretch, it is easy to calculate out there are 1, 2px difference), the screen to be proportional stretching, in addition is clear and redraw, generous point, to 1px relaxation.

Finally becomes:

 for (var i = 0; i < dirtyrectlist.length; i++) {                var rect = Dirtyrectlist[i];                Ctx.clearrect (Rect.x-1, Rect.y-1, rect.width+2, rect.height+2);            }             Ctx.beginpath ();              for (var i = 0; i < dirtyrectlist.length; i++) {                var rect = dirtyrectlist[i];
    ctx.rect (Rect.x-1, Rect.y-1, rect.width+2, rect.height+2);                }            Ctx.clip ();

At this point, the Fanvas dirty area re-painted secret is completely exposed ...

Finally take a look at the actual effect (the first one is not to use the dirty area redraw, the second one uses the dirty area redraw):

Of course, this is not the effect of every animation, because some of the animation is a wide range of changes, so fanvas for these cases also do a compatible treatment, if you find too much dirty area or too large area, continue to use the original full-screen redraw.

"Fanvas Technology decryption" HTML5 canvas for dirty area redraw