javascript - 使用图像和文本自定义 VisJS 方形标签

Question

我正在测试 VisJS 的网络图，我正在尝试找到一种将图像放在形状方形节点内的方法。我知道可以将形状指定为 image 但这只会使节点成为图像。

例子:此示例仅使用带有文本的常规节点形状，并希望在该形状内添加图像。 http://visjs.org/examples/network/nodeStyles/widthHeight.html

我的示例:我希望 John Smith 猫图像和标签位于方形节点中。 http://plnkr.co/edit/nKqOWWSu1yWxx3bPdHUw?p=preview .

想知道是否可以将 text 和 image 放在方形节点中？

Answer 1

-->你好我新

我认为这样做的方法是使用 beforeDraw 或 afterDraw 事件。

在那里你可以添加你的图像。由节点位置。

在您的代码中执行此更改:

{id: 'item_person_123', label: 'Person\nJohn Smith', shape: 'text'},

和

// add this image 
var imageObj = new Image();
imageObj.src = 'http://www.rd.com/wp-content/uploads/sites/2/2016/02/03-train-cat-come-on-command.jpg';

// this is your original code
var networkSEV = new vis.Network(containerSEV, dataSEV, optionsSEV);

// add this event
networkSEV.on("beforeDrawing", function (ctx) {
    var nodeId = 'item_person_123';
    var nodePosition = networkSEV.getPositions([nodeId]);

    ctx.drawImage(imageObj, nodePosition[nodeId].x - 20, [nodeId].y - 20, 40, 40);   
});

看看这个 plunker。

http://plnkr.co/edit/5T75aGTqDbBOsoednBYB?p=preview