如何将动态clip-path polygon裁剪路径缩放适配固定宽高比的div容器

可以实现，核心思路是对用户生成的原始polygon坐标做归一化缩放处理后再赋值给clip-path属性，即可实现裁剪路径撑满容器、适配动态尺寸的需求。

实现步骤 #

• 第一步：提取原始polygon的所有坐标点
  把传入的polygon字符串解析为坐标数值数组，先去掉坐标后的百分号，转换为浮点数存储。
• 第二步：计算坐标的边界极值
  遍历所有坐标点，得到四个边界值：
  • minX：所有x坐标的最小值
  • maxX：所有x坐标的最大值
  • minY：所有y坐标的最小值
  • maxY：所有y坐标的最大值
• 第三步：计算缩放比例
  因为要求优先撑满容器宽度，所以x轴缩放比例为 scaleX = 100 / (maxX - minX)。如果需要保持多边形原始宽高比，y轴直接复用相同的缩放比例即可；如果不需要保留原始比例，强制适配容器1:0.67的宽高比，可单独设置y轴缩放为 scaleY = 100 / (maxY - minY)。
  可选补充：如果需要保证多边形完整显示在容器内、不被上下裁切，可在缩放后额外判断y轴最大值，若超过100%则统一缩小所有坐标，优先保证图形完整。
• 第四步：重新计算归一化后的坐标
  对每个坐标点做平移+缩放处理：
  • 新x坐标 = (原始x - minX) * 缩放比例
  • 新y坐标 = (原始y - minY) * 缩放比例
• 第五步：生成新的clip-path属性赋值给roof元素
  把处理后的坐标重新拼接为polygon(x1% y1%, x2% y2%, ...)格式的字符串，设置给#roof的style属性即可。

示例代码 #

function adjustClipPath(rawPolygon) {
  // 解析原始坐标点
  const pointReg = /(\d+\.?\d*)% (\d+\.?\d*)%/g
  const points = []
  let match
  while((match = pointReg.exec(rawPolygon)) !== null) {
    points.push({
      x: parseFloat(match[1]),
      y: parseFloat(match[2])
    })
  }
  // 计算边界极值
  const minX = Math.min(...points.map(p => p.x))
  const maxX = Math.max(...points.map(p => p.x))
  const minY = Math.min(...points.map(p => p.y))
  const maxY = Math.max(...points.map(p => p.y))
  // 计算缩放比例，优先撑满宽度
  const scale = 100 / (maxX - minX)
  // 生成新的polygon字符串
  const newPoints = points.map(p => {
    const x = (p.x - minX) * scale
    const y = (p.y - minY) * scale
    return `${x.toFixed(4)}% ${y.toFixed(4)}%`
  }).join(', ')
  // 赋值给目标元素
  document.getElementById('roof').style.clipPath = `polygon(${newPoints})`
}

// 调用示例，传入你动态获取的原始polygon值
const rawClipPath = "polygon(36.2101% 31.8803%, 23.0934% 38.5258%, 39.9406% 40.3219%)"
adjustClipPath(rawClipPath)

响应式适配说明 #

你已经通过JS将容器高度设为宽度的0.67倍，只需要在每次容器尺寸发生变化时，重新调用一次上面的adjustClipPath方法即可。clip-path的百分比是相对于元素自身尺寸计算的，元素尺寸更新后重新生成的裁剪路径会自动适配新的尺寸。

内容的提问来源于stack exchange，提问作者Cas