javascript - 如何创建带有背景图像的圆弧(扇形)？

Question

我正在寻找一种方法来绘制给定 Angular 圆扇区。我希望该扇区显示一个 (1:1) 图像作为其背景(仅是该扇区下方的方形尺寸图像的一部分)。

本质上，图像将具有相同的宽度和高度。图像的宽度和高度将等于其扇区将被显示的圆的直径。我希望图像和扇区保持它们的宽高比，但要有响应。我需要它们的大小是百分比或类似的东西而不是像素，这样它们才能响应页面大小的变化。我曾尝试使用 SVG 路径来尝试实现此目的，但到目前为止，我未能完全产生我想要的效果。

我尝试做的第一件事是设置我正在制作的 SVG 的背景图像。我提到了这个 fiddle :http://jsfiddle.net/9zkfodwp/1/最后在这篇文章中尝试了答案:Fill SVG path element with a background-image接下来，我试图找到一种方法来制作一个给定 Angular 圆形扇区，并在这里找到了一个惊人的答案:How to calculate the SVG Path for an arc (of a circle)但是，这个答案没有使用背景图片，所以现在将两者合并在一起对我来说没有用。我结束了 this

这里需要注意的是:图片的尺寸不等于直径，图片也会重复。另外，这里的 SVG 和路径大小不同，我希望 SVG 等于背景图片的大小，内部路径的直径等于方形 SVG 的尺寸。

代码如下:

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function describeArc(x, y, radius, startAngle, endAngle) {
  var start = polarToCartesian(x, y, radius, endAngle);
  var end = polarToCartesian(x, y, radius, startAngle);
  var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
  var d = [
    "M", start.x, start.y,
    "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
  ].join(" ");
  return d;
}
window.onload = function() {
  document.getElementById("arc1").setAttribute("d", describeArc(150, 150, 100, 0, 359.99));
};

<svg width="600" height="600">
        <defs>
            <pattern id="imgpattern" x="0" y="0" width="1" height="1">
                <image width="300" height="300"
                       xlink:href="https://146c4de20826c5857a80-8e5c4ea3a7a874d38c0915883796d18e.ssl.cf2.rackcdn.com/product-hugerect-669768-163734-1461140647-16fe8eceec8ee6c425577133b2b557b1.jpg" />
            </pattern>
        </defs>
        <path id="arc1" fill="none" stroke="url(#imgpattern)" stroke-width="90" />
    </svg>

我想要像 this 这样的结果请忽略这个问题，因为我使用 MS Paint 绘制了这个。所以在这里，我只希望蓝色部分可见。蓝色部分是通过扇区可见的背景图像(正方形)区域。我不希望该部门有任何边界或图像。我也不希望图像被重复。最后，如果答案是 SVG，我希望路径完全适合 SVG，因为我看到的答案通常会导致 SVG 比路径大。我希望 SVG 等于(平方)背景图像。

Answer 1

我会考虑我之前的两个答案¹，以便使用 clip-path 来做到这一点。技巧很简单，我们使图像变圆，然后应用剪辑路径来显示/隐藏需要的部分。

这是一个基本的例子:

.box {
  width:150px;
  height:150px;
  background:url(https://picsum.photos/id/1003/300/300) center/cover;

  clip-path:polygon(50% 50%,0 0,   0 50%);
  border-radius:50%;
}

<div class="box">
</div>

也可以考虑动画:

.box {
  width:150px;
  height:150px;
  background:url(https://picsum.photos/id/1003/300/300) center/cover;

  border-radius:50%;
  clip-path:polygon(50% 50%,0 0,0 0,0 0, 0 0,0 0);
  animation:change 2s linear forwards;
}

@keyframes change {
  25% {
    clip-path:polygon(50% 50%,0 0,   0 100%,0 100%,0 100%,0 100%);
  }
  50% {
    clip-path:polygon(50% 50%,0 0,0 100%,   100% 100%, 100% 100%,100% 100%);
  }
  75% {
    clip-path:polygon(50% 50%,0 0,0 100%,100% 100%,    100% 0,100% 0);
  }
  100% {
    clip-path:polygon(50% 50%,0 0,0 100%,100% 100%, 100% 0,     0% 0%);
  }
}

<div class="box">
</div>

¹ 相关答案以获取有关计算的更多详细信息并轻松调整clip-path，如您所愿:

https://stackoverflow.com/a/56728104/8620333

https://stackoverflow.com/a/56799618/8620333

---

在不久的将来，我们可以考虑 conic-gradient() 和 mask-image 来轻松做到这一点。

以下仅适用于 Chrome

.box {
  width:150px;
  height:150px;
  background:url(https://picsum.photos/id/1003/300/300) center/cover;

  
  -webkit-mask-image:conic-gradient(from 90deg, #fff 60deg,transparent 60deg);
  mask-image:conic-gradient(from 90deg, #fff 60deg,transparent 60deg);
  border-radius:50%;
}

<div class="box">
</div>

如您所见，我们简单地定义起点(from)然后定义 Angular 扇区应填充(白色)

---

更新

根据我正在创建饼图的另一个答案 (https://stackoverflow.com/a/52205730/8620333)，我们可以使用 mask-image 和 linear-gradient 改进之前的方法以获得更好的效果支持

从 0% 到 50%:

.box {
  width:100px;
  height:100px;
  display:inline-block;
  border-radius:50%;
  background:url(https://picsum.photos/id/1024/400/400) center/cover;
  clip-path:polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
  -webkit-mask:
    linear-gradient(var(--v), transparent 50%, #fff 0);
}

<p>The formula is [x = (5/18) * p + 25]. <small>Where x is the percentage and p the degree</small></p>
<div class="box" style="--v:-90deg;"></div>
<div class="box" style="--v:-30deg;"></div>
<div class="box" style="--v:0deg;"></div>
<div class="box" style="--v:60deg;"></div>
<div class="box" style="--v:90deg;"></div>

从 50% 到 100%:

.box {
  width:100px;
  height:100px;
  display:inline-block;
  border-radius:50%;
  background:url(https://picsum.photos/id/1024/400/400) center/cover;
  -webkit-mask:
    linear-gradient(var(--v), #fff 50%,transparent 0),
    linear-gradient(to right, transparent 50%,#fff 0);
}

<p>The formula is [x = (5/18) * p + 75]. <small>Where x is the percentage and p the degree</small></p>
<div class="box" style="--v:-90deg;"></div>
<div class="box" style="--v:-30deg;"></div>
<div class="box" style="--v:0deg;"></div>
<div class="box" style="--v:60deg;"></div>
<div class="box" style="--v:90deg;"></div>