我有一个矩形,通过ctx.rotate
旋转,并且有一个弧线。我想检查矩形的任何部分是否在该弧线内。例如,这应该是正确的:
我尝试使用isPointInPath
,但我要找的“点”不是矩形的实际坐标,而是未旋转的坐标(实际为绿色,isPointInPath
正在针对蓝色进行检查):
以下是JS代码:
var canvas = document.querySelector('#canvas'),
height = canvas.height = canvas.clientHeight,
width = canvas.width = canvas.clientWidth,
ctx = canvas.getContext('2d');
canvas.width = canvas.height = 512;
var shipx = 400,
shipy = 256;
function moveShip() {
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(shipx, shipy);
ctx.rotate(3.66);
ctx.fillStyle = 'green';
ctx.fillRect(0, 0, 80, 20);
ctx.restore();
// This is what isPointInPath is seeing
ctx.fillStyle = 'rgba(0,0,255,0.5)';
ctx.fillRect(shipx, shipy, 80, 20);
ctx.fillStyle = 'rgba(255,0,0,0.5)';
ctx.beginPath();
ctx.moveTo(256, 256);
ctx.arc(256, 256, 100, -20 * Math.PI / 180, 90 * Math.PI / 180);
ctx.lineTo(256, 256);
if (ctx.isPointInPath(shipx, shipy) || ctx.isPointInPath(shipx + 20, shipy + 20)) {
// This *should* trigger
ctx.fillStyle = 'rgba(0,0,255,0.5)';
};
ctx.fill();
}
moveShip();
isPointInPath
只处理单个点,而你有一组点(而且还旋转了)。你考虑过使用数学吗?它似乎更适合这样的问题。 - hindmost