在摆弄了多边形和javascript试图得到满意的结果之后。似乎我在如何制作这个上没有选择了。
情况是这样的，我得到了不得不.png图像，其中一个显示恒温器，第二个显示进度，我项目的进度在恒温器的顶部，现在的想法是，当我点击拨号盘上的某个地方，进度显示从左侧到用户点击的点。
第一节第一节第一节第一节第一次
我一直在寻找库或提示，以帮助我实现我想要的，但没有运气到目前为止，所以这就是为什么我问在这里。有人能给予我如何实现这个结果的指导吗？我不能改变恒温器的设计，因为这已经达成一致，但我可以几乎任何库在那里。我使用.NET雷蛇页面，使这（HTML，CSS，jQuery）
我尝试使用多边形来隐藏图像中用户不应该看到的部分，但没有达到预期的效果。我还尝试让ChatGPT看看是否可以提供任何解决方案，但也没有效果。
下面是我使用javascript对多边形所做的尝试
const container = document.querySelector('.thermostat');
const progress = document.querySelector('.thermo-ring');
console.log('JS Loaded')
progress.addEventListener('click', function (event) {
// Get the x coordinate of the click event relative to the progress image
const x = event.offsetX;
// Calculate the progress value based on the x coordinate
const maxValue = progress.offsetWidth;
let progressValue = x / maxValue;
progressValue = Math.max(0, Math.min(1, progressValue)); // clamp to [0, 1]
// Set the clip-path of the progress image to show the progress up to the clicked point
const polygonPoints = `50% 0, 0 0, 0 100%, ${progressValue * 100}% 100%, ${progressValue * 100}% 50%, 50% 50%`;
progress.style.clipPath = `polygon(${polygonPoints})`;
// Show the progress image by setting its opacity to 1
progress.style.opacity = 1;
});预期的结果是，如果您单击表盘上的某个位置，进度将从左侧开始显示到该点，如第二张图所示。
1条答案
按热度按时间e4eetjau1#
可能对您没有什么帮助，但是我将把这个刻度盘绘制为svg，因为我可以控制每个单独的部分，并且可以在上面添加具有级别/顺序和状态的属性。
以下是一个快速示例