如何将对象创建限制在画布上?

时间:2014-01-08 16:18:06

标签: javascript html5 canvas

http://jsfiddle.net/goldrunt/SeAGU/33/ 第24-40行旨在将圆形创建限制在画布上。我需要在允许创建新对象之前检查位置。如果对象尚不存在,我该怎么做?

function isAtWall(a) {
    return (a.x - a.radius <= rect.left || a.y + a.radius >= rect.top || a.x + a.radius >= rect.left + canvas.width || a.y - a.radius <= rect.top - canvas.height);
}

window.onmousedown = function (e) {
    // IE fixer
    e = e || window.event;
    // get event location on page offset by canvas location
    var location = {
        x: e.pageX - offset.x,
        y: e.pageY - offset.y
    };
    if (!isAtWall(location)) {
        create(location);
    }
};

1 个答案:

答案 0 :(得分:0)

开始时更简单,你会更容易得到答案:

function isAtWall(a) { 

  if ((a.x >= 0 && a.x <= rect.width) && (a.y >= 0 && a.y <= rect.height))
  {
    return false;
  }

return true;
}

http://jsfiddle.net/SeAGU/35/

这只允许用户在画布上放置圆圈。

编辑:只是为了澄清,我故意忽略圆半径计算。此函数仅确定click事件是否在画布上。