下載Mindfusion最新版本

在上篇文章中我們講到了如何創建一個組織結構圖的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);

下載相關JavaScript庫>>