Mindfusion教程:带有剪切图像的自定义图表节点(下)

翻译|使用教程|编辑:王香|2019-03-28 15:03:05.000|阅读 37 次

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

相关链接:

下载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库>>



标签:JavaScript 图表图表控件

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

登录慧都网发表评论登录


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
MindFusion.WinForms Pack

专业的多功能Winforms图表控件套包

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat