Question

如何将路径旋转应用于矩形或路径等图形元素？

例如，将旋转应用于路径：

<svg width="200px" height="200px" viewbox="0 0 200 200">
  <rect x="100" y="0" width="20" height="20" fill="red" transform="rotate(45)"/>
</svg>

重要说明：
我没有运行浏览器。我记得曾经看到过使用浏览器或画布进行计算的解决方案。

我只有标记。对于路径，我具有路径数据，对于矩形，它具有位置，宽度和高度，以及直线x1 y1和x2 y2数据。

更新：
知道变换原点很重要。那将从元素中心旋转。

Answer 1

我将使用点数组来绘制路径。对于旋转，我将旋转点并绘制旋转的形状。请阅读代码中的注释。我希望这就是你的要求。

const SVG_NS = svg.namespaceURI;
// the rotation
let angle = Math.PI/4;
// the points used to rotate the initial rect
let theRect = [
  { x: 100, y: 0 },
  { x: 100 + 20, y: 0 },
  { x: 100 + 20, y: 0 + 20 },
  { x: 100, y: 0 + 20 }
];

// calculating the rotated points 
let rotatedRect = [];
theRect.forEach(p => {
  rotatedRect.push(rotatePoint(p, angle));
});


drawRect(theRect);
drawRect(rotatedRect);


// a function to draw the rect. For this I'm using the points array
function drawRect(ry) {
  let d = `M${ry[0].x},${ry[0].y}L${ry[1].x},${ry[1].y} ${ry[2].x},${ry[2].y} ${
  ry[3].x
  },${ry[3].y}`;
  drawSVGelmt({ d: d }, "path", svg);
}


// a function used to rotate a point around the origin {0,0}
function rotatePoint(p, rot) {
  let cos = Math.cos(rot);
  let sin = Math.sin(rot);
  return {
    x: p.x * cos - p.y * sin,
    y: p.x * sin + p.y * cos
  };
}


// a function to draw an svg element
function drawSVGelmt(o, tag, parent) {
  let elmt = document.createElementNS(SVG_NS, tag);
  for (let name in o) {
    if (o.hasOwnProperty(name)) {
      elmt.setAttributeNS(null, name, o[name]);
    }
  }
  parent.appendChild(elmt);
  return elmt;
}

svg{border:1px solid; max-width:90vh;}

<svg id="svg" viewbox="0 0 200 200">
  <rect x="100" y="0" width="20" height="20" fill="red" transform="rotate(45)"/>
</svg>

如何将旋转应用于图形元素并获取新的路径数据？

1 个答案: