我正在使用 SVG 和 jQuery UI 绘制线条我想在各个方向上绘制它但它不起作用

Question

可拖动和调整大小的代码在这个函数中

makeDragableLine('#maindiv #annotationText',jQuery('#maindiv'));

HTML/SVG 部分代码如下：-

<div id="maindiv">
    <div id="annotationText">
    <svg id="line" height="210" width="500">
      <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
    </svg>
    </div>
    </div>

下面是主要功能

function makeDragableLine(selector,obj){

    var height=obj.height();
        var width=obj.width();
        var objdiv = $(selector);
        var line = $("#line", objdiv);
        var objdiv=jQuery( selector );
          jQuery( selector ).draggable({      
              containment: obj,
              drag: function( event, ui ) { 
              var cleft=ui.position.left*100/width;
              var top=ui.position.top*100/height;
              jQuery(event.target).attr('data-offsetx',cleft);
              jQuery(event.target).attr('data-offsety',top);

              }, stop: function( event, ui ) {
                console.log('doneDrag1');
                var PageNumber=jQuery(event.target).parents('.page').attr('data-page-number');
                    var parentele=jQuery(event.target)
                  SaveAnnotation(parentele,PageNumber);

               }

          }).resizable({
          //aspectRatio: 1.0,
          handles: 'ne, se, sw, nw',
          containment: obj,
          minWidth: 40,
          minHeight: 40,
          resize: function(e, ui) {
            line.attr({
              width: ui.size.width,
              height: ui.size.height
            });
            $("line", line).attr({
              x1: ui.size.width,
              y1: ui.size.height,
              x2: e.offsetX,
              y2: e.offsetY
            });
          }
        });

    }

如何使用 SVG 以正确的方式画线？我能够做到，但这不是我想要的方式。我在上面的代码中绘制的线没有在所有方向都跟随可调整大小的指针。

Answer 1

const SVG_NS = "http://www.w3.org/2000/svg";
let svg = document.querySelector("#lines");
let m = {};// the mouse position
let oLine = {};// an object for the line's attributes
let eLine = null; //the line element

//events
// on mouse down you create the line and append it to the svg element
lines.addEventListener("mousedown", e => {
  m = oMousePosSVG(e);
  oLine.x1 = m.x;
  oLine.y1 = m.y;
  oLine.x2 = m.x;
  oLine.y2 = m.y;
  eLine = drawline(oLine, lines);
});
// on mouse move you update the line 
lines.addEventListener("mousemove", e => {
  if (eLine) {
    m = oMousePosSVG(e);
    oLine.x2 = m.x;
    oLine.y2 = m.y;
    updateLine(oLine, eLine);
  }
});
// on mouse up or mouse out the line ends here and you "empty" the eLine and oLine to be able to draw a new line
lines.addEventListener("mouseup", e => {
  if (eLine) {
    m = oMousePosSVG(e);
    eLine = null;
    oLine = {};
  }
});

lines.addEventListener("mouseout", e => {
  if (eLine) {
    m = oMousePosSVG(e);
    eLine = null;
    oLine = {};
  }
});


// a function to draw a line in SVG
function drawline(o, parent) {
  let line = document.createElementNS(SVG_NS, "line");
  for (var name in o) {
    if (o.hasOwnProperty(name)) {
      line.setAttributeNS(null, name, o[name]);
    }
  }
  parent.appendChild(line);
  return line;
}
// a function to update a line in SVG
function updateLine(o, element) {
  for (var name in o) {
    if (o.hasOwnProperty(name)) {
      element.setAttributeNS(null, name, o[name]);
    }
  }
  return element;
}
// a function to detect the mouse position on a resizable SVG element
function oMousePosSVG(ev) {
  var p = svg.createSVGPoint();
  p.x = ev.clientX;
  p.y = ev.clientY;
  var ctm = svg.getScreenCTM().inverse();
  var p = p.matrixTransform(ctm);
  return p;
}

svg{border:1px solid;}
line{stroke:rgb(255,0,0);stroke-width:2;pointer-events:none;}

<div id="maindiv">
    <div id="annotationText">
    <svg id="lines" height="210" width="500">
      <line x1="0" y1="0" x2="200" y2="200" />
    </svg>
    </div>
    </div>

观察：如果您需要响应式 SVG，请更改 viewBox 的宽度和高度属性，在这种情况下为 viewBox="0 0 210 500"

如果您需要保存这些行以供以后重用，您可以在鼠标抬起和离开时将 eLine 推入一个数组。