使用 isPointInPath() 来引用 Path2D 对象？答案

【问题标题】：Use of isPointInPath() to reference Path2D objects?使用 isPointInPath() 来引用 Path2D 对象？
【发布时间】：2016-07-05 21:33:53
【问题描述】：

所以我对在当代浏览器中引入 Canvas Paths 作为标准对象感到非常兴奋，并且一直在尝试看看我可以从这个新功能中获得多少里程。但是，我对这些对象如何与 isPointInPath() 方法（可能还有其他基于路径的方法）交互的理解显然有些缺陷。

如下面的前两个测试函数所示，我可以得到要被 isPointInPath() 方法识别的绘制路径。但是，当我将路径定义为对象时，该方法将停止工作（即使路径对象可以被识别用于其他目的，例如填充）。

function startGame(){ //Initiating Environment Variables
	gamemap = document.getElementById("GameMap")
	ctx = gamemap.getContext("2d")
	testCircleBounds()
	testVarCircleBounds()
	testObjCircleBounds()
	testMultiObjCircleBounds()
}

function testCircleBounds() { //Minimalist Test of Path Methods
	ctx.beginPath()
	ctx.arc(250,250,25,0,2*Math.PI)
	console.log(ctx.isPointInPath(250,250)) //point in path detected
	ctx.closePath()
	console.log(ctx.isPointInPath(250,250)) //point in path still detected
	ctx.stroke()
	ctx.fillStyle = "yellow"
	ctx.fill() //fills great
}

function testVarCircleBounds() { //Test of Path Methods with Variables
	x_cen = 250; y_cen = 250; rad = 15
	ctx.beginPath()
	ctx.arc(x_cen,y_cen,rad,0,2*Math.PI)
	ctx.closePath()
	console.log(ctx.isPointInPath(x_cen,y_cen)) //true yet again
	ctx.stroke()
	ctx.fillStyle = "orange"
	ctx.fill() //also fills great
}

function testObjCircleBounds() { //Test of Path Methods with Single Stored Path Object
	x_cen = 250; y_cen = 250; rad = 10
	ctx.beginPath()
	lonely_node = new Path2D()
	lonely_node.arc(x_cen,y_cen,10,0,2*Math.PI)
	ctx.closePath()
	console.log(ctx.isPointInPath(x_cen,y_cen)) //point in path not found!
	ctx.stroke(lonely_node)
	ctx.fillStyle = "red"
	ctx.fill(lonely_node) //but ctx.fill notices the path just fine
}


function testMultiObjCircleBounds(){ //Test of Paths Methods with Multi-Object Referencing
	nodes = [] //initializes set of nodes as array
	for (i=0; i<25; i++) { //generates 25 nodes
		nodes[i] = new Path2D() //defines each node as Path object in the array
		node = nodes[i]
		//Places Nodes along the 'horizon' of the map
		x_cen = 20*i + 10
		y_cen = 100
		ctx.beginPath(node) //"node" argument probably not helping?
		node.arc(x_cen,y_cen,8,0,2*Math.PI)
		console.log(ctx.isPointInPath(x_cen,y_cen)) //still returns false!
		ctx.closePath(node)
		ctx.stroke(node)
		console.log(ctx.isPointInPath(x_cen,y_cen)) //arrgh!!
	}
	// Fill can also be selectively applied to referenced path objects
	for (i=0; i<25; i=i+2) {
		ctx.fill(nodes[i])
	}
		
}

<!DOCTYPE html>
<html>
<head>
<title>Wrap Around Beta</title>
<script src="Circuity_PathObjectTest.js"></script>
</head>

<body onload='startGame()'>
	
<canvas id="GameMap" width="500" height="500" style="border:1px solid #000000"></canvas>

</body>

</html>

这是从根本上考虑 Path2D 对象和在画布上记录“命中”区域的错误方式吗？如果是这样，是否有另一种技术（为每条绘制的路径或沿该脉络的东西保存画布上下文）会产生所需的效果？

【问题讨论】：

标签： javascript html canvas path-2d

【解决方案1】：

您必须将正在测试的 Path2D 的引用发送到 isPointInPath：

ctx.isPointInPath( lonely_node, x_cen, y_cen )

【讨论】：

哇，这很简单。我没有意识到该对象是该方法接受的参数。在 W3C 文档中，它只提到 x 和 y 坐标作为有效参数：w3schools.com/tags/canvas_ispointinpath.asp... 对于这类事情我应该参考更好的资源吗？
w3schools 非常成功。我经常使用MDN 来获取大致完整和准确的信息。干杯! :-)