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

Question

因此，我对 Canvas 路径作为现代浏览器中的标准对象的引入感到非常兴奋，并且一直在尝试看看我可以从这个新功能中获得多少里程。但是，我对这些对象如何与 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 对象和在 canvas 上记录 'hit' 区域，这从根本上来说是错误的方法吗？如果是这样，是否有另一种技术（为绘制的每条路径或沿着该脉络的某些东西保存 canvas 上下文）会产生预期的效果？

Answer 1

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

ctx.isPointInPath( lonely_node, x_cen, y_cen )

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

Use of isPointInPath() to reference Path2D objects?

javascript

html

canvas

path-2d