HIDPI /视网膜绘图？

Question

我已经在bitbucket上看到3 tickets在去年问过这个问题，但从未见过明确的答案。

One这些门票给了一些代码，但我不知道代码属于哪里。

var devicePixelRatio = window.devicePixelRatio || 1, 
backingStoreRatio = ctx.webkitBackingStorePixelRatio || 
     ctx.mozBackingStorePixelRatio || 
     ctx.msBackingStorePixelRatio || 
     ctx.oBackingStorePixelRatio || 
     ctx.backingStorePixelRatio || 1; 

ratio = devicePixelRatio/backingStoreRatio; 
if (devicePixelRatio !== backingStoreRatio) { 
    var oldWidth = canvas.width; 
    var oldHeight = canvas.height; 
this.canvasOrigWidth = oldWidth; 
this.canvasOrigHeight = oldHeight; 
canvas.width = oldWidth * ratio; 
canvas.height = oldHeight * ratio; 

canvas.style.width = oldWidth + 'px'; 
canvas.style.height = oldHeight + 'px'; 

// now scale the context to counter 
// the fact that we've manually scaled 
// our canvas element 
ctx.scale(ratio, ratio); 
} 

如何让JQPlot输出高分辨率图？

编辑1 上面的代码似乎来自这个website。

Answer 1

我想出了基于问题中链接的例子。

替换

this.initCanvas = function(canvas) { 
    if ($.jqplot.use_excanvas) { 
     return window.G_vmlCanvasManager.initElement(canvas); 
    } 
    return canvas; 
} 

随着

this.initCanvas = function(canvas) { 
    if ($.jqplot.use_excanvas) { 
     return window.G_vmlCanvasManager.initElement(canvas); 
    } 

    var cctx = canvas.getContext('2d'); 

    var canvasBackingScale = 1; 
    if (window.devicePixelRatio > 1 && (cctx.webkitBackingStorePixelRatio === undefined || 
               cctx.webkitBackingStorePixelRatio < 2)) { 
      canvasBackingScale = window.devicePixelRatio; 
    } 
    var oldWidth = canvas.width; 
    var oldHeight = canvas.height; 

    canvas.width = canvasBackingScale * canvas.width; 
    canvas.height = canvasBackingScale * canvas.height; 
    canvas.style.width = oldWidth + 'px'; 
    canvas.style.height = oldHeight + 'px'; 
    cctx.save(); 

    cctx.scale(canvasBackingScale, canvasBackingScale); 

    return canvas; 
}; 

该方法可以围绕在jquery.jqplot.js管线290中找到。

然后，如果您没有HIDPI或Retina显示屏，但确实有Mac，则可以使用Quartz Debug和System Pref/Displays模拟HIDPI分辨率以进行测试。下面是一个复合屏幕截图，显示了正常的图形和具有替换代码的相同图形。