1

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回の反復の後、画像は非常にぼやけてしまいます。

4

2 に答える 2

0

問題の主な原因は、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.
于 2012-08-10T12:13:37.947 に答える
0

本当の本当の問題はここで説明されています：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
});
于 2012-10-17T23:04:06.727 に答える