Javascript 如何使用KineticJS限制图像拖动？

小提琴：

我使用KineticJS将图像添加到组中，然后将矩形添加到组中。我希望能够仅在组的边界内拖动矩形。首先，我创建了组并将图像放在其中：

//Set up Kinetic

Kinetic.pixelRatio = 1;

var stage = new Kinetic.Stage({
  container: 'stage',
  width: $(document).width(),
  height: $(document).height()
});

var layer = new Kinetic.Layer();

stage.add(layer);

function placeImage(insertImage) {
    //Place image on canvas

    var imageObj = new Image();

    imageObj.onload = function() {
        xCoord = imageObj.width / 2;
        yCoord = imageObj.height / 2;

        var piece = new Kinetic.Image({
            image:imageObj,
            width:500,
            height:500
        });

        var pieceGroup = new Kinetic.Group({
            x: xCoord,
            y: yCoord,
            offsetX: imageObj.width / 2,
            offsetY: imageObj.height / 2,
            id:'image',
            offsetX: imageObj.width / 2,
            offsetY: imageObj.height / 2,
            draggable:true
        });

        pieceGroup.add(piece);
        layer.add(pieceGroup);
        stage.add(layer);

        addRect();
    };

    imageObj.src = insertImage;
}

placeImage("http://emboldenmedia.com/staging/astrocollage/img/library/planets/pla1.png");

然后我添加了矩形，其中列出了dragBoundFunc。然而，这个函数就是不起作用。我能做些什么改进吗？这是一把小提琴：

函数addRect（）{
var astroElement=stage.find（'#image'）；
var adjWidth=astroElement[0]。子元素[0]。attrs.image.width；
var adjHeight=astroElement[0]。子元素[0]。attrs.image.height；
控制台日志（astroElement）；
var rect=新的动能.rect({
x:astroElement[0].attrs.x，
y:天体元素[0]。属性y，
偏移量x:adjWidth/2，
偏置：调整高度/2，
宽度：300，
身高：300，
笔画：“蓝色”，
冲程宽度：4，
真的，
id:'cropRect'，
dragBoundFunc:函数（位置）{
var X=位置X；
变量Y=位置Y；
if（XmaxX）{
X=最大X；
}
if（YmaxY）{
Y=最大值；
}
返回{
x:x，
y:y
}
}
});
var minX=astroElement.getX（）；
var maxX=astroElement.getX（）+astroElement.getWidth（）-rect.getWidth（）；
var minY=astroElement.getY（）；
var maxY=astroElement.getY（）+astroElement.getHeight（）-rect.getHeight（）；
astroElement.add（rect）；
layer.draw（）；
}

find（选择器）

返回集合。所以你不能这么做

stage.find('#image').getX();

Kinetic.组

没有宽度和高度（等于0）。在您的情况下，您可以使用图像宽度作为组宽度

astroElement.find('Image')[0].getWidth()

astroElement.find('Image')[0].getWidth()