计算点击中心到圆点的百分比

想法是，在画布上的点击事件中，找到与点击点发生碰撞的元素。我做到了，找到碰撞的元素没有问题。

Bu我想计算一个元素的类型是否是圆形，计算从圆弧中心到外部的碰撞百分比。

在下面的代码是用于碰撞检测。

if(element.type == "circle") { // circle detection 
    let dx = x - element.left, 
     dy = y - element.top, 
     dist = Math.abs(Math.sqrt(dx * dx + dy * dy)); 

    if (dist <= element.width/2) { 
     collision = { 
      hitTo: // calculate percentage???, 
      object: element 
     }; 
    } 
}

我不知道该怎么做。你能帮我吗？

来源

2017-03-07 R. Canser Yanbakan

什么是X和Y？点击事件的位置？ –

是的。从全局偏移（画布） –

你能解释为什么你要从左上角计算dist吗？它不应该来自圆心吗？ –

确保从圆心（不是左上角）有x和y的位置，那么可以使用反正切三角函数来计算百分比。

var x = 0.5; 
var y = 0.5; 
var angle = Math.atan(y/x); 
var percentage = 100 * angle/(2 * Math.PI); 
console.log("Percentage: ", percentage);

例如，x和y设置为0.5，你得到的百分比等于12.5

来源

2017-03-07 13:27:36 Faly

问题是，我们x和y位置是全局鼠标在画布上的宽度全高和全宽（例如：1280x720）。但圆圈宽度在100到200之间。以上函数仅用于基于画布x和y以及绘制的弧的位置的碰撞检测。也许我没有得到它，也许如果你做一个例子会更好。 –

顺便说一下，元素左侧和元素顶部值是从弧的中心计算出来的。 –

计算点击中心到圆点的百分比

回答

相关问题