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 a 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";        //  draws a mosaic, draws only gray squares, white squares are not drawn to show the white background of the Web page          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 on an even line, and to draw even-numbered squares in a number of 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 playThis 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, 60, -tableview.ty ()  + 50);//   use Ty () to keep 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