PaperJS glisser et déposer cercle

Question

Comment puis-je appliquer glisser et déposer pour les cercles qui est dessiné en utilisant onMouseDrag. Look at the fiddle

Answer 1

Here is a fiddle avec une démonstration approximative pour glisser-déposer. En général, l'outil de souris a deux modes; dessiner et glisser. La gestion de l'état dans le violon est faible et l'écriture d'un outil propre à la souris nécessiterait une connaissance plus approfondie de 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>