kinectic 파일을 사용하여 여러 모양 중에서 대상 모양의 크기를 조정하십시오.

Question

kinetic js 파일을 통해 클릭 이벤트에서 하나의 작업, 즉 만들기, 끌기, 크기 조정에 대한 작업을하고 있습니다.

거의 모든 것을 다했는데 문제는 내가 여러개의 모양을 만들 때 그 때 그 모양으로 크기를 변경하려고 할 때 첫 번째 모양 만 크기를 조정하면 여러개의 크기가 조정되지 않는다는 것입니다. 모양.

그래서 마우스 화살표 타겟 모양의 크기를 조정하려고합니다. 여기

는 업데이트 기능에 RECT의 인덱스를 변경하려면 내 코드,

//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(); 
}); 

Answer 1

입니다 즉 VAR RECT = group.get ("RECT.") [0] 0은 첫 번째 도형을 보여주기 때문에 첫 번째 도형의 크기 만 조절됩니다. 그러나 우리는 타겟 도형에 따라 그 인덱스를 어떻게 바꿀 것인가, 나는 또한 모른다.