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);   
});

看看这个笨蛋。

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