HIDPI / Retina情节绘图？

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分辨率以进行测试。这是一个复合屏幕截图，显示了正常的图形和带有替换代码的相同图形。