我一直在从事 Infovis 工具包项目,虽然所有功能都已完成,但我无法完成视觉效果。 Infovis 工具包 API 文档很好,但我的自定义节点类型不起作用。我正在使用超树,我想制作两种不同的自定义节点类型。一个来自图像,另一个作为绘制路径。非常感谢所有帮助,谢谢!
编辑:[我尝试的解决方案并不是那么方便。相反,我使用 JIT Controller 中的 onCreateLabel() 来使用 HTML 自定义节点。看到了性能的明显改进,并且在自定义节点方面获得了更大的灵 active 。 ]
这是我到目前为止想出的:
$jit.Hypertree.Plot.NodeTypes.implement({
'customNode': {
'render': function(node, canvas) {
var img = new Image();
img.src = "../icon.png";
var pos = node.pos.getc(true);
var ctx = canvas.getCtx();
ctx.drawImage(img, pos.x-15, pos.y-15);
/*
//...And an other one like this but drawn as a path
ctx.beginPath();
ctx.moveTo(pos.x-25, pos.y-15);
ctx.lineTo(25, -15);
ctx.lineTo(-35, 0);
ctx.closePath();
ctx.strokeStyle = "#fff";
ctx.fillStyle = "#bf5fa4";
ctx.fill();
ctx.stroke();*/
}
}
});
最佳答案
因为您将图像 src 设置为文件 URL,所以加载文件需要时间。所以代码在图像加载之前调用了 drawImage
。
您可以通过修改代码以在图像的 onload 事件处理程序中运行 drawImage
调用(图像加载完成后运行)来解决此问题。
$jit.Hypertree.Plot.NodeTypes.implement({
'customNode': {
'render': function (node, canvas) {
var img = new Image(),
pos = node.pos.getc(true),
ctx = canvas.getCtx();
img.onload = function () {
ctx.drawImage(img, pos.x - 15, pos.y - 15);
};
img.src = '../icon.png';
}
}
});
关于javascript - 如何在 Infovis Toolkit 中制作自定义节点?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7287285/