kineticjs（HTML5 Canvas） - 縮小時平滑圖像

Question

當我使用kineticjs將大圖像添加到我的頁面上時，當我將它們設置為非常小的尺寸時，我的質量會變差。 結果往往是鋸齒狀/粗糙。 然而，如果我添加相同的圖像並使用img src設置尺寸，我會得到更好的質量和平滑縮小的版本。

有什么我可以添加來打擊這個？ jsfiddle，截圖和代碼都在下面

JSFIDDLE： http ： //jsfiddle.net/vTLkn/6/

// Define Stage
var stage = new Kinetic.Stage({
    container: "canvas",
    width: 300,
    height: 200
});

//Define Layer for Images
var layer = new Kinetic.Layer();
stage.add(layer);   

// Draw Image Function
function drawImage(image,w,h,x,y) { 
    // Define Function's Image Properties
    var theImage = new Kinetic.Image({
        image: image,
        x: x,
        y: y,
        width: w,
        height: h
    });

    // Add Function's Image to Layer
    layer.add(theImage);
    layer.draw();
}

// Define Image 1 and Draw on Load
var image1 = new Image();
image1.onload = function() {
    drawImage( this, 250, 188, 0, 0);
};
image1.src = "http://i.imgbox.com/vMfjLbnw.jpg";

Answer 1

好吧，根據@Cryptoburner的評論。 我在Kinetic中實現了一個自定義形狀，並使用sceneFunc來使用相關鏈接中實現的drawImage函數。

var theImage = new Kinetic.Shape({
    sceneFunc: function(context) {
        /// step 1
        var oc = document.createElement('canvas'),
            octx = oc.getContext('2d');
        oc.width = image.width * 0.5;
        oc.height = image.height * 0.5;
        octx.drawImage(image, 0,0, oc.width,oc.height);

        /// step 2
        octx.drawImage(oc,0,0,oc.width * 0.5,oc.height * 0.5);



        context.drawImage(oc,0,0,oc.width * 0.5, oc.height * 0.5,
                         0,0,w,h);
    }
});

所以這里是小提琴： http ： //jsfiddle.net/vTLkn/8/

現在它仍然不如Img版本好，但它是改進的。 由於您的圖像寬度為1000像素，因此進行另一次縮小尺寸的迭代（在自定義sceneFunc中）可能是個好主意。

PS。 將Kinetic版本更新為5.0.1，否則無效。