Question

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

创建Raphael实例并设置两个画布-主画布（5000x5000）和小地图（280x180）：

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

然后在小地图上创建一个“视口”，即在页面上显示您的位置：

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-在画布上移动时缩放比例值是必需的。

在主画布上拖放滚动类型的功能：

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值分配给小地图上的“视口”；一切都很好。我在主要的大型cnava上拖动，在minimap上的“视口”随着文档的滚动而正确移动。

在小地图上拖动“视口”的功能：

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(){

};

这也可以正常工作。 “视口”在小地图上移动，并且不会超出范围。

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

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

现在，当我尝试在小地图上移动“视口”时，它会迅速跳到小地图的一个角落，仅此而已。该文档还沿相同方向滚动到末尾。

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

Answer 1

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

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

1 个答案: