Question

使用KineticJS 5.0.1构建画布，它在我的Retina屏幕上看起来很糟糕。我无法弄清楚发生了什么，因为KineticJS jsfiddle看起来很好。然后我意识到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。性能真的不是那么糟糕，但我想我要尝试做什么，因为当按下按钮时，我的使用只需要很多对象的短动画，就是让它在像素比率1的KineticJS中动画然后清除它并在pixelRatio重新绘制成品=适合该设备的任何内容。

不能改变KineticJS 5.0.1 PixelRatio

1 个答案: