Question

是否有任何算法来确定点击的位置是否在未整形的对象内？

我是画布的新手。但是，很容易知道鼠标坐标在成形物体中，特别是在矩形中。但是，不成形的物体或球体/六边形/八边形等呢？

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

＆＃13;

	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();

＆＃13;

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

＆＃13;

Answer 1

您需要为您可能期望的每个形状单独定义该逻辑。

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

然而，有一个任意多边形的算法：

从任意方向点击的点投射光线。
检查光线与形状的每个部分的交叉点。
计算此类交叉点的数量。如果它是均匀的，那么这个点就在你的形状之外，如果它是奇数，那么它就在它的内部。

如何确定Canvas中未定形对象内部的单击？

1 个答案: