Question

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

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

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

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

Answer 1

- ＆GT; 嗨MeNew

我认为这样做的方法是使用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

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

1 个答案: