如何使用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";
    };

感谢您！

- Random78952

Answer 1

您可以在Image构造函数的主属性对象中添加可选的裁剪对象。它具有x、y、width和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
    }
});

- Delapouite

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

感谢！

- Random78952

Answer 3

请参考以下链接了解Kinetic.js中的图像裁剪：http://jsfiddle.net/umhm7/

- Palani Kumar