Question

我有一个多层画布。里面的图像可能很大，所以它们溢出的尺寸，我必须滚动（我希望它的工作原理）。我在每一层绘制不同的图像，但我希望它们的相对位置固定，所以我必须将所有画布一起滚动：当我滚动第一个时，我希望它们全部滚动。

问题是它滚动得非常慢。当我向下/向上单击箭头时，它仅滚动一些像素。当我将鼠标放在箭头上时，它会滚动几个像素/秒。当我点击栏外的滚动条时，它只能跳50-100像素。但如果我拖动它，它会正常（快速）移动。

我的html：

<div style='display:inline-block; width:100%; position:relative; top: 0px; left: 0px;'>
    <div id='canvas1' class='canvas canvas_map' style='overflow:scroll; background-color: lightgrey; z-index: 1; position:absolute; left:133px; top:0px;'></div>
    <div id='canvas2' class='canvas canvas_map' style='overflow:scroll; z-index: 2; position:absolute; left:133px; top:0px;'></div>
    [...]
    <div id='canvas12' class='canvas canvas_map' style='overflow:scroll; z-index: 12; position:absolute; left:133px; top:0px;'></div>
    <div id='canvas13' draggable='true' class='canvas canvas_map' style='overflow:scroll; cursor: crosshair; z-index: 13; position:absolute; left:133px; top:0px;'></div>
</div>

我的javascript：

var canvas_list=document.getElementsByClassName('canvas_map');
document.getElementById('canvas13').addEventListener(
    'scroll', function() {
    var scroll_x = document.getElementById('canvas13').scrollLeft;
    var scroll_y = document.getElementById('canvas13').scrollTop;
    for (var i=0; i<canvas_list.length; i++) {
        canvas_list[i].scrollLeft=scroll_x;
        canvas_list[i].scrollTop=scroll_y;
    };
});

PS：我使用Raphael library绘制图像：

var paper_map1 = Raphael(canvas1, '100%', '100%');
[...]

PS2：大多数画布都是空的，另一个有1-2个光照图像，所以它不应该是一个内存问题。

我的多层画布使用滚动条

0 个答案: