2013-06-17 2 views
0

사용자가 더 큰 패턴을 만들기 위해 다시 사용할 수있는 편집 가능한 패턴을 만들고 있습니다. 사용자가 첫 번째 작은 패턴을 큰 패턴 격자로 드래그하면이를 복제하고 다른 레이어에 추가하고 사용자가이를 재사용하거나 편집 할 수있게합니다. 복제 된 노드는 여전히 편집 및 드래그 가능하지만 바인딩 된 이벤트는 상호 작용으로 실행되지 않습니다. 난 정말이 어떤 도움을 주셔서 감사합니다 것복제 된 모양에서 작동하지 않습니다.

var B = A = new Kinetic.Shape(); 
var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 1000, 
    height: 650 
    }); 
var Alayer = new Kinetic.Layer(); 
var Blayer = new Kinetic.Layer(); 

var BGrid = new Kinetic.Group(); 

for(var v = 0; v < 4; v++){ 
for(var h = 0; h < 4; h++){ 
    (function(){ 
     var grid = new Kinetic.Rect({ 
      x: 300 + (h * 120), 
      y: 50 + (v *120), 
      width: 120, 
      height: 120, 
      stroke: 'black', 
      strokeWidth: 1, 
      listening: false 
     }); 
     BGrid.add(grid); 
    })(); 
} 

} 

(function() { 
    var AS = new Kinetic.Rect({ 
    x: 150, 
    y: 110, 
    width: 120, 
    height: 120, 
    draggable:true, 
    stroke: 'black', 
    strokeWidth: 1, 
    offset: [60,60], 
    }); 
B = AS; 
Alayer.add(B); 
})(); 

Blayer.add(BGrid); 


stage.add(Blayer); 
stage.add(Alayer); 

Blayer.on('click', function(evt) { 
B = evt.targetNode; 
B.setStroke('red'); 

}); 
B.on('dragend',function(){ 
    var px = B.getX(); 
    var py = B.getY(); 
//some code that's not executing 
}); 
A.on('dragend',function(){ 
var sx = A.getX(); 
var sy = A.getY(); 
if((300 < sx && sx < 780) && (50 < sy && sy < 530)){ 
    A.moveTo(Blayer); 
    B = A; 
    var C = A.clone(); 
    C.setPosition(150,110); 
    Alayer.add(C); 
    A = C; 
}else{ 
    A.setPosition(150,110); 
} 
Alayer.draw(); 
Blayer.draw(); 
}); 

: 다음은 내 코드입니다.

답변

0

당신은 오타가 :

B.on('dragend',function(){ 
    var px = B.getX(); 
    var py = B.getY(); // not b.getY(); 
    alert("dragend!"); 
    //some code that's executing 
}); 

http://jsfiddle.net/lavrton/JYqJp/

+0

내가 코드를 줄이면 오타가 삽입되어 문제가되지 않았습니다. 어떤 이유로 든 .on()이 두 번 이상 작동하지 않습니다. – JBAvalos

+0

jsfiddle이 맞습니까? .on()이 여러 번 작동합니다. – lavrton

+0

jsfiddle은 첫 번째 드래그 스타트에서만 작동하며 모양을 복제하지 않습니다. 그러나 나는 생각했다. 현재 내 코드를 편집하면 곧 최종 결과가 게시됩니다. 감사 – JBAvalos

0

여기에 내가 그 사람을 도움이됩니다 있는지 확실하지 않습니다, 함께했다 솔루션입니다,하지만 난 그게 않습니다 바랍니다.

stage.on('dragend',function(e){ 
var t = e.targetNode; 
var n = t.getName(); 
var sx = t.getAbsolutePosition().x; 

if(300 < sx && sx < 780 && n == 'A'){ 

    //previous code for A 

}else if(300 < sx && sx < 780 && n != 'A'){ 

    //previous code for B 

}else if(n == 'A'){ 

    t.setAbsolutePosition(150,110); 

}else{ 

    t.remove(); 
} 
stage.draw(); 
});` 
관련 문제