0

我正在使用用户可以滚动的“无限”画布为在线游戏开发地图编辑器/视线计算器。我的目标是从玩家的位置（当前是静态的）到光标位置画一条线。到目前为止，我可以很好地绘制线条，但是当我将画布滚动到足够远时，我会遇到一个非常糟糕的视觉错误。该功能似乎draw()不再正确清除屏幕。我可以通过删除该代码块来确认该行是罪魁祸首。

我的（精简）drawLine()功能：

function drawLine() {
    context.beginPath();
    context.moveTo(150, 300);
    context.lineTo(Mouse.x, -Mouse.y);
    context.lineWidth = 1;
    context.stroke();
    context.closePath();
}

我的draw()功能（变量grid只是一个重复的模式）：

function draw() {
    context.clearRect(-translatedX, -translatedY, window.innerWidth, window.innerHeight);
    context.rect(-window.innerWidth, -window.innerHeight, window.innerWidth * 2, window.innerHeight * 2);
    context.fillStyle = grid;
    context.fill();
}

还有我pan()触发 onmouseove 的函数：

function pan(e) {
    var evt = e || event;

    if(dragging == true) {
        deltaX = evt.offsetX - lastX;
        deltaY = evt.offsetY - lastY;
        translatedX += deltaX;
        translatedY += deltaY;
        context.translate(deltaX, -deltaY);
        lastX = evt.offsetX;
        lastY = evt.offsetY;
    }

    Mouse = {
        x: evt.offsetX - (window.innerWidth / 2 + translatedX),
        y: evt.offsetY - (window.innerHeight / 2 + translatedY)
    }

    draw();
}

如果需要更多信息，我很乐意提供。

编辑：更新截图和链接：

http://iamchristopher.ca/editor/

画布绘图错误

4

1 回答 1

0

我一直在努力解决这个问题，我想我已经找到了解决方案。我仍然不知道为什么我的线路会导致问题，但答案是修改context.rect()以包含翻译后的坐标：

context.rect(-window.innerWidth - translatedX, -window.innerHeight + translatedY, window.innerWidth * 2, window.innerHeight * 2);

现在一切似乎都运行良好。再次感谢@Patashu。

于 2013-05-04T15:05:48.260 回答