您将如何创建JQuery/svg单击并拖动选择轮廓效果? [英] How would you create a JQuery / svg click-drag select outline effect?

问题描述

不确定确切叫什么，但是我正在寻找一种方法，当您在区域上单击并拖动鼠标，然后在mouseUp上消失时，可以通过javascript/svg创建虚线轮廓/选择框效果.如果不是原始零件则添加).

Not sure exactly what to call it, but I am looking for a way to create a dotted outline/selection box effect via javascript/svg when you click and drag over an area, and then goes away on mouseUp (that could be added if it wasn't an original part) .

如果存在jQuery库，那就更好了.我已经环顾四周，但仍未找到我想要的东西.
我猜想该理论将是从第一次单击中获得坐标，跟踪鼠标坐标时刻并相应地调整框.

A jQuery library would be nice if it exists. I've done some looking around, and haven't found exactly what I am looking for.
I guess the theory would be get the coord from the first click, track the mouse coord moment and adjust the box accordingly.

但最好不要从头开始编写它.

But not writing it from scratch would be nice.

推荐答案

这是我为您制作的演示程序:)

Here's a demo I made just for you :)

您可以使用CSS来控制字幕的外观样式. 您可以将一个或两个函数传递给trackMarquee方法.都将使用四个参数调用:选取框的x1，y1，x2，y2边界.选取框释放时，将调用第一个函数.每次选取框移动时，都会调用第二个函数(如果存在)(例如，您可以计算边界框内的项目).

You can use CSS to control the visual style of the marquee. You can pass one or two functions to the trackMarquee method; both will be called with four arguments: the x1,y1,x2,y2 bounds of the marquee. The first function will be called when the marquee is released. The second function (if present) will be called each time the marquee moves (so that you can, for example, calculate what items are within that bounding box).

当您开始拖动SVG文档(或选择跟踪的任何元素)时，它将创建一个<rect class="marquee" />；在拖动过程中，它将调整矩形的大小.使用CSS(如演示中所示)随意设置此矩形的样式.我正在使用 stroke-dasharray 属性来使边框变为虚线.

When you start dragging on the SVG document (or whatever element you choose to track) it will create a <rect class="marquee" />; during dragging it will adjust the size of the rectangle. Use CSS (as seen in the demo) to style this rectangle however you want. I'm using the stroke-dasharray property to make the border dotted.

对于Stack Overflow后代来说，这是代码(如果JSFiddle宕机的话):

For Stack Overflow posterity, here's the code (on the off chance that JSFiddle is down):

(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);

这篇关于您将如何创建JQuery/svg单击并拖动选择轮廓效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！