HIDPI/Retina情节绘图？

Question

在过去的一年里,我看过bitbucket的3张关于这件事的门票,但从未见过明确的答案.

其中一张门票提供了一些代码,但我不知道该代码属于哪里.

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 上面的代码似乎来自这个网站.

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