Path2D 객체를 참조하기 위해 isPointInPath()를 사용합니까?

저는 현대 브라우저에서 Canvas Paths를 표준 개체로 도입 한 것에 대해 매우 흥분해 왔으며이 새로운 기능에서 얼마만큼의 마일리지를 얻을 수 있는지 알아 내려고 노력했습니다. 그러나 이러한 객체가 isPointInPath() 메서드 (및 다른 경로 기반 메서드)와 상호 작용하는 방식에 대한 필자의 이해는 다소 결점이 있습니다.Path2D 객체를 참조하기 위해 isPointInPath()를 사용합니까?

아래의 처음 두 테스트 함수에서 설명한 것처럼 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 hit-and-miss)입니다. 일반적으로 정확하고 완전한 정보를 얻기 위해 [MDN] (https://developer.mozilla.org/en-US/)을 자주 사용합니다. 건배! :-) – markE

굉장해, 고마워! :-) –

Path2D 객체를 참조하기 위해 isPointInPath()를 사용합니까?

답변

관련 문제