无法更改KineticJS 5.0.1 PixelRatio

Question

用KineticJS 5.0.1构建一个画布，它在我的Retina屏幕上看起来很糟糕。我不知道是怎么回事，因为KineticJS的弹琴看上去很好。然后我意识到jsfiddle使用的是4.3.1版本。现在一切都是美丽的视网膜。

为什么v5不再自动处理这个问题了？我怎么才能修好它呢？我试着设置Kinetic.pixelRatio=2，但这没有起到任何作用。

Answer 1

原来pixelRatio是硬编码成kineticJS v5+的。这是由于某种缩放/缩放问题，也部分是由于性能问题。我将进行实验，但同时，在kineticJS的源代码中可以很容易地修复这个问题。查找此功能：

;(function() {
    // calculate pixel ratio
    var canvas = Kinetic.Util.createCanvasElement(),
        context = canvas.getContext('2d'),
        // if using a mobile device, calculate the pixel ratio.  Otherwise, just use
        // 1.  For desktop browsers, if the user has zoom enabled, it affects the pixel ratio
        // and causes artifacts on the canvas.  As of 02/26/2014, there doesn't seem to be a way
        // to reliably calculate the browser zoom for modern browsers, which is why we just set
        // the pixel ratio to 1 for desktops
        _pixelRatio = Kinetic.UA.mobile ? (function() {
            var devicePixelRatio = window.devicePixelRatio || 1,
            backingStoreRatio = context.webkitBackingStorePixelRatio
                || context.mozBackingStorePixelRatio
                || context.msBackingStorePixelRatio
                || context.oBackingStorePixelRatio
                || context.backingStorePixelRatio
                || 1;
            return devicePixelRatio / backingStoreRatio;
        })() : 1;

并将最后一行的1更改为window.devicePixelRatio。性能确实还不错，但我想我要尝试做的事情，因为当按下按钮时，我只需要为许多对象做一个简短的动画，就是让它在KineticJS中在pixelRatio 1下动画化，然后清除它，然后在pixelRatio=whatever重新绘制成品，这对设备来说是合适的。