我通过
JavaScript在webproject创建一个画布.
画布在x-y平面上具有图形表示.
我正在尝试将水平滚动功能添加到画布.
我调查了几个方法：
1)在画布上绘制12个月的数据,当鼠标向前滚动时,第一个月的数据消失,最后添加新的月份数据,绘制新的画布.
Con： – 每次鼠标滚动到通过时间轴平移 – 必须创建一个新的SQL查询,使我的Web应用程序非常慢.
2)也许我可以通过1 SQL查询在画布上画出10年的数据,但只显示12个月的数据.掩盖9年的其余时间.现在当客户端滚动时,我捕获滚动事件并移动到画布的相应部分.这可能吗？那如何呢？
有人建议吗
我目前的画布表示=只有12个月的数据
为了更具体的滚动,我想有一个感觉,如下面的窗口小部件用于我的客户端滚动操作：
http://www.simile-widgets.org/timeline/
解决方法
这是一个非常基本的实现：
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,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,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,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,400);
ctx.rect(-translated,400);
ctx.fillStyle = grid;
ctx.fill();
ctx.fillStyle = "#fff";
for (var i = 0; i < plot.length; i++) {
ctx.beginPath();
ctx.arc(plot[i].x,2 * Math.PI);
ctx.fill();
}
}
更新演示：http://jsfiddle.net/CQPeU/2/