我的小地图实现有什么问题？

Question

我需要为我的网络应用程序创建一个小地图，它可以显示您现在在页面上的位置。要使用 canvas，我正在使用 RaphaelJS 库。所以这是我的代码。

创建 Raphael 实例并设置两个 canvas - 主图 (5000x5000) 和小地图 (280x180)：

var paper = Raphael('minimap', 280, 180),
paperC = Raphael('container', 5000, 5000);

然后在小地图上创建一个"viewport"，这会显示你在页面上的位置：

viewport = paper.rect(document.documentElement.scrollLeft * scaleX, 
document.documentElement.scrollTop * scaleY, window.innerWidth * scaleX, 
window.innerHeight * scaleY).attr({'stroke' : '#000000', 'fill' : 
'#F0F0F0'})

scaleX = 280 / 5000 和 scaleY = 180 / 5000 - 在 canvases 上移动时缩放值需要它们。

主要的拖放滚动类型功能canvas：

function dragWindow() {
var clicked = false,
startX, startY,
$d = $(document);
function updatePosition(e) {
    viewport.attr({'x' : $d.scrollLeft() * scaleX, 'y' : $d.scrollTop() * scaleY});
  $d.scrollLeft($d.scrollLeft() + (startX - e.pageX));
  $d.scrollTop($d.scrollTop() + (startY - e.pageY));
}
function startDragScroll(e){
  clicked = true;
  startX = e.pageX;
  startY = e.pageY;
}
function moveDragScroll(e){
  clicked && updatePosition(e);
}
function endDragScroll(){
  clicked = false;
}
document.addEventListener('mousedown', startDragScroll);
document.addEventListener('mousemove', moveDragScroll);
document.addEventListener('mouseup', endDragScroll);
}

在这一行 viewport.attr({'x' : $d.scrollLeft() * scaleX, 'y' : $d.scrollTop() * scaleY}); 中，我将 x 和 y 值分配给小地图上的 "viewport"；一切正常。我在主要的大 cnavas 上拖动，"viewport" 在滚动文档时正确移动小地图。

在小地图上拖动 "viewport" 的功能：

drag = function(){
    this.ox = this.attr('x');
    this.oy = this.attr('y');
};
move = function(dx, dy){
this.attr({'x' : Math.min(Math.max(this.ox + dx, 0), 280 - this.attr('width')), 'y' : Math.min(Math.max(this.oy + dy, 0), 180 - this.attr('height'))});
};
up = function(){

};

这也能正常工作。 "Viewport" 在小地图上移动，不会超出。

但是当我尝试在小地图上拖动 "viewport" 的同时更改文档滚动时，奇怪的事情发生了。这是代码，只需在 move 函数中添加两行：

$d.scrollLeft(this.attr('x') / scaleX);
$d.scrollTop(this.attr('y') / scaleY);

现在，当我尝试在小地图上移动 "viewport" 时，它会快速跳到小地图的一个角落，仅此而已。文档也以相同的方向滚动到末尾。

伙计们，这段简单的代码可能出了什么问题？

Answer 1

UPD：通过更改文档滚动类型解决了问题。我把主canvas的width和height设置为window.innerWidth和window.innerHeight，并在$(window).resize()事件处理程序中更改这些值。所以现在我在 div 上有滚动条，而不是在主体上，我正在更改 div 上的 .scrollLeft() 和 .scrollRight() 值。 Raphael move 函数中的值 dx 和 dy 是正确的，因为现在文档不会滚动。

我的小地图实现有什么问题？

Whats wrong with my minimap implementation?

javascript

jquery

raphael