從上圖可以看出，地圖向上移從而實現窗口向下取景的視覺效果，這就是地圖的相對移動原理。
通過實體介質來實現地圖移動的方式具有直觀、代碼簡單、邏輯不復雜的特性，但性能不好。
接下來看第二種方法，此方式不需要創建滾動介質，而是時時根據鼠標位置是否處於這8個區域中的任意一個進行對應的地圖移動。這種方法相對於上一種方法來說雖然不夠直觀且需要的邏輯代碼較多而繁，但它具有更高的性能與實用性，也是我推薦的方法。至於要如何實現它，我們首先需要寫一個方法，該方法用來判斷鼠標當前的位置並返回一個數字：
//根據鼠標的位置獲取鼠標所處的區域代號
//0代表正上方區域(即0點鐘位置)然後其他7個區域按順時針依次為1,2,3,4,5,6,7
int distance = 80; //定義距離邊緣多少即開始牽引地圖
private int getMouseArea() {
Point MousePosition = Mouse.GetPosition(CarrIEr); //獲取鼠標當前處於窗口中的位置
int result = -1;
//如果鼠標未超出窗口
if (MousePosition.X >= 0 && MousePosition.Y >= 0) {
//根據8種情況返回8個數字
if (MousePosition.X >= 190 && MousePosition.X <= 570) {
if (MousePosition.Y <= distance) {
result = 0;
} else if (MousePosition.Y >= 500 - distance) {
result = 4;
}
} else if (MousePosition.Y >= 125 && MousePosition.Y <= 375) {
if (MousePosition.X <= distance) {
result = 6;
} else if (MousePosition.X >= 760 - distance) {
result = 2;
}
} else if ((MousePosition.X < 190 && MousePosition.Y <= distance)
|| (MousePosition.Y < 125 && MousePosition.X <= distance)) {
result = 7;
} else if ((MousePosition.X > 570 && MousePosition.Y <= distance)
|| (MousePosition.Y < 125 && MousePosition.X >= 760 - distance)) {
result = 1;
} else if ((MousePosition.X > 570 && MousePosition.Y >= 500 - distance)
|| (MousePosition.Y > 375 && MousePosition.X >= 760 - distance)) {
result = 3;
} else if ((MousePosition.X < 190 && MousePosition.Y >= 500 - distance)
|| (MousePosition.Y > 375 && MousePosition.X <= distance)) {
result = 5;
}
}
return result;
}
然後我們通過這個數字就可以對應地圖邊緣的8個區域看是需要將地圖下移還是上移或是左上移動等等。這裡需要注意一個地方，當地圖已經移動到了某個方向的盡頭時，地圖是不能再移動的。所以綜合以上，我們在Timer_Tick事件中這樣來實現地圖滾動：
private void Timer_Tick(object sender, EventArgs e) {
//第二種方法
double mapleft = Canvas.GetLeft(Map);
double maptop = Canvas.GetTop(Map);
switch (getMouseArea()) {
case 0:
if (maptop < 0) {
Canvas.SetTop(Map, Canvas.GetTop(Map) + scrollspeed);
}
break;
case 1:
if (maptop < 0) {
Canvas.SetTop(Map, Canvas.GetTop(Map) + scrollspeed);
}
if (Map.Width + mapleft > this.ActualWidth) {
Canvas.SetLeft(Map, Canvas.GetLeft(Map) - scrollspeed);
}
break;
case 2:
if (Map.Width + mapleft > this.ActualWidth) {
Canvas.SetLeft(Map, Canvas.GetLeft(Map) - scrollspeed);
}
break;
case 3:
if (Map.Width + mapleft > this.ActualWidth) {
Canvas.SetLeft(Map, Canvas.GetLeft(Map) - scrollspeed);
}
if (Map.Height + maptop > this.ActualHeight) {
Canvas.SetTop(Map, Canvas.GetTop(Map) - scrollspeed);
}
break;
case 4:
if (Map.Height + maptop > this.ActualHeight) {
Canvas.SetTop(Map, Canvas.GetTop(Map) - scrollspeed);
}
break;
case 5:
if (Map.Height + maptop > this.ActualHeight) {
Canvas.SetTop(Map, Canvas.GetTop(Map) - scrollspeed);
}
if (mapleft < 0) {
Canvas.SetLeft(Map, Canvas.GetLeft(Map) + scrollspeed);
}
break;
case 6:
if (mapleft < 0) {
Canvas.SetLeft(Map, Canvas.GetLeft(Map) + scrollspeed);
}
break;
case 7:
if (maptop < 0) {
Canvas.SetTop(Map, Canvas.GetTop(Map) + scrollspeed);
}
if (mapleft < 0) {
Canvas.SetLeft(Map, Canvas.GetLeft(Map) + scrollspeed);
}
break;
}
}
以上的代碼主要就進行一些位置計算並判斷，重復的部分很多並不復雜。最後大家可以按下CTRL+F5，嘿嘿！地圖可以任意移動了。
效果上來說地圖是動了，可是主角還是始終處於窗口中的某一個位置保持不變（不管地圖怎麼移，它始終在窗口的左上角）。要實現跟隨移動效果，這就需要我們根據前面所說的原理，在地圖移動的同時對主角的X，Y坐標進行時時改變從而實現它的移動。關於主角如何在牽引式地圖移動模式中的地圖上移動及行走，我將在下一節進行詳細的講解，敬請關注。
