Настройка квадратной метки VisJS с изображением и текстом
Я тестирую VisJS для сетевой диаграммы, я пытаюсь найти способ поместить изображение в квадратный узел формы. Я знаю, что форму можно указать как image но это только сделает узел как изображение.
Пример. В этом примере используется только форма обычного узла с текстом и требуется добавить изображение внутри фигуры. http://visjs.org/examples/network/nodeStyles/widthHeight.html
Мой образец: я хочу John Smith изображение кошки и метка должны быть в узле квадратной формы. http://plnkr.co/edit/nKqOWWSu1yWxx3bPdHUw?p=preview.
Хотел узнать, можно ли его поставить text а также image внутри квадратного узла?
1 ответ
-> Привет 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);
});
посмотри в этот поршень.