Question

所以我对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对象并在画布上记录“命中”区域吗？如果是这样，是否有另一种技术（为每条路径保存画布上下文或沿着该静脉保存某些东西）会产生预期的效果？

Answer 1

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

ctx.isPointInPath( lonely_node, x_cen, y_cen )

使用isPointInPath（）来引用Path2D对象？

1 个答案: