时间戳

首页 > 解决方案 > JS/CSS 剪辑路径 - 如何计算圆的半径？

javascript - JS/CSS 剪辑路径 - 如何计算圆的半径？

问题描述

我正在尝试动态设置半径，clip-path: circle(radius)以便它适合它所在的任何大小的容器（周围有一些额外的空间）。例如，如果容器是 1000x500，那么整个圆应该是 500px 的 2/3。

我尝试将半径设置为一个简单的百分比，例如 33%，这应该使整个圆变成 2/3，但根据容器的大小，它可能太大或太小。

查看基本形状的文档，半径百分比是从包含框的宽度和高度解决的，sqrt(width^2+height^2)/sqrt(2)但我不知道如何实际使用它来进行计算。

有人知道我能做什么吗？我正在为这些值设置动画，所以我确实需要通过clip-path.

标签： javascriptcssgeometryclip-path

解决方案

您可以在有mask或没有任何计算的情况下做同样的事情

.box {
  display:inline-block;
  vertical-align:top;
  background:url(https://picsum.photos/id/1074/800/800) center/cover no-repeat;

  -webkit-mask:radial-gradient(circle closest-side,#fff 99%,transparent 100%);
          mask:radial-gradient(circle closest-side,#fff 99%,transparent 100%);
}
<div class="box" style="width:200px;height:100px"></div>

<div class="box" style="width:100px;height:200px"></div>

<div class="box" style="width:300px;height:300px"></div>

为了说明它是如何工作的：

.box {
  display:inline-block;
  vertical-align:top;
  border:2px solid;
  background:
     radial-gradient(circle closest-side,transparent 99%,red 100%),
     url(https://picsum.photos/id/1074/800/800) center/cover no-repeat;
}
<div class="box" style="width:200px;height:100px"></div>

<div class="box" style="width:100px;height:200px"></div>

<div class="box" style="width:300px;height:300px"></div>

您还可以添加动画：

.box {
  display:inline-block;
  vertical-align:top;
  background:url(https://picsum.photos/id/1074/800/800) center/cover no-repeat;

  -webkit-mask:radial-gradient(circle closest-side,#fff 99%,transparent 100%) center/100% 100% no-repeat;
          mask:radial-gradient(circle closest-side,#fff 99%,transparent 100%) center/100% 100% no-repeat;
   transition:0.5s;
}
.box:hover {
   -webkit-mask-size:0% 0%;
           mask-size:0% 0%;
}
<div class="box" style="width:300px;height:300px"></div>
<div class="box" style="width:200px;height:100px"></div>

推荐阅读