如何使用画布和 Kinetic.js 裁剪图像

Posted 2023-03-05

【中文标题】如何使用画布和 Kinetic.js 裁剪图像

【英文标题】：How to crop an image with canvas and Kinetic.js

【发布时间】：2012-08-11 00:35:22

【问题描述】：

我的函数使用 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";
    ;

谢谢！

【参考方案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
    
);

【参考方案2】：

好的，我在您的帮助下找到了完整的解决方案，有必要在裁剪之前为图像添加高度和 with ：

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

谢谢！

【参考方案3】：

请参考 Kinetic.js 中的图像裁剪网址：http://jsfiddle.net/umhm7/