Introduction and usage of painter in HT for Web

Given that many students are unfamiliar with painter, write this article. Painter's Chinese meaning is painter, painter, what does it mean to put it in HT? Quite simply, this is an interface specific to HT that allows developers to freely draw content using canvas brushes on topologies and other common components, and now let's take a look at how to use painter.

In this example, we draw a mosaic background on the background of the topology component, which we can play here, with the following code:

Gv.addbottompainter (function (g) {//g is canvasrenderingcontext2d instance var viewrect = Gv.getviewrect ();//Get visual range        var Zoom = Gv.getzoom ();        var StartX = viewrect.x;        var endx = StartX + viewrect.width;        var starty = Viewrect.y;        var EndY = starty + viewrect.height;                G.save ();        G.beginpath ();        G.fillstyle = "#ddd";        Draw the mosaic, draw only gray squares, white squares are not drawn to show the Web page's white background for        (var i = StartX, ii = 0; i < endx; i + = 10/zoom, ii++) {for            (var j = Starty, JJ = 0; J < EndY; J + = 10/zoom, jj++) {            //Draw rules to draw odd-numbered squares for odd lines, draw even numbers in even rows                if ((ii% 2! = 0 && JJ% 2! = 0)                        | | (ii% 2 = = 0 && JJ% 2 = = 0)) {                    G.rect (i, J, 10/zoom, 10/zoom);        }}} G.fill ();        G.restore ();});

You can see that the interface itself is very simple, just call addbottompainter and pass in a function.

Here we use the Graphview#addbottompainter API, as the name implies, this is at the bottom of our topology plus a painter, as follows:



The visible bottompainter is drawn under the original node line of the topology, and we can add multiple bottompainter.

Smart classmates may have thought, since there is bottompainter, there is no toppainter it? The answer is: Yes! The structure of the Toppainter is as follows:



As you can see, Toppainter is drawn to the topology's original node line, which means it obscures the topology content. So what's the use of Toppainter? A typical example is to make a copyright statement, you can try this example, the key code is as follows:

Tableview.addtoppainter (function (g) {        g.beginpath ();        G.strokestyle = ' Cornflowerblue ';        var text = ' xxx all rights reserved ';        G.font = ' 24px Arial ';        G.stroketext (text,-tableview.ty () + 50);//Use Ty () to keep the text floating in a fixed position});

This painter code is also very simple, with a brush to draw a paragraph of text, and you should notice that not only the topology can be used painter, tables and other common components can also be used.

Painter mechanism for developers to bring great convenience, from this component of the display effect is no longer limited to the built-in style of HT, developers can play the imagination to achieve a variety of brilliant effect, everyone come to try it, rather than first achieve a grid line background how?

Introduction and usage of painter in HT for Web