Javascript：rect.contains（点）

Question

我想看看鼠标点击是否在一个矩形区域（在canvas）。在 C# 中我会这样做。

var point = new Point(x, y);
var rectangles = new List<Rect>();
//rectangles.add(new Rect(x,y,h,w));
foreach(var rectangle in rectangles)
{
    if(rectangle.Contains(point))
    {
        //do something
    }
}

在 Javascript 我试过这个

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
if (ctx.isPointInPath(20,50))
   {
     //do something
   };

但是上下文中的矩形比我的列表矩形中的要多。有人可以帮我吗？

Answer 1

你可以自己计算

保存矩形的键，绘制它们，然后查看鼠标是否在它们上面

let rects = [{x: 20, y: 20, w: 150, h: 100}]
let mouse = ...
for (let rect of rects) {
  ctx.fillRect(rect.x, rect.y, rect.w, rect.h)
  if(mouse.x >= rect.x && mouse.x <= rect.x + rect.w && mouse.y >= rect.y && mouse.y <= rect.y + rect.h){
    //do something
  }
}

Answer 2

如果您希望在使用矩形点进行绘图后对其进行处理，则您应该已经存储了矩形点。由于在 canvas 中，您只能在其上绘制而不能从中检索任何绘制点。

旧的好方法是，

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var rectangles = [
  [20, 20, 50, 50],
  [70, 70, 80, 80],
  [150, 150, 110, 110]
];

for (var i = 0; i < rectangles.length; i++) {
  ctx.fillRect(...rectangles[i]);
}

var isPointInRects = function(x, y) {
  for (var i = 0; i < rectangles.length; i++) {
    var xStart = rectangles[i][0],
      yStart = rectangles[i][1],
      xEnd = xStart + rectangles[i][2],
      yEnd = yStart + rectangles[i][3];

    if ((x >= xStart && x <= xEnd) &&
      (y >= yStart && y <= yEnd)) {
      return true;
    }
  }
  return false;
};

console.log(isPointInRects(20, 20));

<canvas id="myCanvas" width=500 height=500></canvas>

Answer 3

如果您要对这些矩形做任何事情，哪怕是稍微复杂一点，我都会定义一个矩形对象来存储、绘制和测试包含点。像这样：

function MyRect (x, y, w, h) {

    this.x = x;
    this.y = y;
    this.width = w;
    this.height = h;

    this.contains = function (x, y) {
        return this.x <= x && x <= this.x + this.width &&
               this.y <= y && y <= this.y + this.height;
    }

    this.draw = function (ctx) {
        ctx.rect(this.x, this.y, this.width, this.height)
    }
}

然后像这样使用它：

var r = new MyRect(x, y, w, h);
r.draw(ctx);

if (r.contains(x, y)) {
    // do something
}

Javascript：rect.contains（点）

Javascript: rect.contains(point)

javascript

point

rect