var img = new Image(); img.onload = function() { model.draw() } img.src = "https://picsum.photos/100/100"; var Figures = { Rectangle: function(ctx, node) { ctx.beginPath(); ctx.fillStyle = node.fillStyle; ctx.strokeStyle = "blue"; ctx.fillRect(node.x, node.y, node.w, node.h); ctx.fillStyle = "black"; ctx.font = "10px Verdana"; ctx.textBaseline = "top"; node.textfill(ctx); }, Circle: function(ctx, node) { ctx.beginPath(); ctx.fillStyle = node.fillStyle; ctx.ellipse(node.x + node.w / 2, node.y + node.h / 2, node.w / 2, node.h / 2, 0, 0, 2 * Math.PI); ctx.fill(); node.textfill(ctx); }, Diamond: function(ctx, node) { ctx.beginPath(); ctx.fillStyle = node.fillStyle; ctx.moveTo(node.x, node.y + node.h / 2); ctx.lineTo(node.x + node.w / 2, node.y); ctx.lineTo(node.x + node.w, node.y + node.h / 2); ctx.lineTo(node.x + node.w / 2, node.y + node.h); ctx.fill(); node.textfill(ctx); }, Icon: function(ctx, node) { ctx.beginPath(); ctx.fillStyle = node.fillStyle; ctx.strokeStyle = "blue"; ctx.fillRect(node.x, node.y, node.w, node.h); ctx.drawImage(img, node.x - 24, node.y - 10, 150, 116); ctx.fillStyle = "black"; ctx.textAlign = "left" ctx.fillText(node.text, node.x + 5, node.y + 85) ctx.stroke(); } } var anchors = model.defaultAnchors("Rectangle"); model.addNode(new model.node(10, 10, 100, 100, anchors, "動く四角", "green", "Rectangle")); anchors = model.defaultAnchors("Circle"); model.addNode(new model.node(30, 140, 100, 100, anchors, "動かせる丸", "white", "Circle")); anchors = model.defaultAnchors("Rectangle"); model.addNode(new model.node(250, 80, 150, 150, anchors, "リサイズ出来るダイヤ", "yellow", "Diamond")); model.addNode(new model.node(350, 250, 150, 100, anchors, "ドラッグで移動する長方形", "Cyan", "Rectangle")); model.addNode(new model.node(500, 50, 100, 100, anchors, "画像もOK", "white", "Icon")); model.addLink(new model.link(1, 2, 7, 3, "ダブルクリックで編集できるよ")); model.addLink(new model.link(3, 4, 6, 6, "ノード同士を繋げる")); //model.addLink(new model.link(2,3,1,1,"Link 2")); model.init("myCanvas"); model.draw(); // Add an event listener document.addEventListener("selectionChanged", function(e) { document.all("divSelectedNode").innerText = "Selected node:" + e.detail; });
<a target="github" href="http://github.com/luisalvesmartins">Github source</a> <div style="position:relative;width:800px;height:500px"> <canvas id="myCanvas" width="100" height="100" tabindex="1"></canvas> </div> <div id="divSelectedNode"></div>