如何使用KineticJS和矩形裁剪图像？

Question

我正在使用KineticJS将图像放在画布上。然后，我想在它们上面绘制一个矩形，让用户可以捏住调整矩形的大小，然后将图像裁剪为那些尺寸。我的矩形显示效果很好，但是在矩形上它没有裁剪出适当的尺寸。

谁能告诉我这里缺少什么？

$(document).on("tap", "#edit-menu-reccrop", function(e) {
    e.stopPropagation();

    var astroElement = stage.find("#" + localStorage.getItem("canvas_image_selected"));

    var adjWidth = astroElement[0].attrs.image.width * astroElement[0].attrs.scaleX;
    var adjHeight = astroElement[0].attrs.image.height * astroElement[0].attrs.scaleY;

    var rect = new Kinetic.Rect({
        x:astroElement[0].attrs.x,
        y:astroElement[0].attrs.y,
        offsetX:adjWidth / 2,
        offsetY:adjHeight / 2,
        width:adjWidth,
        height:adjHeight,
        stroke:"blue",
        strokeWidth:4,
        draggable:true,
        id:'cropRect'
    });

    transImage(rect, false);

    layer.add(rect);
    stage.add(layer);

    hideManiMenu();

    rect.on("tap", function() {
        astroElement.crop({
            x:rect.attrs.x,
            y:rect.attrs.y,
            width:rect.attrs.width,
            height:rect.attrs.height
        });

        rect.remove();

        layer.draw();
    });
});