PaperJS 드래그 앤 드롭 서클

Question

onMouseDrag을 사용하여 그린 원에 드래그 앤 드롭을 적용하려면 어떻게해야합니까? Look at the fiddle

Answer 1

Here is a fiddle 드래그 앤 드롭에 대한 대략적인 설명이 포함되어 있습니다. 일반적으로 마우스 도구에는 두 가지 모드가 있습니다. 그리기 및 드래그. 바이올린의 상태 관리가 약하고 적절한 마우스 도구를 쓰려면 paper.js에 대한 심층적 인 지식이 필요합니다.

<script type="text/paperscript" canvas="canvas"> 
     var path = null; 
     var circles = []; 

     // Mouse tool state 
     var isDrawing = false; 
     var draggingIndex = -1; 

     function onMouseDrag(event) { 

      // Maybe hit test to see if we are on top of a circle 
      if (!isDrawing && circles.length > 0) { 
       for (var ix = 0; ix < circles.length; ix++) { 
        if (circles[ix].contains(event.point)) { 
         draggingIndex = ix; 
         break; 
        } 
       } 
      } 

      // Should we be dragging something? 
      if (draggingIndex > -1) { 
       circles[draggingIndex].position = event.point; 
      } else { 
       // We are drawing 
        path = new Path.Circle({ 
         center: event.downPoint, 
         radius: (event.downPoint - event.point).length, 
         fillColor: null, 
         strokeColor: 'black', 
         strokeWidth: 10 
        }); 

        path.removeOnDrag(); 
        isDrawing = true; 
      } 
     }; 

     function onMouseUp(event) { 
      if (isDrawing) { 
       circles.push(path); 
      } 

      // Reset the tool state 
      isDrawing = false; 
      draggingIndex = -1; 
     }; 
</script> 
<canvas id="canvas"></canvas>