diff --git a/lib/forcegraph.js b/lib/forcegraph.js index 4fd44a4..9b85e86 100644 --- a/lib/forcegraph.js +++ b/lib/forcegraph.js @@ -305,16 +305,51 @@ define(["d3"], function (d3) { // -- draw nodes -- - ctx.beginPath() + + var node = document.createElement("canvas") + node.width = scale * nodeRadius * 8 + node.height = node.width + + var nctx = node.getContext("2d") + nctx.scale(scale, scale) + nctx.save() + + nctx.translate(-node.width / scale, -node.height / scale) + nctx.lineWidth = nodeRadius + + nctx.beginPath() + nctx.moveTo(nodeRadius, 0) + nctx.arc(0, 0, nodeRadius, 0, 2 * Math.PI) + + nctx.strokeStyle = "rgba(255, 0, 0, 1)" + nctx.shadowOffsetX = node.width * 1.5 + 0 + nctx.shadowOffsetY = node.height * 1.5 + 3 + nctx.shadowBlur = 6 + nctx.shadowColor = "rgba(0, 0, 0, 0.32)" + nctx.stroke() + nctx.shadowOffsetX = node.width * 1.5 + 0 + nctx.shadowOffsetY = node.height * 1.5 + 3 + nctx.shadowBlur = 6 + nctx.shadowColor = "rgba(0, 0, 0, 0.46)" + nctx.stroke() + + nctx.restore() + nctx.translate(node.width / 2 / scale, node.height / 2 / scale) + + nctx.beginPath() + nctx.moveTo(nodeRadius, 0) + nctx.arc(0, 0, nodeRadius, 0, 2 * Math.PI) + + nctx.strokeStyle = nodeColor + nctx.lineWidth = nodeRadius + nctx.stroke() + + ctx.save() + ctx.scale(1 / scale, 1 / scale) nodes.filter(visibleNodes).forEach(function (d) { - ctx.moveTo(d.x + nodeRadius, d.y) - ctx.arc(d.x, d.y, nodeRadius, 0, 2 * Math.PI) + ctx.drawImage(node, scale * d.x - node.width / 2, scale * d.y - node.height / 2) }) - - ctx.strokeStyle = nodeColor - ctx.lineWidth = nodeRadius - - ctx.stroke() + ctx.restore() // -- draw clients -- ctx.save()