有没有办法检测一个点在旋转和平移后是否在 Path2D 对象中？

Question

我正在尝试使用 JavaScript.

在 HTML5 canvas 中的 Path2D 对象中找到一个点

var path = new Path2D;
path.rect(0,0,100,100);
// declare the path

ctx.beginPath(); 
ctx.save()
ctx.translate(500,500);
ctx.rotate(Math.PI/2);
ctx.fill(path);
ctx.restore()
// draw the path after translation and rotation

ctx.isPointInPath(path,505,500) // return false because path is defined at 0, 0 not 500,500 where path is drawn
// Is there a way know if the points are in the path where it is drawn.
// I do not want to re - define the path, but if there is a way to move it that would work.

请理解此代码已简化，并且我使用的路径不是通用形状，因此这需要适用于任何给定的二维路径。这不是关于语法的问题，所以请原谅未定义的变量。

Answer 1

isPointInPath() 将其 x 和 y 坐标作为 未转换的 ，即作为 canvas 上的绝对坐标，但是它确实对给定的 path.

应用转换

所以你需要用应用的转换来调用它（即去掉这个ctx.restore()）。

但是你的数字不相加：

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d');
const path = new Path2D;
path.rect(0,0,100,100);
// declare the path

ctx.translate(500,500);
ctx.rotate(Math.PI / 2)
ctx.fillStyle = "green";
ctx.fill(path);

// using fixed values
const x = 505;
const y = 500;
console.log(ctx.isPointInPath(path,x,y));

// reset to identity matrix
ctx.setTransform(1,0,0,1,0,0);
ctx.fillStyle = "red";
ctx.fillRect(x-2,y-2,4,4);

document.scrollingElement.scrollBy(600, 650);

<canvas id="canvas" width="600" height="650"></canvas>

但如果您使用正确的坐标，它将按预期工作：

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d');
const path = new Path2D;
path.rect(0,0,100,100);
// declare the path

ctx.translate(500,500);
ctx.rotate(Math.PI / 2)
ctx.fillStyle = "green";
ctx.fill(path);

// using fixed values
const x = 495;
const y = 505;
console.log(ctx.isPointInPath(path,x,y));

// reset to identity matrix
ctx.setTransform(1,0,0,1,0,0);
ctx.fillStyle = "red";
ctx.fillRect(x-2,y-2,4,4);

document.scrollingElement.scrollBy(600, 650);

<canvas id="canvas" width="600" height="650"></canvas>

而如果有一天你真的需要转换一个Path2D对象，你可以参考它使用Path2D.add(path, matrix)的第二个参数matrix到return一个Path2D 对象的转换副本。

有没有办法检测一个点在旋转和平移后是否在 Path2D 对象中？

Is there a way to detect if a point is in a Path2D object after it has been rotated and translated?

javascript

html5-canvas

path-2d