forcegraph: dropshadows behind nodes

This commit is contained in:
Nils Schneider 2015-08-02 00:34:42 +02:00
parent dc5e364803
commit ca0d3bd47d

View file

@ -305,16 +305,51 @@ define(["d3"], function (d3) {
// -- draw nodes -- // -- 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) { nodes.filter(visibleNodes).forEach(function (d) {
ctx.moveTo(d.x + nodeRadius, d.y) ctx.drawImage(node, scale * d.x - node.width / 2, scale * d.y - node.height / 2)
ctx.arc(d.x, d.y, nodeRadius, 0, 2 * Math.PI)
}) })
ctx.restore()
ctx.strokeStyle = nodeColor
ctx.lineWidth = nodeRadius
ctx.stroke()
// -- draw clients -- // -- draw clients --
ctx.save() ctx.save()