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分辨率以進行測試。下面是一個複合屏幕截圖，顯示了正常的圖形和具有替換代碼的相同圖形。