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

Posted 2023-05-08

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

【英文标题】：I am drawing line using SVG and jQuery UI I want to draw it in all directions but it not working

【发布时间】：2019-05-19 17:21:09

【问题描述】：

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

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

html/SVG 部分代码如下：-

<div id="maindiv">
    <div id="annotationText">
    <svg id="line"  >
      <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 以正确的方式画线？我能够做到，但这不是我想要的方式。我在上面的代码中绘制的线没有在所有方向都跟随可调整大小的指针。

【问题讨论】：

它可以在没有 jQuery UI 的情况下完成。让我知道您是否可以接受使用纯 javascript 进行操作。

@enxaneta 是的，如果它满足我的要求是可以接受的。我还需要这条线的 x1,y1 和 x2,y2 点。我想在创建它时显示它。

【参考方案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;

svgborder:1px solid;
linestroke:rgb(255,0,0);stroke-width:2;pointer-events:none;

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

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

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

【讨论】：

好的，我会检查你的。我在下面也得到了这个。 jsfiddle.net/e8sjvhb9