如何使用canvas和Kinetic.js裁剪圖像

Question

我的函數繪制一個圖像，另一個圖像在另一個圖層上使用Kinetic.js，但我想裁剪第二個圖像，名為smsTopBg_image

    window.onload = function() {
        //INITIALISATION
        var stage = new Kinetic.Stage({
            container: "iPhone",
            width: 480,
            height: 720
        });
        //LAYERS
        var background_layer = new Kinetic.Layer();
        var sms_layer = new Kinetic.Layer();
        var text_layer = new Kinetic.Layer();

        //ELEMENTS
        var iPhoneBg = new Image();
        iPhoneBg.onload = function() {
                var iPhoneBg_image = new Kinetic.Image({
                image: iPhoneBg
            });
            background_layer.add(iPhoneBg_image);
            stage.add(background_layer);
        }
        iPhoneBg.src = "iPhoneBg.jpg";
        //--------------------------------------------------
        var smsTopBg = new Image();
            smsTopBg.onload = function() {
                var smsTopBg_image = new Kinetic.Image({
                image: smsTopBg,
                x: 10,
                y: 10,
            });
            sms_layer.add(smsTopBg_image);
            stage.add(sms_layer);
        }
        smsTopBg.src = "iPhoneBg.jpg";
    };

謝謝 ！

Answer 1

您可以將可選的裁剪對象添加到Image構造函數中的主要屬性對象。 它具有x, y, width and height屬性。

var smsTopBg_image = new Kinetic.Image({
    image: smsTopBg,
    x: 10,
    y: 10,
    // random values, choose your own :
    crop: {
        x: 20,
        y: 3,
        width: 100,
        height: 42
    }
});

Answer 2

好的，如果你的幫助完整的解決方案，有必要增加高度和圖像之前的圖像：

var smsTopBg = new Image();
            smsTopBg.onload = function() {
                var smsTopBg_image = new Kinetic.Image({
                image: smsTopBg,
                x: 200,
                y: 20,
                    width: 50,
                    height: 20,
                crop: {
                    x: 20,
                    y: 10,
                    width: 50,
                    height: 50
                }

            });
            sms_layer.add(smsTopBg_image);
            stage.add(sms_layer);
        }

謝謝 ！

Answer 3

請參閱Kinetic.js中的圖像裁剪網址： http ： //jsfiddle.net/umhm7/