JointJS - GitHub Discussion

Image gif: https://github.com/clientIO/joint/discussions/2651

by Roman Bruckner

HTML

<script src="https://cdn.jsdelivr.net/npm/@joint/[email protected]/dist/joint.min.js"></script>
<div id="paper"></div>

JavaScript

const { util, dia, shapes: defaultShapes, linkTools } = joint;

const shapes = {
    ...defaultShapes,
};

const graph = new dia.Graph({}, {
    cellNamespace: shapes
});

const paper = new dia.Paper({
    el: document.getElementById('paper'),
    width: 800,
    height: 900,
    model: graph,
    cellViewNamespace: shapes,
    async: true,
});


const el1 = new shapes.standard.BorderedImage({
  size: { width:100, height: 100 },
  attrs: {
	image: {
    href: 'https://media1.tenor.com/m/La0s3PbYFW0AAAAC/for-example-benjamin.gif'
  }
  }
});

graph.addCells([el1]);