在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/

然后我尝试用图像填充rect

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