翻譯|使用教程|編輯:王香|2019-03-28 15:03:05.000|閱讀 262 次
概述:通過調用setCustomNodeType啟用自定義節點的交互式繪制,然后通過調用setCustomNodeType和setBehavior啟用自定義節點的交互式繪制。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
在上篇文章中我們講到了如何創建一個組織結構圖的References和HTML設置,本文接著講圖和節點以及圓形圖像。
在文檔的read()函數中,我們使用對我們在第I部分中創建的畫布中引用創建了Diagram類的實例。
// create a Diagram component that wraps the "diagram" canvas
diagram = Diagram.create($("#diagram")[0]);
然后我們通過調用setCustomNodeType啟用自定義節點的交互式繪制,然后通過調用setCustomNodeType和setBehavior啟用自定義節點的交互式繪制:
// enable drawing of custom nodes interactively diagram.setCustomNodeType(OrgChartNode); diagram.setBehavior(Behavior.Custom);
圖中的行為設置為Custom,這意味著當用戶開始繪制節點時,庫應繪制CustomNodeType指定的節點。setCustomNodeType方法表明圖表這些自定義節點的類型為OrgChartNode。
現在,開始創建節點:
var node1 = new OrgChartNode(diagram);
node1.setBounds(new Rect(25, 15, 60, 25));
node1.setTitle("CEO");
node1.setFullName("John Smith");
node1.setDetails(
"Our beloved leader. \r\n" +
"The CEO of this great corporation.");
node1.setImage("ceo.png");
diagram.addItem(node1);
我們使用相同的代碼創建更多節點,然后將它們綁定在層次結構中。通過調用Diagram Factory類的Diagram Factory createDiagramLink方法創建節點之間的鏈接:
diagram.getFactory().createDiagramLink(node1, node2); diagram.getFactory().createDiagramLink(node1, node3); diagram.getFactory().createDiagramLink(node1, node4); diagram.getFactory().createDiagramLink(node4, node5);
我們現在想要向節點添加一個custom feature/自定義特征 - 而不是將圖像繪制為矩形,我們想要剪切它并將其顯示為橢圓。 我們將通過使用替換標準setImage方法的方法來完成此操作。
新方法稱為createImageClip,并將兩個對象作為參數:一個是圖像URL,另一個是使用此圖像的節點。
function createImageClip(path, node)
{
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
img = document.createElement('img');
..............
我們創建了兩個HTMLElements - 畫布和圖像,我們得到了Canvas的2D上下文。 然后,在圖像的onload事件的事件處理程序中,我們將畫布剪切到由Path定義的區域。 該路徑讀取圖像的大小并創建一個完整的弧,例如 那個矩形內的一個圓圈。 然后,上下文繪制圖像,并使用setImage方法將新畫布設置為節點的圖像:
img.src = path;
img.onload = function ()
{
canvas.width = img.width;
canvas.height = img.height;
var halfSize = img.width / 2;
ctx.save();
ctx.beginPath();
ctx.arc(halfSize, halfSize, halfSize, 0, Math.PI * 2, true);
ctx.closePath();
ctx.clip();
ctx.drawImage(img, 0, 0, img.width, img.height);
node.setImage(canvas.toDataURL());
};
您可以使用此方法創建具有可變形狀的圖像的剪輯。
node1.setImage("ceo.png");
用這種方式調用自定義方法:
createImageClip("ceo.png", node1);
					本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn