KineticJS : 복제 된 이미지 (최대 클론 번호 포함)가 캔버스 주위를 끌 때 사라집니다.

Question

복제 항목을 제한하는 최대 복제 번호를 설정해야합니다. 그 항목은 드래그 가능합니다. 문제는이 예를 설명한다 :

• 내가 2 최대 수를 설정,
• 내가 드롭 타겟으로 두 항목을 드래그
가 나는 캔버스 주위에 그들 중 하나를 드래그 할 때, 내가 최대 숫자에 도달했다는 경고 메시지가 나타나고 아이템이 제거됩니다 (코딩 한대로)!

코드 : 나는 이벤트 후 한두 줄을 추가해야하지만 지역화 할 수없는 것

cloneImg.on('dragend', function(){ 
    if (img.maxClones>0) 
    { 
     img.maxClones--; 
     var point = cloneImg.getPosition(); 
     rightLayer.draw(this); 
     stage.draw(); 
    }   
    else { 
     alert("Equipment Unavailable: max number is "+max+", and has already been reached."); 
     revert(this,this.startX,this.startY); 
     rightLayer.draw(); 
     stage.draw(); 
    } 
} 

. 이런 일이 발생하지 않도록하려면 어떻게해야합니까?

Answer 1

은 어쩌면 원래의 상단에 클론의 적절한 스택과 함께 시작하는 당신의 논리를 재 작업 :

데모 :

1. 원본 만들기 : 시작 화면에서 http://jsfiddle.net/m1erickson/3XSAz/

   하우스 (논 드래그 가능).

2. 원래 집 2 개를 복제하고 원본 위에 직접 놓습니다. 클론은 드래그 가능합니다. layer.add (original.clone ({draggable : true})); dragend
   1. 복제가 제대로 DROPZONE 내부에서 삭제하면 복제에

   , 거기 복제를 둡니다.

3. 복제본을 드롭 존 외부에 떨어 뜨린 경우 원래 복제본 바로 위에 놓습니다.

50 % 불투명도로 드래그 할 수없는 원본을 만들 수 있으므로 사용자는 사용 가능한 모든 요소를 ​​언제 사용했는지 시각적으로 확인할 수 있습니다.

예제 코드 :

var sw=stage.width(); 
var sh=stage.height(); 

layer.add(new Kinetic.Rect({x:sw/2,y:0,width:sw/2,height:sh,fill:"lightblue"})); 

var original = new Kinetic.Circle({ 
    x:100, 
    y:100, 
    radius: 30, 
    fill: 'red', 
    stroke: 'black', 
    strokeWidth: 4, 
    opacity:0.50, 
}); 
original.maxClones=2; 
layer.add(original); 
layer.draw(); 
makeClones(original); 

function makeClones(base){ 
    for(var i=0;i<original.maxClones;i++){ 
     var clone=base.clone({draggable:true,opacity:1.00}); 
     clone.startingX=clone.x(); 
     clone.startingY=clone.y(); 
     clone.on("dragend",function(){ 
      if(this.x()>sw/2){return;} 
      this.x(this.startingX); 
      this.y(this.startingY); 
      layer.draw(); 
     }); 
     layer.add(clone); 
    } 
    layer.draw(); 
}