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

html 要素に CSS スタイルを適用できます。定義したカスタム ノードは、キャンバス上に画像を描画するだけです。ノードがどの html 要素にも対応していません。

したがって、関数 drawImage を呼び出す前に、イメージが要件に合わせてカスタマイズされていることを確認してから、drawImage を呼び出す必要があります。この場合、infovis は css について何も知らず、キャンバスに画像を描画するだけの drawImage を呼び出します。

したがって、取り組むべき問題は、CSS を画像に適用して、要件に合わせてカスタマイズする方法です。そして、この質問はインフォビスとは無関係です。

于 2013-09-25T04:47:35.823 に答える