html - 在圆形进度区域中部分显示图像

Question

我有一张图片，如下所示。我想根据 AngularJS 中的输入值部分显示图像。如果输入值为 0，那么我们只需要在其上显示黑色 mask 即可。如果该值为 50，那么我们可以在右侧显示一半图像，在左侧显示一半背景。所以基本上图像可见部分应该基于输入值。

我试过一些圆形进度条，比如 https://github.com/crisbeto/angular-svg-round-progressbar和 https://github.com/mathewbyrne/angular-progress-arc还有一些 CSS，但它不能正常工作。有人可以帮我解决这个问题吗。

Answer 1

您可以用 SVG 元素覆盖图像，创建弧线，并通过 JavaScript 设置其值。 SVG 元素看起来像这样:

<svg>
    <path d="Mpoint1 Lpoint2 AcircleRadius 0 1 0 point3 Z" stroke="white" stroke-width="4" fill="black"/> 
</svg>

你应该在哪里替换

• point1 为圆心坐标
• point2 为圆的顶点坐标
• circleRadius 带有圆的 x 半径和 y 半径(在你的情况下是相同的，因为它是一个圆)
• point3 以及您希望圆弧结束的点的坐标(因此，这将是图片右下角的点)。

然后，您可以使用简单的 CSS 将此 SVG 元素精确定位在图像的顶部。然后，您可以使用 JavaScript 执行计算，只需将 SVG 元素上的 d 属性设置为正确的

有关 SVG 路径的更多信息，请查看:SVG Paths

要查看一个工作示例，使用基于输入值自动创建正确弧线的 JavaScript 函数，请查看 this JSFiddle