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

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

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

但它不起作用

然后我尝试用图像填充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  
        },   
    }
});

但仍然不起作用 请帮忙

---

非常感谢。

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

---

另外，如果你想给精灵设置动画，你应该使用Kinetic.sprite（）来代替

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

---

此外，如果您想为精灵设置动画，则应使用Kinetic.sprite（）代替

在您的第一个代码片段中，您将

高度

与

高度

输入错误。也许拼写检查能帮上忙

至于第二个代码段，要用图像填充矩形，需要

fillPatternImage

属性，该属性需要一个图像对象，并且

fill

用于填充颜色

填充

示例：

fillPatternImage

示例：

---

在第一个代码段中，您用

heigth

错误地键入了

height

。也许拼写检查能帮上忙

至于第二个代码段，要用图像填充矩形，需要

fillPatternImage

属性，该属性需要一个图像对象，并且

fill

用于填充颜色

填充

示例：

fillPatternImage

示例：

---

我想在鼠标悬停/mouseout/mousedown并单击时更改图像。因此，我认为使用裁剪绘制图像应该更合适。我想在鼠标悬停/mouseout/mouseown并单击时更改图像。所以我认为用裁剪画图像应该更合适

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

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