javascript - 如何在不使用 "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 Canvas 上应该位于的位置:

希望对您有所帮助。

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>