0

我正在尝试使用 JavaScript 在 HTML5 画布中的 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.

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

4

1 回答 1

2

isPointInPath()将其x和y坐标作为untransformed，即作为画布上的绝对坐标，但是它确实在给定的path.

因此，您需要使用应用的转换来调用它（即，摆脱 this 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 对象，你可以参考这篇文章，它使用第二个参数matrix来Path2D.add(path, matrix)返回 Path2D 对象的转换副本。

于 2020-09-26T00:34:57.497 回答