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>

当我添加transform时，旋转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>

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

1 个答案: