如何裁剪用帆布和Kinetic.js图像(How to crop an image with can

我的函数绘制的图像，并与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:

在主属性在图像构造对象，你可以添加一个可选的作物对象。它具有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:

好吧ifound在您的帮助的完整解决方案，有必要像以前作物高度和与添加到图像：

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);
        }

谢谢！