Author: Xinye time: 2018-11-07 11:13

Tips: Clay. Js has stopped maintenance and the project has migrated to
https://github.com/yelloxing/…

If you like this project, you can send it to Star on Github.

When it comes to drawing with canvas2D (in my opinion, for another, WebGL also works here), we have always struggled with the flexibility of SVG, especially binding events to a specific icon in an image (see GIF above, where the mouse hover over a specific area to display a message).

In addition, when drawing, we can not redraw parts of the pattern, as in previous HTML, only to erase and redraw all of it, which is a frustrating fact.

Fortunately, Clay provides a Photoshop like layer capability, while abstracts the concept of a region object by binding events to a specific region in the image. You can click here to see the figure in action or the source code and compare it with the instructions below.

Layer manager

When drawing with canvas2D, we always used to get this magic brush like this:

var pencil=document.getElementsByTagName('canvas')[0].getContext('2d');

With this brush we can draw shapes directly using the various interfaces provided by canvas2D, which is really cool. In order to facilitate drawing, Clay abstracts a layer manager on this basis. Instead of drawing directly with the brush provided by canvas, we use the brush provided by the layer manager, as follows:

Var layerManger = $$('#canvas').layer(); Var bg_pencil = layermanger. painter('bg'), arc_pencil = layerManger.painter('arc'), prompt_pencil = layerManger.painter('prompt');

We get bG_Pencil, Arc_Pencil, and PROMPt_Pencil, and when you draw with them, it’s no different than the pencil pencils we got before. The only difference is that they are drawn on separate layers rather than directly on the canvas2D canvas.

The advantage of this is that if one of the brushes changes the shape, the other does not need to be redrawn. However, you should not abuse it. If you are drawing the same shape, we encourage you to use the following methods to get the brush:

var pencil=$$('#canvas').painter();

This is clay’s way of getting a canvas2D brush, which is not any different from the brush we used to get when we first drew.

Note that the drawing using the brush obtained by the layer manager is on the corresponding layer. If you want to synchronize it to the canvas on the page, you need to call this method:

layerManger.update();

See the Interface API section for more details on the layer manager API, as well as the area manager described below.

Regional manager

Var regionManger = $$('#canvas').region();

The first step in using a region manager is to create a region manager, which we can use during the drawing process. For example, if you want to record a newly drawn graph as a region, use code like this:

Regionmanger.drawer (id, function (pencil) {// you need to use pencil to draw the new area to be managed});

Pencil works just like a normal brush, except you can’t change the value of fillStyle and you don’t need to call fill() at the end of the drawing. The id in the above is used to uniquely identify this region. The region drawn with the same ID is considered as an expansion of the previous one. If two regions drawn with different ids overlap, the later one will overwrite the previous one.

After logging the desired area in the drawer method with the area manager, you can call the following methods to obtain the area where the mouse is currently located:

var id=regionManger.getRegion(event);

The ID is the unique identifier of the area where the current mouse resides.

For example, if you click on a graph, the id tells you which area you are clicking on and triggers the event.