javascript - 在 KineticJS 中裁剪图像的正确方法

Question

我尝试用这种方式裁剪图像

var crop = new Kinetic.Image({ 
    image: img , 
    x: 100, y: 100, width: 100, heigth: 100, 
    crop : {
        x: 0, y: 0, width: 100, heigth: 100
    }
});

在http://jsfiddle.net/cm5jj/中看到它不起作用

然后我尝试用图像填充矩形

var rect = new Kinetic.Rect({  
    x: 100,  
    y: 100,  
    width: 100,  
    height: 100,  
    fill:{  
        image: img,  
        crop:{  
            x: 0,  
            y: 0,  
            width: 100,  
            height: 100  
        },   
    }
});

仍然无法工作http://jsfiddle.net/cm5jj/1/ 请帮忙。
非常感谢。

Answer 1

我认为问题在于您将图像裁剪为图像大小的确切尺寸，这意味着您根本没有裁剪。尝试将宽度和高度设置为大于裁剪宽度和高度值的值。

另外，如果你想为精灵设置动画，你应该使用 Kinetic.Sprite() 代替

Answer 2

在您的第一个代码段中，您输入了错误height的heigth. 也许拼写检查会对此有所帮助。

至于你的第二个代码片段，要用图像填充矩形，你需要fillPatternImage属性，它需要一个图像对象，fill用于填充颜色。

fill例子：

var rect = new Kinetic.Rect({  
    x: 100,  
    y: 100,  
    width: 100,  
    height: 100,  
    fill: 'blue'
});

fillPatternImage例子：

var img = new Image();
img.onload = function() {
    var rect = new Kinetic.Rect({  
        x: 100,  
        y: 100,  
        width: 100,  
        height: 100,  
        fillPatternImage: img
    });
    // Add rect to your layer, and do drawing
};
img.src = 'http://cdn.sstatic.net/img/share-sprite-new.svg';