如何创建 JQuery / svg 单击拖动选择轮廓效果？

不知道到底该怎么称呼它，但我正在寻找一种方法，当您单击并拖动某个区域时，通过 javascript/svg 创建点线轮廓/选择框效果，然后在 mouseUp 上消失（如果它可以添加）不是原装部件）。

如果有 jQuery 库就好了。我环顾四周，并没有找到我想要的东西。
我想理论是从第一次单击中获取坐标，跟踪鼠标坐标时刻并相应地调整框。

但不从头开始写就很好了。

这是我专门为你制作的演示:)

演示（静态）：http://jsfiddle.net/HNH2f/1/ http://jsfiddle.net/HNH2f/1/

演示（动画）：http://jsfiddle.net/HNH2f/2/ http://jsfiddle.net/HNH2f/2/

您可以使用 CSS 来控制选取框的视觉样式。 您可以将一两个函数传递给trackMarquee方法;两者都将使用四个参数进行调用：选取框的 x1、y1、x2、y2 边界。当选取框被释放时，将调用第一个函数。每次选取框移动时都会调用第二个函数（如果存在）（例如，这样您就可以计算该边界框中有哪些项目）。

当您开始拖动 SVG 文档（或您选择跟踪的任何元素）时，它将创建一个<rect class="marquee" />;拖动过程中，它将调整矩形的大小。使用 CSS（如演示中所示）根据需要设置此矩形的样式。我正在使用stroke-dasharray http://www.w3.org/TR/SVG/painting.html#StrokeDasharrayProperty属性使边框点缀。

对于 Stack Overflow 的后代，这里是代码（万一 JSFiddle 宕机了）：

(function createMarquee(global){
  var svgNS = 'http://www.w3.org/2000/svg',
      svg   = document.createElementNS(svgNS,'svg'),
      pt    = svg.createSVGPoint();

  // Usage: trackMarquee( mySVG, function(x1,y1,x2,y2){}, function(x1,y1,x2,y2){} );
  // The first function (if present) will be called when the marquee is released
  // The second function (if present) will be called as the marquee is changed
  // Use the CSS selector `rect.marquee` to select the marquee for visual styling
  global.trackMarquee = function(forElement,onRelease,onDrag){
    forElement.addEventListener('mousedown',function(evt){
      var point0 = getLocalCoordinatesFromMouseEvent(forElement,evt);
      var marquee = document.createElementNS(svgNS,'rect');
      marquee.setAttribute('class','marquee');
      updateMarquee(marquee,point0,point0);
      forElement.appendChild(marquee);
      document.documentElement.addEventListener('mousemove',trackMouseMove,false);
      document.documentElement.addEventListener('mouseup',stopTrackingMove,false);
      function trackMouseMove(evt){
        var point1 = getLocalCoordinatesFromMouseEvent(forElement,evt);
        updateMarquee(marquee,point0,point1);
        if (onDrag) callWithBBox(onDrag,marquee);
      }
      function stopTrackingMove(){
        document.documentElement.removeEventListener('mousemove',trackMouseMove,false);
        document.documentElement.removeEventListener('mouseup',stopTrackingMove,false);
        forElement.removeChild(marquee);
        if (onRelease) callWithBBox(onRelease,marquee);
      }
    },false);
  };

  function callWithBBox(func,rect){
    var x = rect.getAttribute('x')*1,
        y = rect.getAttribute('y')*1,
        w = rect.getAttribute('width')*1,
        h = rect.getAttribute('height')*1;
    func(x,y,x+w,y+h);
  }

  function updateMarquee(rect,p0,p1){
    var xs = [p0.x,p1.x].sort(sortByNumber),
        ys = [p0.y,p1.y].sort(sortByNumber);
    rect.setAttribute('x',xs[0]);
    rect.setAttribute('y',ys[0]);
    rect.setAttribute('width', xs[1]-xs[0]);
    rect.setAttribute('height',ys[1]-ys[0]);
  }

  function getLocalCoordinatesFromMouseEvent(el,evt){
    pt.x = evt.clientX; pt.y = evt.clientY;
    return pt.matrixTransform(el.getScreenCTM().inverse());
  }

  function sortByNumber(a,b){ return a-b }
})(window);