jqplot - HIDPI/Retina 绘图？

去年我在 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 。

最佳答案

我根据问题中链接到的示例弄清楚了。

代替

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

关于jqplot - HIDPI/Retina 绘图？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20221461/