0

我正在尝试使用canvas. 然而，我似乎误解了坐标系在画布中如何处理事件。

我创建了一个playerPaddle类。有了这个类，我希望将桨的中心准确地绘制在鼠标悬停的位置：

// Paddle Object
function Paddle( h, w, x, y, fill) {
    this.h = h;
    this.w = w;
    this.midH = h / 2;

    this.x = x;
    this.y = y;
    this.fill = fill;
}

Paddle.prototype.draw = function(ctx) {
    ctx.fillStyle = this.fill;
    ctx.fillRect(this.x, this.y, this.w, this.h);
}

Paddle.prototype.updatePos = function(y) {
    this.y = y - this.midH
}

我认为偏移桨的正确方法是使桨的中心位于mousemove事件上，就像我在updatePos上面的方法中所做的那样，通过从桨的新位置减去桨高度的一半来绘制矩形。

但是，这似乎无法正常工作，因为它正在将我的桨的顶部准确地绘制在mousemove事件发生的位置。

但是，如果我this.h从事件的 y 位置减去，这对我来说绝对没有意义。

下面是我用来实例化桨、将事件处理程序添加到canvas元素本身的代码，以及我用来渲染所有内容的函数。

// Paddle Globals
var paddleHeight = 50,
    paddleWidth = 10,
    paddleOffset = 10;
var playerPaddle = new Paddle( paddleHeight, paddleWidth, paddleOffset, midY, '#FFFFFF');

// Does the actual rendering
function render() {
    ctx.clearRect(0, 0, cWidth, cHeight);
    playerPaddle.draw(ctx);
}

//Event Handlers
canvas.addEventListener('mousemove', function(e) {
    e.preventDefault();
    var position = canvas.getBoundingClientRect();
    var y = e.clientY - position.top;
    playerPaddle.updatePos(y);
}, false);

这里还有一个我正在描述的行为示例：http: //jsfiddle.net/u57QD/

4

1 回答 1

0

我想我解决了这个问题。尝试删除 Canvas 上的 css 样式。我认为 padding-top 让你向下画布。所以看起来 y - this.midH 不起作用：D 祝你好运

删除样式表中的后续代码行

padding-top: 20px;
于 2013-05-22T07:27:56.153 回答