如何在不使用“变换”的情况下旋转 div？

Question

我正在使用 SVG 库中的扩展在 div 内绘图 (https://sggjs.com/svg.draw.js/)。但是，可以使用“变换”来旋转它。旋转只是视觉上的，保持图像的 X 和 Y 轴不变，导致“svg.draw”在旋转时绘制错误的坐标。如何通过更改其轴来旋转以跟上旋转并获得正确的点以在同一个旋转的 div 上绘制？谢谢。

编辑：添加代码。

绘制函数：

drawImage = function (pointsRelative) {
        var pointsToDraw = $scope.getAbsolutePoints(pointsRelative)
        pointsToDraw = pointsToDraw.join()

        var draw = SVG('cutImage').size('100%', '100%')

        draw.polygon(pointsToDraw).attr({
            fill: '#3d7e9a',
            'fill-opacity': 0.4,
            stroke: '#3d7e9a',
            'stroke-width': 1
        })
    }

获取用鼠标创建的点并转换为相对点的功能：

getRelativePoints = function (clickPoints) {
        let conv = []
        for (let item of clickPoints) {
             let x = item[0] / parseInt(widthImage)
             let y = item[1] / parseInt(heigthImage)
             conv.push([x, y])
        }
        return conv
    }

获取相对点并转换为绘制图像的绝对点的功能：

getAbsolutePoints = function (clickPoints) {
        let conv = []
        for (let item of clickPoints) {
            let x = item[0] * parseInt(widthImage)
            let y = item[1] * parseInt(heigthImage)
            conv.push([x, y])
        }
        return conv
    }

HTML 示例： <div id="cutImage" style="width: 300px; height: 800px;"></div>

当我添加变换旋转 90 度时，div 显示，但你的宽度和高度继续相同。

Answer 1

我认为问题在于您使用鼠标创建点的方式。在下一个示例中，我在旋转的 div (#wrap) 内绘制了一个 svg 元素。当您单击 svg 元素时，您会在控制台上获得鼠标位置。虽然 div 旋转了鼠标位置，但它应该在 svg 画布上：

我希望这会有所帮助。

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.addEventListener("click",(e)=>{
  let m = oMousePosSVG(e)
  console.log(m.x,m.y);  
})

svg{border:1px solid}

#wrap{
  margin:auto;
  position:absolute;
  top:0;bottom:0;left:0;right:0;
  width:200px;
  height:200px;
  transform: rotate(45deg);  
}

<div id="wrap">
<svg id="svg" viewBox="0 0 200 200">
</svg>
</div>