Javascript 使用kinectic文件从多个形状中调整目标形状的大小

我正在完成一项任务，即通过kinetic js文件在点击事件中创建、拖动、调整多个形状

几乎我已经做了所有的事情，问题来了，我想当我创建多个形状和之后，当我在该形状做调整时，第一个形状只调整大小，它不是调整多个形状的大小

所以我想调整鼠标箭头目标形状的大小

这是我的密码

//This update shows the image size minimum and maximum
function update(group, activeAnchor) {
    var topLeft = group.get(".topLeft")[0];
    var topRight = group.get(".topRight")[0];
    var bottomRight = group.get(".bottomRight")[0];
    var bottomLeft = group.get(".bottomLeft")[0];
    var rect = group.get(".rect")[0];
    // update anchor positions
     switch (activeAnchor.getName()) {
         case "topLeft":
             topRight.attrs.y = activeAnchor.attrs.y;
             bottomLeft.attrs.x = activeAnchor.attrs.x;
             if(topLeft.attrs.x >= topRight.attrs.x)
             {return;}
             break;
         case "topRight":
             topLeft.attrs.y = activeAnchor.attrs.y;
             bottomRight.attrs.x = activeAnchor.attrs.x;
             if(topRight.attrs.x <= topLeft.attrs.x)
             {return;}
             break;
         case "bottomRight":
             bottomLeft.attrs.y = activeAnchor.attrs.y;
             topRight.attrs.x = activeAnchor.attrs.x;
             if(bottomLeft.attrs.x >= topRight.attrs.x)
             {return;}                                                         
             break;
         case "bottomLeft":
             bottomRight.attrs.y = activeAnchor.attrs.y;
             topLeft.attrs.x = activeAnchor.attrs.x;
             if(bottomRight.attrs.x <= topLeft.attrs.x)
             {return;}                                                                                             
             break;
     }

     rect.setPosition(topLeft.attrs.x, topLeft.attrs.y);
     rect.setSize(topRight.attrs.x - topLeft.attrs.x, bottomLeft.attrs.y - topLeft.attrs.y);
}


            //AddAnchor gives set the corner of the image
function addAnchor(group, x, y, name) {

                 var stage = group.getStage();
                 var layer = group.getLayer();

                 var anchor = new Kinetic.Circle({
                     x: x,
                     y: y,  
                     stroke: "transparent",
                     fill: "transparent",
                     strokeWidth: 5,
                     radius: 35,
                     name: name,
                     draggable: true,
                     dragBounds: {
             top: 10,
             right: stage.getWidth() -10,
             bottom: 450,
             left: 10
           }
                 });

                 anchor.on("dragmove", function() {
                     update(group, this);
                     console.log(this);
                     layer.draw();
                 });
                 anchor.on("mousedown", function() {
                     group.draggable(false);
                     this.moveToTop();
                 });
                 anchor.on("dragend", function() {
                     group.draggable(true);
                     layer.draw();
                 });
                 // add hover styling
                 anchor.on("mouseover", function() {

                     var layer = this.getLayer();
                     document.body.style.cursor = "move";
                     this.setStrokeWidth(4);
                       this.setStroke("black");
                     fill: "red";
                     strokeWidth: 2;
                     radius: 8;
                      layer.draw();
                 });

                 anchor.on("mouseout", function() {
                     var layer = this.getLayer();
                     document.body.style.cursor = "default";
                     this.setStrokeWidth(2);
                      this.setStroke("transparent");
                     layer.draw();
                 });
                    group.add(anchor);
             }

function addRect()
{
    var rectShape = new Kinetic.Rect({
                    width: 300,
                    height:120,
                    strokeWidth: 2,
                     stroke: "red",
                     name: "rect"
      });

rectShape.on("mouseover", function() {
                     var layer = this.getLayer();
                     document.body.style.cursor = "cursor";
                     this.setStrokeWidth(0);
                     this.setStroke("pink");
                     writeMessage(messageLayer, "Double Click To Remove");
                     layer.draw();                   
                 });
rectShape.on("mouseout", function() {
                     var layer = this.getLayer();
                     document.body.style.cursor = "default";
                     this.setStrokeWidth(0);
                      this.setStroke("pink");
writeMessage(messageLayer, " ");
                      layer.draw();
                 });                 
var messageLayer = new Kinetic.Layer();
        stage.add(messageLayer);
                darthVaderGroup.add(rectShape);
                addAnchor(darthVaderGroup, 0, 0, "topLeft");
                addAnchor(darthVaderGroup, 300, 0, "topRight");
                addAnchor(darthVaderGroup, 300, 120, "bottomRight");
                addAnchor(darthVaderGroup, 0, 120, "bottomLeft");
                addAnchor(darthVaderGroup, 0, 120, "bottomLeft");

      rectShape.on("dblclick", function(){
                var shapesLayer=this.getLayer();
 darthVaderGroup.remove(rectShape);
 shapesLayer.clear();
 shapesLayer.draw();
   });


}

    //This click function is for create rectangle shape
$("#textsubmitShape").live("click",function(){
addRect();
});

//此更新显示图像大小的最小值和最大值
功能更新（组、activeAnchor）{
var topLeft=group.get（“.topLeft”）[0]；
var topRight=group.get（“.topRight”）[0]；
var bottomRight=group.get（“.bottomRight”）[0]；
var bottomLeft=group.get（“.bottomLeft”）[0]；
var rect=group.get（“.rect”）[0]；
//更新锚点位置
开关（activeAnchor.getName（））{
案例“左上”：
topRight.attrs.y=activeAnchor.attrs.y；
bottomLeft.attrs.x=activeAnchor.attrs.x；
if（topLeft.attrs.x>=topRight.attrs.x）
{return；}
打破
案例“topRight”：
topLeft.attrs.y=activeAnchor.attrs.y；
bottomRight.attrs.x=activeAnchor.attrs.x；
if（topRight.attrs.x=topRight.attrs.x）
{return；}
打破
案例“左下角”：
右下角.attrs.y=activeAnchor.attrs.y；
topLeft.attrs.x=activeAnchor.attrs.x；
如果（bottomRight.attrs.x您想要更改更新函数中rect的索引
i、 e.var rect=group.get（“.rect”）[0]；
0显示第一个形状，这就是为什么它只调整第一个形状的大小。
但是，我们如何根据目标形状改变索引，我也不知道。
是的，我知道，但我想要解决这个问题。