Paper.js：为什么缩放图像变得模糊？

Question

Paper.js：为什么缩放图像变得模糊？ 代码

            paper.setup(canvasDOMElement);
            var raster = new paper.Raster(image2);
            // raster.size = new paper.Size(800, 600);
            raster.scale(0.05, {x:110, y:110});
            // raster.position = paper.view.center;
            paper.view.draw();

图像为3000x2500像素，在边框和图像本身模糊。如果我不使用刻度，则图像清晰。

我做了这样的动画：

        onAppear = function(){
            paper.setup(canvasDOMElement);
            var raster = new paper.Raster(image2);
            // raster.size = new paper.Size(800, 600);
            // raster.scale(1, {x:110, y:110});
            // raster.position = paper.view.center;
            var scale = 1;
            paper.view.onFrame = function(event) {
                // On each frame, rotate the path by 3 degrees:
                scale -= 0.0001;
                raster.scale(scale, {x:110, y:110});
            }
            paper.view.draw();
        }

这有点奇怪，因为比例一个被应用于另一个，因此具有指数曲线，这不是我想的。所以更好的方法是：

        onAppear = function(){
            paper.setup(canvasDOMElement);
            var raster = new paper.Raster(image2);
            // raster.size = new paper.Size(800, 600);
            // raster.scale(1, {x:110, y:110});
            // raster.position = paper.view.center;
            var scale = 1;
            paper.view.onFrame = function(event) {
                // On each frame, rotate the path by 3 degrees:
                raster.scale(0.99, {x:110, y:110});
            }
            paper.view.draw();
        }

以这种方式，图像在每帧上重新缩放到0.99。即便如此，经过200次迭代后，图像变得非常模糊。

Answer 1

问题的主要来源是我没有意识到canvas.style.height和canvas.height 之间的差异：

它们都会改变画布的高度，但

canvas.style.height 会改变比例，因此我模糊了图像

并且 canvas.height 保持相同的比例，因此没有模糊的图像。

对于qooxdoo用户：

var canvas = new qx.ui.embed.Canvas().set({});
// changing the height on canvas like this:
canvas.setHeight(900)
// will set the canvas.style.height
// which will become blurred

// therefore you must do:
var canvasDOMElement = canvas.getContentElement().getDomElement();
canvasDOMElement.height = 900;
// this will resize your canvas without scaling it.

Answer 2

这里解释了真正的实际问题：http://demo.qooxdoo.org/2.1/apiviewer/index.html#qx.ui.embed.Canvas

syncDimension = true！

var canvas = new qx.ui.embed.Canvas().set({
  syncDimension: true
});