forcegraph: hidpi rendering of labels

This commit is contained in:
Nils Schneider 2015-04-11 01:16:26 +02:00
parent c0ab6b7406
commit 7ebc4c5571
1 changed files with 15 additions and 11 deletions

View File

@ -470,21 +470,25 @@ define(["d3"], function (d3) {
var name = nodeName(d)
ctx.font = "11px Roboto"
var offset = 10
var offset = 8
var lineWidth = 3
var width = ctx.measureText(name).width
var buffer = document.createElement("canvas")
var r = window.devicePixelRatio
var bctx = buffer.getContext("2d")
var scale = zoomBehavior.scaleExtent()[1]
bctx.lineWidth = 2.5
buffer.width = (width + 2 * bctx.lineWidth) * scale
buffer.height = (14 + 2 * bctx.lineWidth) * scale
bctx.textBaseline = "top"
bctx.font = ctx.font
bctx.strokeStyle = "rgba(255, 255, 255, 0.6)"
bctx.fillStyle = "rgba(0, 0, 0, 0.6)"
var scale = zoomBehavior.scaleExtent()[1] * r
buffer.width = (width + 2 * lineWidth) * scale
buffer.height = (16 + 2 * lineWidth) * scale
bctx.scale(scale, scale)
bctx.strokeText(name, bctx.lineWidth, bctx.lineWidth)
bctx.fillText(name, bctx.lineWidth * scale, bctx.lineWidth * scale)
bctx.textBaseline = "middle"
bctx.textAlign = "center"
bctx.font = ctx.font
bctx.lineWidth = lineWidth
bctx.lineCap = "round"
bctx.strokeStyle = "rgba(255, 255, 255, 0.8)"
bctx.fillStyle = "rgba(0, 0, 0, 0.6)"
bctx.strokeText(name, buffer.width / (2 * scale), buffer.height / (2 * scale))
bctx.fillText(name, buffer.width / (2 * scale), buffer.height / (2 * scale))
d.label = buffer
d.labelWidth = buffer.width / scale