SVG路径获得相对点击位置

时间:2015-09-19 13:29:16

标签: javascript angularjs svg

我正在使用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);

0 个答案:

没有答案