如何在不使用"transform"的情况下旋转 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>