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

点击“了解更多”下载产品最新试用版

↓↓↓