主页 / 问题 / 1000008
Accepted
Sergey
Asked:2020-07-06 20:36:11 +0000 UTC2020-07-06 20:36:11 +0000 UTC

如何为剪辑路径制作带圆角的六边形？

  • 772

我有一个带圆角的六边形。我需要完全相同的六边形，只旋转了 90 度。

我可以用一个属性来做到这一点transform : rotate(Xdeg)，但我需要多边形本身。

使用什么程序可以创建具有给定坐标格式的多边形？

.hexagon {
  clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% 50%, 94.69616% 53.47296%, 93.79385% 56.8404%, 92.32051% 60%, 79.82051% 81.65064%, 77.82089% 84.50639%, 75.35575% 86.97152%, 72.5% 88.97114%, 69.3404% 90.44449%, 65.97296% 91.34679%, 62.5% 91.65064%, 37.5% 91.65064%, 34.02704% 91.34679%, 30.6596% 90.44449%, 27.5% 88.97114%, 24.64425% 86.97152%, 22.17911% 84.50639%, 20.17949% 81.65064%, 7.67949% 60%, 6.20615% 56.8404%, 5.30384% 53.47296%, 5% 50%, 5.30384% 46.52704%, 6.20615% 43.1596%, 7.67949% 40%, 20.17949% 18.34936%, 22.17911% 15.49361%, 24.64425% 13.02848%, 27.5% 11.02886%, 30.6596% 9.55551%, 34.02704% 8.65321%, 37.5% 8.34936%, 62.5% 8.34936%, 65.97296% 8.65321%, 69.3404% 9.55551%, 72.5% 11.02886%, 75.35575% 13.02848%, 77.82089% 15.49361%, 79.82051% 18.34936%);
  background: #c3797c;
  width: 12vw;
  height: 12vw;
  display: flex;
  align-items: center;
}
<div class="hexagon"></div>

你能告诉我如何创建一个带有圆边的剪辑路径多边形吗？

html

1 个回答

  1. Best Answer

    如果您已经有形成所需形状的点，则可以使用javascript以下公式围绕某个点旋转它们：

    x1 = (cos * (x - cx)) + (sin * (y - cy)) + cx, 
y1 = (cos * (y - cy)) - (sin * (x - cx)) + cy;


    let p = `92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% 50%, 94.69616% 53.47296%, 93.79385% 56.8404%, 92.32051% 60%, 79.82051% 81.65064%, 77.82089% 84.50639%, 75.35575% 86.97152%, 72.5% 88.97114%, 69.3404% 90.44449%, 65.97296% 91.34679%, 62.5% 91.65064%, 37.5% 91.65064%, 34.02704% 91.34679%, 30.6596% 90.44449%, 27.5% 88.97114%, 24.64425% 86.97152%, 22.17911% 84.50639%, 20.17949% 81.65064%, 7.67949% 60%, 6.20615% 56.8404%, 5.30384% 53.47296%, 5% 50%, 5.30384% 46.52704%, 6.20615% 43.1596%, 7.67949% 40%, 20.17949% 18.34936%, 22.17911% 15.49361%, 24.64425% 13.02848%, 27.5% 11.02886%, 30.6596% 9.55551%, 34.02704% 8.65321%, 37.5% 8.34936%, 62.5% 8.34936%, 65.97296% 8.65321%, 69.3404% 9.55551%, 72.5% 11.02886%, 75.35575% 13.02848%, 77.82089% 15.49361%, 79.82051% 18.34936%`;

let rotatePoint = (pt, rad, cx, cy) => pt.trim()
    .split('%')
    .map(s => s.trim()).filter(s => s)
    .map((coord, i, arr) => i ? 
          (Math.cos(rad)*(arr[1]-cy))-(Math.sin(rad)*(arr[0]-cx))+cy:
          (Math.cos(rad)*(arr[0]-cx))+(Math.sin(rad)*(arr[1]-cy))+cx)
    .join('% ') + '%'; 
    
requestAnimationFrame(draw)

function draw(t){
  let clip = p.split(',').map(pt => rotatePoint(pt, -(t/33)/180*Math.PI, 50, 50)).join(',');
  hexagon.style.clipPath = `polygon(${clip})`;
  requestAnimationFrame(draw)
}
    #hexagon {
  background: #c3797c;
  width: 90vh;
  height: 90vh;
  display: flex;
  align-items: center;
}
    <div id="hexagon"></div>

    • 5

相关问题