HT for WebにおけるPainterの紹介と使い方

多くの学生がPainterに詳しくないことを考慮して、この文章を書いて紹介します.Painterの中国語の意味は画家、漆工で、それではHTの中に置くのはどういう意味ですか?簡単です.これはHT特有のインタフェースで、開発者がトポロジーや他の汎用コンポーネントでCanvasブラシを使って自由にコンテンツを描くことができます.次に、Painterの使い方を例に挙げてみましょう.
この例では、トポロジーコンポーネントのバックグラウンドにモザイクバックグラウンドを描画します.コードは次のとおりです.

gv.addBottomPainter(function(g) {//g CanvasRenderingContext2D    
    var viewRect = gv.getViewRect();//         
        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";  
        //      ，       ，                   
        for (var i = startX, ii = 0; i < endX; i += 10 / zoom, ii++) {  
            for (var j = startY, jj = 0; j < endY; j += 10 / zoom, jj++) {  
                //                ，              
                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();  
}); 

このインタフェース自体は非常に簡単で、addBottomPainterを呼び出して関数を入力すればよいことがわかります.ここではGraphView#addBottomPainterというAPIを使用します.名前の通り、トポロジーの下部にPainterを追加します.概略図は以下の通りです.
BottomPainterはトポロジの既存のノードの配線の下に描かれており、bottomPainterを複数追加することができます.
頭のいい学生たちは、BottomPainterがある以上、TopPainterはありますか?答えは:あります!TopPainterの構造は次のとおりです.
TopPainterは、トポロジの既存のノードの接続線の上に描かれていることがわかります.つまり、トポロジの内容を遮断します.ではTopPainterは何の役に立つのでしょうか?典型的な例は著作権声明です.この例を試してみてください.キーコードは以下の通りです.

tableView.addTopPainter(function(g) {  
        g.beginPath();  
        g.strokeStyle = 'cornflowerblue';  
        var text = 'XXX    ';  
        g.font = '24px Arial';  
        g.strokeText(text, 60, -tableView.ty() + 50);//   ty()              
});  

このPainterのコードも簡単で、ブラシで文字を描きました.そして、トポロジーだけでなく、Painter、表などの汎用コンポーネントも使用できることに気づきました.
Painterメカニズムは開発者に大きな便利さをもたらし、コンポーネントの展示効果はHTの内蔵スタイルに限られなくなり、開発者は想像して様々な絢爛たる効果を実現することができます.早くやってみましょう.まずグリッド線の背景を実現したらどうですか.