SVG滑鼠相對于轉換元素的位置-有解無憂

我有一些 SVG 元素，我想添加使用滑鼠調整大小的功能。當元素沒有任何變換（矩陣、旋轉、縮放等）時，它作業得很好。

如果我從 rect 元素中洗掉 transform (transform="matrix(1.1,1.1,1,0,0,0)") - 效果很好。

我的理解是我應該使用 matrix.inverse() 函式并對其進行轉換，以便在元素空間中獲得滑鼠坐標，但我嘗試的一切對我都不起作用。

我需要正確計算起始拖動點和當前點之間的 x、y 差異，但它不起作用。

      var rect = document.getElementById('rect');
      var grip = document.getElementById('grip');
      function moveGrip() {
          var baseMatrix = rect.getCTM(),
            x = rect.width.baseVal.value   rect.x.baseVal.value,
              y = rect.height.baseVal.value   rect.y.baseVal.value;
          grip.cx.baseVal.value = x * baseMatrix.a   y * baseMatrix.c   baseMatrix.e;
          grip.cy.baseVal.value = x * baseMatrix.b   y * baseMatrix.d   baseMatrix.f;
      }
    
      grip.addEventListener('mousedown', onGripMouseDown);
      document.addEventListener('mousemove', onDocMouseMove);
    
      var startDragPoint, startDragSize;
      function onGripMouseDown(evt) {
          startDragSize = {w: rect.width.baseVal.value, h: rect.height.baseVal.value};
          startDragPoint = {x: evt.clientX, y: evt.clientY};
      }
    
      function onDocMouseMove(evt) {
          if (evt.buttons & 1) {
          //    dragging
              rect.width.baseVal.value = startDragSize.w   evt.clientX - startDragPoint.x;
              rect.height.baseVal.value = startDragSize.h   evt.clientY - startDragPoint.y;
              moveGrip();
          }
      }
    
      moveGrip();

  <svg width="500" height="400">
      <rect id="rect" x="20" y="20" width="200" height="100"
            transform="matrix(1.1,1.1,1,0,0,0)"
            style="fill:none;stroke: #3a2dd0; stroke-width: 2px;"></rect>
      <g>
          <circle id="grip" r="3" stroke-width="1" stroke="green"></circle>
      </g>
  </svg>

uj5u.com熱心網友回復：

可能，您需要將逆矩陣應用于 delta-x,y，如下所示；

function onDocMouseMove(evt) {
    if (evt.buttons & 1) {
        //    dragging
        var invMatrix = rect.getCTM().inverse(),
        x = evt.clientX - startDragPoint.x,
        y = evt.clientY - startDragPoint.y;

        rect.width.baseVal.value = startDragSize.w   x * invMatrix.a   y * invMatrix.c;
        rect.height.baseVal.value = startDragSize.h   x * invMatrix.b   y * invMatrix.d;
        moveGrip();
    }
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/516167.html

標籤：svg矩阵转换

上一篇：SVGclipPpath多個多邊形元素不起作用，因為xor

下一篇：如何用相反的背景顏色填充SVG？