在画布上水平滚动.HTML5

Question

我正在通过webproject上的javascript创建一个画布.

画布在xy平面上具有图形表示.

我试图将水平滚动功能添加到画布.

我调查了一些方法: -

1)在画布上绘制12个月的数据,当鼠标向前滚动时,第1个月的数据消失,最后添加新月数据,绘制新画布.

Con: - 每次鼠标滚动到平移时间线时 - 必须进行新的SQL查询,使我的Web应用程序非常慢.

2)也许我可以通过1个SQL查询在画布上绘制10年的数据,但只显示12个月的数据.掩盖了其余的9年.现在,当客户端滚动时,我捕获滚动事件并移动到画布的相应部分.这可能吗？如果是这样呢？

任何人都可以建议吗？

我目前对画布的表示=只有12个月的数据

为了更具体的滚动,我想有一种感觉,如我的客户端滚动动作的以下小部件: -

http://www.simile-widgets.org/timeline/

Answer 1

这是一个非常基本的实现:http://jsfiddle.net/CQPeU/

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

// these two lines will make the y-axis grow upwards. 
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);  // translate the context.
    lastX = evt.offsetX;
    draw();  // redraw
  }
}

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


function draw() {
  ctx.clearRect(-translated, 0, 600, 400); // this is why we need to keep track of how much we've translated
  for (var i = 0; i < plot.length; i++) {
    ctx.beginPath();
    ctx.arc(plot[i].x, plot[i].y, 5, 0, 2 * Math.PI); // note we don't have to futz with the x/y values, and can use them directly. 
    ctx.fill();
  }
}

要创建网格,您可以执行以下操作:

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);

哪个会像这样使用:

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();
  }
}

更新的演示:http://jsfiddle.net/CQPeU/2/