javascript - 如何确定在Canvas中未变形的对象内单击的位置？

This question already has answers here:

Events attached to object inside canvas
                            
                                （3个答案）
                            
                    
                3年前关闭。
        

    

是否有任何算法可以确定单击的位置是否在未变形的物体内部？

我是画布新手。但是，很容易知道鼠标坐标在形状的对象中，尤其是在矩形中。但是，不定形的物体或球体/六边形/八边形等如何？

例如，我有以下代码。然后，如何实现确定鼠标单击的坐标是否在对象区域内的逻辑？

	function drawShape(){
  	var canvas = document.getElementById("cnvs");
    var ctx = canvas.getContext("2d");

    ctx.beginPath();
    ctx.moveTo(20,0);
    ctx.lineTo(30,10);
    ctx.lineTo(30,50);
    ctx.lineTo(45,100);
    ctx.lineTo(60,45);
    ctx.lineTo(55,30);
    ctx.lineTo(90,45);
    ctx.lineTo(100,100);
    ctx.lineTo(50,150);
  	ctx.lineTo(45,160);
    ctx.lineTo(20,100);
    ctx.lineTo(10,50);

    ctx.closePath();
    ctx.fill();

    $(canvas).click(function(){
    	  var canvas = this;
        var event = window.event;
        alert(event.pageX - canvas.offsetLeft);
		});
  }
  drawShape();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<canvas id="cnvs" width="200" height="200">

</canvas>

最佳答案

您需要为可能期望的每种形状分别定义该逻辑。

圆是最简单的，您可以检查圆的中心与鼠标坐标之间的距离是否小于圆的半径。

但是，有一种用于任意多边形的算法：


从单击的点向任意方向投射射线。
检查射线与形状的每个部分的交点。
计算此类交叉点的数量。如果是偶数，则该点位于形状之外；如果是奇数，则该点位于形状内。

关于javascript - 如何确定在Canvas中未变形的对象内单击的位置？ ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40206595/