缩放 SVG 路径点

Question

我正在缩放一个多边形并将实际缩放的点设置到 pathArray 中

const pointsCal = this.findPoints(allocatedTable.tableType.shape.pathArray);//calculating max x,y min x,y of pathArray
    const diameterX = (pointsCal.highX - pointsCal.lowX)/2;
    const diameterY = (pointsCal.highY - pointsCal.lowX)/2;
    const scalex = (diameterX + this.settings.tableTableSpace) / diameterX;
    const scaleY = (diameterY + this.settings.tableTableSpace) / diameterY;
pathArray.forEach((point) => {
      if (point.command !== 'z') {
        point.x -= tableCenterPoint.x;
        point.y -= tableCenterPoint.y;
        point.x *= scalex;
        point.y *= scaleY;
        point.x += tableCenterPoint.x;
        point.y += tableCenterPoint.y;[enter image description here][1]
      }
    });

但对于常规矩形，它可以正常工作，但对于旋转的形状，它不能正确粘贴

我认为我在计算 scale X 和 scaleY 值时在逻辑上犯了错误

Answer 1

为什么要除以 2？

试试这样的：

const width = pointsCal.highX - pointsCal.lowX;
const height = pointsCal.highY - pointsCal.lowY;
const scalex = this.settings.tableTableSpace / width;
const scaleY = this.settings.tableTableSpace / height;

如果这不起作用，那么您需要提供minimal workable example

更新

我仍然不能 100% 确定您想要什么。但是查看代码，我假设您想要缩放原始形状以填充 SVG。但也允许在它周围进行一些填充。

如果是这样，你会想要做这样的事情：

  DrawScalledRectangle() {
    // Get the size of the original polygon
    const bbox = this.tableGroup.getBBox();
    // Get the size of the <svg> element.
    // This will be the value at the time this function is run. But the <svg> has width
    // and height of "100%" so it may change if the window is resized.
    const mainSvg = document.getElementById("mainSVG");
    const svgWidth = mainSvg.clientWidth;
    const svgHeight = mainSvg.clientHeight;

    // The scale will be svgSize / originalSize (but we subtract the padding from the svgSize first)
    const scaleX = (svgWidth - this.tableTableSpace * 2) / bbox.width;
    const scaleY = (svgHeight- this.tableTableSpace * 2) / bbox.height;


    this.pathArray.forEach(point => {
      if (point.command !== "z") {
        // New point location = padding + (oldPoint - shapePosition) * scale
        point.x = this.tableTableSpace + (point.x - bbox.x) * scaleX;
        point.y = this.tableTableSpace + (point.y - bbox.y) * scaleY;
      }
    });
    console.log(this.pathArray);
    ...snip...
  }

https://stackblitz.com/edit/angular-thb9w5?file=src/app/app.component.ts