javascript - キャンバスとKinetic.jsで画像を切り抜く方法

Question

私の関数はKinetic.jsを使用して画像を描画し、別のレイヤーに別の画像を描画しますが、smsTopBg_imageという名前の2番目の画像をトリミングしたいと思います

    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の画像の切り抜きについては次のURLを参照してください：http：//jsfiddle.net/umhm7/