paperjs - 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

同步维度 = 真！

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