我正在使用Angular SVG round progress bar作为音乐播放器。我希望寻找特定的位置功能,我一直试图让鼠标点击x和y坐标。我得到了它们,但我不知道如何将x,y坐标映射到进度。任何人都可以帮忙吗? The demo code
编辑1:
var svg = document.querySelector('svg');
console.log(svg);
// Create an SVGPoint for future math
var pt = svg.createSVGPoint();
// Get point in global SVG space
function cursorPoint(evt){
pt.x = evt.clientX; pt.y = evt.clientY;
return pt.matrixTransform(svg.getScreenCTM().inverse());
}
svg.addEventListener('mousedown',function(evt){
var loc = cursorPoint(evt);
// Use loc.x and loc.y here
// console.log(Math.sqrt((100-loc.x)*(100-loc.x) + (100-loc.y)* (100-loc.y)));
console.log(Math.sqrt((100-loc.x)*(100-loc.x) + (100-loc.y)*(100-loc.y)) > 93 && Math.sqrt((100-loc.x)*(100-loc.x) + (100-loc.y)*(100-loc.y)) <100);
console.log(loc);
},false);