自定义带有图像和文本的 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);   
});

看看这个笨蛋。

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