2

http://jsfiddle.net/CQPeU/2/

上面的jsfiddle是html5画布中水平滚动的示例代码。此功能似乎适用于 IE、Chrome 和 Safari，不适用于 Firefox v25.0

谁能帮我解决这个问题？我认为这与屏幕上位置的转换有关。因为只有一个静态 html5 画布可以在 Firefox 上运行。

谢谢。

    var plot = [{
  x: 50,
  y: 100
}, {
  x: 200,
  y: 200
}, {
  x: 400,
  y: 300
}, {
  x: 500,
  y: 190
}];

var can = document.getElementById("can"),
  ctx = can.getContext('2d'),
  dragging = false,
  lastX = 0,
  translated = 0;

  var grid = (function(dX, dY){
  var can = document.createElement("canvas"),
      ctx = can.getContext('2d');
  can.width = dX;
  can.height = dY;
  // fill canvas color
  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, dX, dY);

  // x axis
  ctx.strokeStyle = 'orange';
  ctx.moveTo(.5, 0.5);
  ctx.lineTo(dX + .5, 0.5);
  ctx.stroke();

  // y axis
  ctx.moveTo(.5, .5);
  ctx.lineTo(.5, dY + .5);
  ctx.stroke();

  return ctx.createPattern(can, 'repeat');
})(100, 50);

ctx.scale(1, -1);
ctx.translate(0, -400);

can.onmousedown = function (e) {
  var evt = e || event;
  dragging = true;
  lastX = evt.offsetX;
}

window.onmousemove = function (e) {
  var evt = e || event;
  if (dragging) {
    var delta = evt.offsetX - lastX;
    translated += delta;
    ctx.translate(delta, 0);
    lastX = evt.offsetX;
    draw();
  }
}

window.onmouseup = function () {
  dragging = false;
}

function draw() {
  ctx.clearRect(-translated, 0, 600, 400);
  ctx.rect(-translated, 0, 600, 400);
  ctx.fillStyle = grid;
  ctx.fill();
  ctx.fillStyle = "#fff";
  for (var i = 0; i < plot.length; i++) {
    ctx.beginPath();
    ctx.arc(plot[i].x, plot[i].y, 5, 0, 2 * Math.PI);
    ctx.fill();
  }
}

draw();
4

1 回答 1

1

问题在于offsetX

e.offsetX == undefined ? e.layerX : e.offsetX;

在 Firefox 中，event.offsetX 是未定义的，但在 Chrome 和其他浏览器中，它给出了位置，使用 pageX 可以解决您的问题。

更新小提琴

于 2013-11-16T05:53:45.233 回答