使用isPointInPath（）引用Path2D對象？

因此，我對Canvas Paths作爲標準對象在當代瀏覽器中的引入感到非常興奮，並且一直試圖看看我能從這個新的ish特性中獲得多少里程。但是，我對這些對象如何與isPointInPath（）方法（以及可能的其他基於路徑的方法）交互的理解顯然有些缺陷。使用isPointInPath（）引用Path2D對象？

正如前面兩個測試函數中所演示的，我可以通過isPointInPath（）方法獲得所繪製的路徑。但是，當我將路徑定義爲對象時，該方法停止工作（即使路徑對象可以被其他用途（如填充）識別）。

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

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

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

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

 

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

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

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

 
</body> 
 

 
</html>

這是從根本上思考Path2D對象和記錄「打」的區域在畫布上走錯了路？如果是這樣，是否有另一種技術（保存繪製的每個路徑的畫布上下文或沿着該靜脈的某個東西），這會產生所需的效果？

來源

2016-07-05 Jonathan Straus

你必須向Path2D參考被測試到isPointInPath：

ctx.isPointInPath(lonely_node, x_cen, y_cen)

來源

2016-07-05 21:42:08 markE

哇哦，這很簡單。我沒有意識到這個對象是這個方法所接受的論點。在W3C文檔中，它只提到x和y座標作爲有效參數：http：//www.w3schools.com/tags/canvas_ispointinpath.asp ...有沒有更好的資源，我應該指的是這種類型的東西？ –

w3schools是verrrry碰碰運氣。我經常使用[MDN]（https://developer.mozilla.org/en-US/）獲得一般完整和準確的信息。乾杯! :-) – markE

太棒了，謝謝！ :-) –

使用isPointInPath（）引用Path2D對象？

回答

相關問題