下載Mindfusion最新版本

在上篇文章中我們講到了如何創(chuàng)建一個組織結(jié)構(gòu)圖的References和HTML設(shè)置，本文接著講圖和節(jié)點(diǎn)以及圓形圖像。

一、圖和節(jié)點(diǎn)

在文檔的read（）函數(shù)中，我們使用對我們在第I部分中創(chuàng)建的畫布中引用創(chuàng)建了Diagram類的實(shí)例。

// create a Diagram component that wraps the "diagram" canvas
diagram = Diagram.create($("#diagram")[0]);

然后我們通過調(diào)用setCustomNodeType啟用自定義節(jié)點(diǎn)的交互式繪制，然后通過調(diào)用setCustomNodeType和setBehavior啟用自定義節(jié)點(diǎn)的交互式繪制：

// enable drawing of custom nodes interactively
diagram.setCustomNodeType(OrgChartNode);
diagram.setBehavior(Behavior.Custom);

圖中的行為設(shè)置為Custom，這意味著當(dāng)用戶開始繪制節(jié)點(diǎn)時，庫應(yīng)繪制CustomNodeType指定的節(jié)點(diǎn)。setCustomNodeType方法表明圖表這些自定義節(jié)點(diǎn)的類型為OrgChartNode。

現(xiàn)在，開始創(chuàng)建節(jié)點(diǎn)：

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);

我們使用相同的代碼創(chuàng)建更多節(jié)點(diǎn)，然后將它們綁定在層次結(jié)構(gòu)中。通過調(diào)用Diagram Factory類的Diagram Factory createDiagramLink方法創(chuàng)建節(jié)點(diǎn)之間的鏈接：

diagram.getFactory().createDiagramLink(node1, node2);
diagram.getFactory().createDiagramLink(node1, node3);
diagram.getFactory().createDiagramLink(node1, node4);
diagram.getFactory().createDiagramLink(node4, node5);

二、圓形圖像

我們現(xiàn)在想要向節(jié)點(diǎn)添加一個custom feature/自定義特征 - 而不是將圖像繪制為矩形，我們想要剪切它并將其顯示為橢圓。 我們將通過使用替換標(biāo)準(zhǔn)setImage方法的方法來完成此操作。

新方法稱為createImageClip，并將兩個對象作為參數(shù)：一個是圖像URL，另一個是使用此圖像的節(jié)點(diǎn)。

function createImageClip(path, node)
{
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
img = document.createElement('img');
..............

我們創(chuàng)建了兩個HTMLElements - 畫布和圖像，我們得到了Canvas的2D上下文。 然后，在圖像的onload事件的事件處理程序中，我們將畫布剪切到由Path定義的區(qū)域。 該路徑讀取圖像的大小并創(chuàng)建一個完整的弧，例如 那個矩形內(nèi)的一個圓圈。 然后，上下文繪制圖像，并使用setImage方法將新畫布設(shè)置為節(jié)點(diǎn)的圖像：

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());
};

您可以使用此方法創(chuàng)建具有可變形狀的圖像的剪輯。

node1.setImage("ceo.png");

用這種方式調(diào)用自定義方法：

createImageClip("ceo.png", node1);

下載相關(guān)JavaScript庫>>