Question

我有一个画布，其中包含一些矩形（通过旋转上下文等创建）。有一个图像被加载到画布上，然后矩形映射到某个区域（坐标来自AJAX服务）。

我需要知道客户端点击了哪个矩形。有时它在未转换画布时有效，但是一旦我转换画布（通过缩放或拖动），鼠标X Y位置就不会保持相对于画布。

我的要求是，如果用户在矩形内部单击，则显示警报。即使放大或平移

这是JSFIDDLE：

（参见明尼苏达州至南达科他州的红线）

以下是生成矩形的代码：

var rect = (function() {
  // constructor
  function rect(id, x, y, angle, width, height, fill, stroke, strokewidth) {
    this.x = x;
    this.y = y;
    this.id = id;
    this.width = width < 0 ? width * -1 : width;
    this.height = height < 0 ? height * -1 : height;
    this.fill = fill || "#ff0000";
    this.stroke = stroke || "#00ff00";
    this.strokewidth = strokewidth || 1;
    this.angle = angle || 0;
    this.redraw(this.x, this.y);
    return (this);
  }
  rect.prototype.redraw = function(x, y) {
      this.x = x || this.x;
      this.y = y || this.y;
      this.draw(this.stroke);
      return (this);
    }
    //
  rect.prototype.highlight = function(x, y) {
      this.x = x || this.x;
      this.y = y || this.y;
      this.draw(this.ctx, "#00ffff");
      return (this);
    }
    //
  rect.prototype.draw = function(stroke) {
      //ctx.save();
      ctx.translate(this.x, this.y);
      ctx.rotate(this.angle);
      ctx.beginPath();
      ctx.fillStyle = this.fill;
      ctx.strokeStyle = stroke;
      ctx.lineWidth = this.strokewidth;
      ctx.rect(0, 0, this.width, this.height);
      ctx.stroke();
      ctx.fill();
      ctx.closePath();
      ctx.restore();
    }
    //
  rect.prototype.isPointInside = function(x, y) {
    console.log("X: " + x + ', Y: ' + y);
    console.log(this.x + ', ' + (this.x + this.width) + ', ' + this.y + ', ' + (this.y + this.height));
    return (x >= this.x && x <= this.x + this.width && y >= this.y && y <= this.y + this.height);
  }


  return rect;
})();

我已经走到了尽头，有人可以帮我解决这个问题。非常感谢。

修改

我一直在尝试不同的技术，甚至在评论中尝试过但却没有用。

当用户点击该行的任何位置

时，我需要的只是鼠标点击的消息

在转换画布上获取相对X和Y

0 个答案: