javascript - 如何在 SVG 中沿设定方向移动线条

Question

我有一个由 4 条线条形状组成的矩形。我希望能够通过拖动其 4 个边之一来调整其大小，但它需要保持矩形形状，我将尝试说明如下:

线条ab、bc、cd、da是单独的线条形状。在此示例中，通过用鼠标拖动，我需要移动线 cd 但它需要与其他线保持矩形形状(还需要适用于所有线，cd > 只是示例)。到目前为止，我有一个用于拖动线的代码:

function moveLine(previousCoo, x1, y1, x2, y2){ //following example above, x1 and y1 are point d and x2, y2 are point c
    if(document.getElementById('Line')){
        document.removeChild(document.getElementById('Line'));
    }
    var myLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
    myLine.setAttributeNS(null, "id", "Line");
    myLine.setAttributeNS(null, "x1", x1);
    myLine.setAttributeNS(null, "y1", y1);
    myLine.setAttributeNS(null, "x2", x2);
    myLine.setAttributeNS(null, "y2", y2);
    myLine.setAttributeNS(null, "stroke", "green");
    myLine.setAttributeNS(null, "stroke-width", 3);
    $(myLine).mousemove(function (e) {  //on mouse move, mousedown is already determined from another function
        var coo = getCoordinates(e.pageX, e.pageY); //function for getting current mouse coordinates
        var dCoo = [coo[0] - previousCoo[0], coo[1] - previousCoo[1]];   //calculate how much the mouse was moved
        x1 += dCoo[0];
        y1 += dCoo[1];
        x2 += dCoo[0];
        y2 += dCoo[1];
        moveLine(coo, x1, y1, x2, y2);
    }.bind(this));
    $(myLine).mouseup(function (e) {

        finish();

    }.bind(this));
    document.appendChild(myLine);
}

这仅适用于移动线条，但我需要它仅沿上图所示的方向移动。我尝试玩正弦、余弦之类的东西，但没有任何效果。有人可以指出我正确的方向吗？谢谢!

Answer 1

我正在使用 Robert Longson 的想法来旋转坐标系。

这就是我要做的:

围绕 [0,0] 点绘制矩形和直线，并且旋转它们所在的组。此外，这些线还有一个用于水平线的类 h 和用于垂直线的 v 类。或者，您可以检查垂直线是否为 x1 == x2 或水平线是否为 y1 == y2，而不是类。

拖动线条时，您会重置水平线的 y1、y2 属性值和 x1、x2 垂直线的属性。

函数oMousePosSVG正在检测svg Canvas 上的鼠标位置。

let lines = Array.from(document.querySelectorAll("#greenLines line"));
let dragging = false;
let theclass =  "";
let theLine = null;
let m = {}


lines.forEach((l,i) =>{
  l.addEventListener("mousedown",()=>{
    dragging = i+1;
    l.style.stroke = "red"
    theclass = l.getAttribute("class")
    theLine = lines[dragging - 1];
  })
})

  svg.addEventListener("mousemove",(e)=>{
    if(dragging){
       m = oMousePosSVG(e)
       if(theclass == "h"){
       theLine.setAttributeNS(null,"y1",m.y);
       theLine.setAttributeNS(null,"y2",m.y);
       }
       if(theclass == "v"){
       theLine.setAttributeNS(null,"x1",m.x);
       theLine.setAttributeNS(null,"x2",m.x);
       }
  }
  })

  svg.addEventListener("mouseup",()=>{
     lines[dragging - 1].style.stroke = "green"; 
     dragging = false;
  })


function oMousePosSVG(e) {
      var p = svg.createSVGPoint();
      p.x = e.clientX;
      p.y = e.clientY;
      var ctm = svg.getScreenCTM().inverse();
      var p =  p.matrixTransform(ctm);
      return p;
}

svg{border:1px solid}
#greenLines line{stroke:green; stroke-width:5px;stroke-linecap:round}

<svg id="svg" viewBox="-100 -100 200 200" >
  <g transform="rotate(25)">
  <polygon id="poly" points="-50,-30 50,-30 50,30 -50,30 -50,30"/>
  <g id="greenLines">
    <line id="ab" class="h" x1="-50" y1="30"  x2="50" y2="30" />
    <line id="bc" class="v" x1="50" y1="30"  x2="50" y2="-30" />
    <line id="cd" class="h" x1="50" y1="-30" x2="-50" y2="-30"  />
    <line id="da" class="v" x1="-50" y1="-30"  x2="-50" y2="30"  /> 
  </g>
  </g>
</svg>