HT for Web 中Painter的介紹及用法

鑑於許多同學對Painter不熟悉，所以撰寫此文介紹下。Painter的中文意思是畫家、漆工，那放到HT裡是什麼意思呢？很簡單，這是HT特有的一種介面，允許開發者在拓撲及其它通用元件上使用Canvas畫筆自由繪製內容，現在我們做個例子看一下如何使用Painter。

這個例子中我們在拓撲元件的背景上繪製馬賽克背景，可以在[url=http://www.hightopo.com/demo/blog_painter_20150928/bottom_painter.html]這裡試玩[/url]，程式碼如下：

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，示意圖如下：

[img]http://dl2.iteye.com/upload/attachment/0112/0141/53ac4637-0baf-3fb7-abf7-2888238ce4af.png[/img]

可見BottomPainter是繪製在拓撲原有節點連線下面的，並且我們可以加多個bottomPainter。

聰明的同學們可能想到了，既然有BottomPainter，那有沒有TopPainter呢？答案是：有！TopPainter的結構是下面這樣：

[img]http://dl2.iteye.com/upload/attachment/0112/0145/fc6b20ec-c182-3cb4-9cc0-147cb8d8f1f0.png[/img]

可以看到，TopPainter是繪製到拓撲原有節點連線上面的，也就是說它會遮擋拓撲內容。那麼TopPainter有什麼用呢？一個典型的例子是做版權宣告，大家可以試玩[url=http://www.hightopo.com/demo/blog_painter_20150928/top_painter.html]這個例子[/url]，關鍵程式碼如下：

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的內建樣式裡，開發者可以發揮想象實現各種絢麗的效果，大家快來試試吧，不如先實現一個網格線背景怎麼樣？