0

我已经为我的强制导向 InfoVis 图表创建了自定义节点，我在其中显示了用户的图像。我现在想为图像添加样式，例如添加边框并使其成为圆形。我尝试按如下方式添加 css 类，但它不起作用。

 img.className = myClass;

这是我的自定义节点代码：

    //Custom nodes
$jit.ForceDirected.Plot.NodeTypes.implement({
    'customImage':
        {
            'render': function (node, canvas)
            {
                var ctx = canvas.getCtx();
                var img = new Image();
                var pos = node.getPos();
                img.onload = function ()
                {
                    ctx.drawImage(img, pos.x - 16, pos.y - 16);
                }

                var n = _nodes[node.id];
                if (n && n.imageUrl)
                {
                    var size = 52;
                    var url = n.imageUrl.replace("{width}", size).replace("{height}", size);
                    img.src = url;
                    img.className = myClass;
                }
                else
                {
                    img.src = '../Images/UserNoImage.png';
                }
            },
            'contains': function (node, pos)
            {
                var npos = node.pos.getc(true),
                dim = node.getData('dim');
                return this.nodeHelper.square.contains(npos, pos, dim);
            }
        }
});
4

1 回答 1

0

您可以将 CSS 样式应用于 html 元素。您定义的自定义节点只是在画布上绘制图像。该节点不对应于任何 html 元素。

因此，在调用函数 drawImage 之前，您应该确保图像是根据您的要求定制的，然后才调用 drawImage。在这种情况下，infovis 对 css 一无所知，它所做的只是调用 drawImage，它只是在画布上绘制图像。

因此，您应该解决的问题是，如何将 css 应用于图像，以便根据您的要求进行定制。这个问题与 infovis 无关。

于 2013-09-25T04:47:35.823 回答