CODEWITHSUNDEEP
javascriptvis.jsvis.js-network
MrNew
MrNew

Reputation: 1424

Customising VisJS square label with image and text

I'm testing VisJS for network diagram, I'm trying to find a way to put an image within the shape square node. I know shape can be specified as image but that will only make the node as an image.

Example: This example is only using a regular node shape with text and want to add an image within the shape. http://visjs.org/examples/network/nodeStyles/widthHeight.html

My Sample: I want John Smith cat image and label to be in a square shape node. http://plnkr.co/edit/nKqOWWSu1yWxx3bPdHUw?p=preview.

Wanted to know if its possible to put text and image within the square node?

Upvotes: 5

Views: 2468

Answers (1)

TERMIN
TERMIN

Reputation: 862

--> Hi MeNew

i think the way to do it is using the beforeDraw or afterDraw events.

there you can add your image. by the node positions.

do this changtes in your code:

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

and 

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

look in this plunker.

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

Upvotes: 3

Related Questions