如何使用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/