사용자가 더 큰 패턴을 만들기 위해 다시 사용할 수있는 편집 가능한 패턴을 만들고 있습니다. 사용자가 첫 번째 작은 패턴을 큰 패턴 격자로 드래그하면이를 복제하고 다른 레이어에 추가하고 사용자가이를 재사용하거나 편집 할 수있게합니다. 복제 된 노드는 여전히 편집 및 드래그 가능하지만 바인딩 된 이벤트는 상호 작용으로 실행되지 않습니다. 난 정말이 어떤 도움을 주셔서 감사합니다 것복제 된 모양에서 작동하지 않습니다.
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();
});
: 다음은 내 코드입니다.
내가 코드를 줄이면 오타가 삽입되어 문제가되지 않았습니다. 어떤 이유로 든 .on()이 두 번 이상 작동하지 않습니다. – JBAvalos
jsfiddle이 맞습니까? .on()이 여러 번 작동합니다. – lavrton
jsfiddle은 첫 번째 드래그 스타트에서만 작동하며 모양을 복제하지 않습니다. 그러나 나는 생각했다. 현재 내 코드를 편집하면 곧 최종 결과가 게시됩니다. 감사 – JBAvalos