Mindfusion教程：带有剪切图像的自定义图表节点（下）

通过调用setCustomNodeType启用自定义节点的交互式绘制，然后通过调用setCustomNodeType和setBehavior启用自定义节点的交互式绘制。

下载Mindfusion最新版本

一、图和节点

在文档的read（）函数中，我们使用对我们在第I部分中创建的画布中引用创建了Diagram类的实例。

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

然后我们通过调用setCustomNodeType启用自定义节点的交互式绘制，然后通过调用setCustomNodeType和setBehavior启用自定义节点的交互式绘制：

// enable drawing of custom nodes interactivelydiagram.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. rn" +"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库>>

标签：JavaScript 图表图表控件