Freifunk-Troisdorf/meshviewer
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

forcegraph: hidpi rendering of labels

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
lib/forcegraph.js
View File

@ -470,21 +470,25 @@ define(["d3"], function (d3) {
var name = nodeName(d) var name = nodeName(d)
ctx.font = "11px Roboto" ctx.font = "11px Roboto"
var offset = 10 var offset = 8
var lineWidth = 3
var width = ctx.measureText(name).width var width = ctx.measureText(name).width
var buffer = document.createElement("canvas") var buffer = document.createElement("canvas")
var r = window.devicePixelRatio
var bctx = buffer.getContext("2d") var bctx = buffer.getContext("2d")
var scale = zoomBehavior.scaleExtent()[1] var scale = zoomBehavior.scaleExtent()[1] * r
bctx.lineWidth = 2.5 buffer.width = (width + 2 * lineWidth) * scale
buffer.width = (width + 2 * bctx.lineWidth) * scale buffer.height = (16 + 2 * 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)"
bctx.scale(scale, scale) bctx.scale(scale, scale)
bctx.strokeText(name, bctx.lineWidth, bctx.lineWidth) bctx.textBaseline = "middle"
bctx.fillText(name, bctx.lineWidth * scale, bctx.lineWidth * scale) 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.label = buffer
d.labelWidth = buffer.width / scale d.labelWidth = buffer.width / scale