Snap.svg - 여러 항목을 선택하려면 드래그

Question

이미 드래그하여 여러 요소를 선택하도록 만들어진 기존의 오픈 소스 Snap.svg 클래스가 있는지 궁금한가요? jQuery 드래그 선택과 같은 것을 찾으십시오. 이처럼

는 : JSFiddle

$(".itemlist").selectable({filter:"li"}); 

Answer 1

나는이 사용 라파엘 JS에 대한 예를 발견하고 나는 그것이 스냅와 함께 작동하도록 변환됩니다. 코데펜이 있습니다.

http://codepen.io/fractorr/pen/vOzaOx/

  $(document).ready(function() { 
      var s = Snap("#svg"); 

      //make an object in the background on which to attach drag events 
      var mat = s.rect(0, 0, 300, 300).attr("fill", "#ffffff"); 

      var circle = s.circle(75, 75, 50); 
      var rect = s.rect(150, 150, 50, 50); 
      var set = s.g(circle, rect); 

      set.attr({ 
       fill: 'red', 
       stroke: 0 
      }); 

      var box; 

      //set that will receive the selected items 
      var selections = s.group(); 

      //DRAG FUNCTIONS 
      //when mouse goes down over background, start drawing selection box 
      function dragstart (x, y, event) { 
       box = s.rect(x, y, 0, 0).attr("stroke", "#9999FF");  
      } 

      //when mouse moves during drag, adjust box. If to left or above original point, you have to translate the whole box and invert the dx or dy values since .rect() doesn't take negative width or height 
      function dragmove (dx, dy, x, y, event) { 
       var xoffset = 0, 
        yoffset = 0; 

       if (dx < 0) { 
        xoffset = dx; 
        dx = -1 * dx; 
       } 

       if (dy < 0) { 
        yoffset = dy; 
        dy = -1 * dy; 
       } 

       box.transform("T" + xoffset + "," + yoffset); 
       box.attr("width", dx);  
       box.attr("height", dy); 
       box.attr("fill", "none"); 
      } 


      function dragend (event) { 
       //get the bounds of the selections 
       var bounds = box.getBBox(); 
       box.remove(); 
       reset(); 

       var items = set.selectAll("*"); 
       items.forEach(function(el) { 
        //here, we want to get the x,y vales of each object regardless of what sort of shape it is, but rect uses rx and ry, circle uses cx and cy, etc 
        //so we'll see if the bounding boxes intercept instead 
        var mybounds = el.getBBox(); 

        //do bounding boxes overlap? 
        //is one of this object's x extremes between the selection's xextremes? 
        if (Snap.path.isBBoxIntersect(mybounds, bounds)) { 
         selections.append(el); 
        } 
       }); 

       selections.attr("opacity", 0.5); 
      } 


      function reset() { 
       //empty selections and reset opacity; 
       var items = selections.selectAll("*"); 
       items.forEach(function(el) { 
        set.append(el); 
       }); 
      } 

      mat.drag(dragmove, dragstart, dragend); 
     });