JQuery 및 KineticJS HTML5 그리기 및 끌어 놓기

Question

캔버스에서 마우스를 사용하여 선을 그릴 페이지를 디자인하고 놓기 항목 &을 드래그합니다.

내 주요 문제는 하나의 항목 만 삭제할 수 있다는 것입니다. 두 번째 문제는 항목을 드래그 할 때 복제 할 수 없다는 점입니다. 그래서 처음부터 for 루프를 복제합니다. http://www.trustweb.it/Html5draw/

이 & 드롭 항목을 드래그 관련된 자바 스크립트는 다음과 같습니다 :

/***DRAG&DROP ITEMS ***/ 
     var overitem=0; 
     var start = null; 

     function bindGroupEvents(group, rect, trash) { 
      group.on('mouseover', function() { 

       overitem=1; 
       if(group.getStage()) { 
       trash.moveTo(group); 
       trash.show(); 
       trash.getLayer().draw(); 
       document.body.style.cursor = 'pointer'; 
       } 
      }); 

      group.on('mouseout', function() { 
       trash.hide(); 
       trash.getLayer().draw(); 
       document.body.style.cursor = 'default'; 
       overitem=0; 
      }); 

      group.on('dragmove', function() { 
       if(start) { 
       var rect = group.get('.rect')[0]; 
       rect.setWidth(start.rectWidth + group.getX() - start.groupX); 
       rect.setHeight(start.rectHeight + start.groupY - group.getY()); 
       group.setX(start.groupX); 
       trash.setX(rect.getWidth() - 24); 
       // draw shapes layer and handle layer 
       trash.getStage().draw(); 
       } 
      }); 

      group.on('dragstart', function() { 
       /* 
       if(group.getId()=='dryer' || group.getId()=='washing') 
       { 
       alert('to be cloned'); 
       } 
      */ 
       group.moveToTop(); 
      }); 
     } 


     function bindTrashEvents(trash) { 
      trash.on('mouseover', function() { 

       console.log('over'); 

       var group = trash.getParent(); 
       var rect = group.get('.rect')[0]; 
       start = { 
       groupX: group.getX(), 
       groupY: group.getY(), 
       rectWidth: rect.getWidth(), 
       rectHeight: rect.getHeight() 
       }; 
      }); 

      trash.on('mouseout', function(){ 
       start = null; 
      }); 

      trash.on('click', function() { 
       alert('click'); 

       trash.getParent().transitionTo({ 
        opacity: 0, 
        duration: 0.2, 
        callback: function() { 
         var rect = trash.getParent().remove(); 
        } 
       }) 
      }); 
     } 
     /*** END DRAG&DROP ***/ 

     window.onload = function() { 
      var layer = new Kinetic.Layer(); 
      var stage = new Kinetic.Stage({ 
       container: "container", 
       width: 978, 
       height: 598 
      }); 


      /** DRAG&DROP UITEM **/ 
      var shapesLayer = new Kinetic.Layer(); 
      var editLayer = new Kinetic.Layer(); 

      // build trash 
      trash = new Kinetic.Image({ 
       visible: false, 
       opacity: 0.7, 
       x: 3, 
       y: 3 
      }); 

      // load trash image 
      var trashImg = new Image(); 
      trashImg.onload = function() { 
       trash.setImage(trashImg); 
       editLayer.add(trash); 
      }; 
      trashImg.src = 'x.png'; 

      bindTrashEvents(trash); 

      // build rectangles 
      var colors = ['red', 'orange']; 

      /* washing machine */ 
      for(i=0;i<30;i++) 
      { 
      var group = new Kinetic.Group({ 
       x: 1, 
       y: 1, 
       id:'washing', 
       draggable: true 
      }); 
      var rect = new Kinetic.Rect({ 
       width: 50, 
       height:50, 
       fill: colors[0], 
       stroke: 'black', 
       opacity: 0.85, 
       name: 'rect' 
      }); 

      bindGroupEvents(group, rect, trash); 
      group.add(rect); 
      shapesLayer.add(group); 
      } 

      /* dryer */ 
      for(i=0;i<30;i++) 
      { 
      var group = new Kinetic.Group({ 
       x: 100, 
       y: 1, 
       draggable: true 
      }); 
      var rect = new Kinetic.Rect({ 
       width: 50, 
       height:50, 
       fill: colors[1], 
       stroke: 'black', 
       opacity: 0.85, 
       name: 'rect' 
      }); 
      bindGroupEvents(group, rect, trash); 
      group.add(rect); 
      shapesLayer.add(group); 
      } 
      stage.add(shapesLayer); 
      stage.add(editLayer); 

     } 

Answer 1

최신 KineticJS 4.3 당신이 사용할 수있는 .clone() 메소드가

이 전체 페이지입니다.

group.on('click', function(){ 
    var newRect = rect.clone(); 
    shapesLayer.add(newRect); 
    newRect.simulate('mousedown'); 
    newRect.simulate('dragstart'); 
} 

참조 : http://jsfiddle.net/CPrEe/38/

당신이 레이어에있는 모든 항목을 제거 할 경우에 당신은 다만 할 수 있습니다

layer.removeChildren(); 

하거나 수행

layer.hide(); 

을 그래서 그 전체 층을 보지 마라.

http://jsfiddle.net/CPrEe/77/

group.on('click', function(){ 
    var newRect = rect.clone(); 
    shapesLayer.add(newRect); 
    newRect.fire('mousedown'); 
    newRect.fire('dragstart'); 
}