缩放SVG路径点

我正在缩放多边形，并将实际缩放的点设置到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]
      }
    });

但是对于规则矩形，它工作正常，但是对于旋转的形状，它没有正常工作

我想我在计算刻度X和刻度Y值时犯了一个逻辑错误

为什么要除以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;

  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...
  }

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

更新

我还是不能百分之百确定你想要什么。但是看看代码，我假设您想要缩放原始形状，以便填充SVG。但也考虑到周围有一些填充物

如果是这样，您将希望执行以下操作：

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

  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...
  }

drawscaledrectangle（）{
//获取原始多边形的大小
const bbox=this.tableGroup.getBBox（）；
//获取元素的大小。
//这将是运行此函数时的值。但是
//和“100%”的高度，因此如果调整窗口大小，它可能会改变。
const mainSvg=document.getElementById（“mainSvg”）；
const svgWidth=mainSvg.clientWidth；
const svgHeight=mainSvg.clientHeight；
//比例将为svgSize/originalSize（但我们首先从svgSize中减去填充）
const scaleX=（svgWidth-this.tableTableSpace*2）/bbox.width；
const scaleY=（svghight-this.tableTableSpace*2）/bbox.height；
this.pathArray.forEach（点=>{
如果（点命令！=“z”）{
//新点位置=填充+（旧点-形状位置）*比例
point.x=this.tableTableSpace+（point.x-bbox.x）*scaleX；
point.y=this.tableTableSpace+（point.y-bbox.y）*scaleY；
}
});
console.log（this.pathArray）；
剪
}

---

谢谢，您能帮我们解释一下为什么我们要从X值中减去y值来表示heightconst height=pointsCal.highY-pointsCal.low；这是一个打字错误，从你的原始代码，我错过了。我现在已经修好了。正如你问我的，我已经简化了代码，但是上面的逻辑对我不起作用。你能帮我在边缘之间分配相同的空间吗？谢谢，但是我需要将形状设置为缩放的形状的中心点，那么形状的所有边缘的填充都是相同的