1 /// <reference path="../jquery/js/jquery-1.10.2.min.js" />
  2 /// <reference path="../Scripts/common.js" />
  3 var g_x; //当前マウスＸ座標
  4 var g_y; //当前マウスＹ座標
  5 var scaleX = 1; // X軸の倍率
  6 var scaleY = 1; // Y軸の倍率
  7 var scaleXY = 1; //X軸およびY軸の倍率
  8 var c; //キャンバス
  9 var img; //画像
 10 var imgW = 0; //画像の幅
 11 var imgH = 0; //画像の高さ
 12 var imgShowW = 0; //画像ショーの実際の幅
 13 var imgShowH = 0; //画像ショーの実際の高さ
 14 var imgOffsetX = 0; //X軸の移動距離
 15 var imgOffsetY = 0; //Y軸の移動距離
 16 var popupDivX = 0; //Xポップアップボックスの座標
 17 var popupDivY = 0; //Yポップアップボックスの座標
 18 var timeFn = null; //遅延実行
 19 var asc = false; //拡大のＦＬＧ
 20 var desc = false; //狭いのＦＬＧ
 21 var startStationNo = false; //出発駅を選択のＦＬＧ
 22 var endStationNo = true; //到着駅を選択のＦＬＧ
 23 var windowWidth = 0; //キャンバスの幅
 24 var windowHeight = 0; //キャンバスの高さ
 25 var isFind = true; //駅を選択のＦＬＧ
 26 var pointerX1 = 0; //第一個の指の横座標
 27 var pointerY1 = 0; //第一個の指の縦座標
 28 var pointerX2 = 0; //2つ目の指の横座標
 29 var pointerY2 = 0; //2つ目の指の縦座標
 30 var preX = 0; //上のＸ軸の位置
 31 var preY = 0;  //上のＹ軸の位置
 32 var isGesture = false;  //触れるのＦＬＧ
 33 
 34 
 35 $(document).ready(function () {
 36 
 37     var main_contents = $(".main-contents");
 38     windowWidth = main_contents.width(); //キャンバスの幅セットする
 39     windowHeight = main_contents.height();
 40 
 41     image_path ="xxxxx.img";
 42     c = document.getElementById("canvas_id");
 43     //キャンバスの位置セットする
 44     canvasPosition.x = $(c).offset().left;
 45     canvasPosition.y = $(c).offset().top;
 46     //キャンバスのサイズセットする
 47     c.height = windowHeight;
 48     c.width = windowWidth;
 49     //キャンバスを作成する
 50     cxt = c.getContext("2d");
 51     img = document.createElement('img');
 52     img.src = image_path; //イメージのパース
 53     //イメージを描画する
 54     img.addEventListener('load', eventPhotoLoaded, false);
 55     function eventPhotoLoaded() {
 56         imgW = img.width;
 57         imgH = img.height;
 58         imgShowW = imgW;
 59         imgShowH = imgH;
 60         //画像の縦横比を維持するため
 61         var zw = windowHeight * (imgW / imgH);
 62         var xx = zw - windowWidth;
 63         scaleX = imgShowW / (imgShowW - ((imgShowW / windowWidth) * xx));
 64         imgShowW = imgW / scaleX;
 65         scaleXY = scaleX / scaleY;
 66 
 67         //ジェスチャーイベントを追加
 68 //        setGesture();
 69     }
 70 
 71 
 72     //キーボードのキー
 73     document.onkeydown = function (e) {
 74         writeEventLog("onkeydown", "画面キーダウンイベント");
 75         e = e ? e : window.event;
 76         arv_address.arv_node = "";
 77         arv_address.arv_hyper = "";
 78         arv_address.arv_num = "";
 79         $("#ekiPanel").animate({ opacity: "hide" }, 50);
 80         var x = 10 / scaleX;
 81         var y = 10 / scaleY;
 82         switch (e.keyCode) {
 83             case 38:
 84                 //上へ
 85                 moveMap(0, -y);
 86                 break;
 87             case 40:
 88                 //下へ
 89                 moveMap(0, y);
 90                 break;
 91             case 37:
 92                 //左へ
 93                 moveMap(-x, 0);
 94                 break;
 95             case 39:
 96                 //右へ
 97                 moveMap(x, 0);
 98         }
 99     }
100 });
101 
102 
103 //画像表示サイズを設定する
104 function setShowWH() {
105     if (scaleX != 0) {
106         imgShowW = imgW / scaleX;
107         if (scaleX <= 1) {
108             imgShowW = imgW;
109         }
110         if (imgShowW + imgOffsetX >= imgW) {
111             imgOffsetX = imgW - imgShowW;
112         }
113     }
114     if (scaleY != 0) {
115         imgShowH = imgH / scaleY;
116         if (scaleY <= 1) {
117             imgShowH = imgH;
118         }
119         if (imgShowH + imgOffsetY >= imgH) {
120             imgOffsetY = imgH - imgShowH;
121         }
122     }
123 }
124 //画像をダブルクリックします
125 function doubleclickmap(event) {
126     writeEventLog("doubleclickmap", "canvasダブルクリック");
127     $("#ekiPanel").animate({ opacity: "hide" }, 300);
128     arv_address.arv_node = "";
129     arv_address.arv_hyper = "";
130     arv_address.arv_num = "";
131     clearTimeout(timeFn);
132 
133     //マウスの位置を取得する
134     var x = event.pageX - canvasPosition.x;
135     var y = event.pageY - canvasPosition.y;
136 
137     //イメージポイントを取得する
138     g_x = ((imgW / scaleX) * (x / windowWidth)) + imgOffsetX;
139     g_y = ((imgH / scaleY) * (y / windowHeight)) + imgOffsetY;
140     upSize();
141     setZoom(g_x, g_y, x, y);
142 }
143 //画像を拡大または縮小
144 function setZoom(imgX, imgY, canvasX, canvasY) {
145     //  0.5:センター x / windowWidth=0.5   2:2倍のサイズ
146     // var centerG_x = ((imgW / scaleX) * 0.5)*(scaleX / 2) + imgOffsetX;
147     // 上記によると、出ていた　 画像は、ポイントの現在の位置を変更した後
148     var centerG_x = (imgW * canvasX) / (windowWidth * scaleX) + imgOffsetX;
149     var centerG_y = (imgH * canvasY) / (windowHeight * scaleY) + imgOffsetY;
150     //設定された画像の位置
151     var offsetX = (imgX - centerG_x) + imgOffsetX;
152     var offsetY = (imgY - centerG_y) + imgOffsetY;
153     setShowWH();
154     //境界の判断
155     if (offsetX < 0) {
156         imgOffsetX = 0;
157     }
158     else if (imgShowW + offsetX > imgW) {
159         imgOffsetX = imgW - imgShowW;
160     }
161     else {
162         imgOffsetX = offsetX;
163     }
164 
165     if (offsetY < 0) {
166         imgOffsetY = 0;
167     }
168     else if (imgShowH + offsetY > imgH) {
169         imgOffsetY = imgH - imgShowH;
170     }
171     else {
172         imgOffsetY = offsetY;
173 
174     }
175     //絵を描く
176     drawScreen();
177 }
178 
179 //設定倍率
180 function upSize() {
181     var scale = 1;
182     if (asc) {
183         if (scaleY > 3 && scaleY < 4) {
184             scale = 4 - scaleY;
185         }
186         scaleX += scaleXY * scale;
187         scaleY += scale;
188     }
189     if (desc) {
190         if (scaleY > 1 && scaleY < 2) {
191             scale = scaleY - 1;
192         }
193         scaleX -= scaleXY * scale;
194         scaleY -= scale;
195     }
196     setShowWH();
197 }
198 
199 //ジェスチャーを設置する。
200 function setGesture() {
201     var gesture = new MSGesture();
202     gesture.target = c;
203 
204     //ジェスチャーの変更事件
205     c.addEventListener("MSGestureChange", handlegesture);
206     //ジェスチャーのﾈ~わる事件
207     c.addEventListener("MSGestureEnd", handlegestureEnd);
208 
209     //クリックジェスチャー
210     c.addEventListener("MSPointerDown", function (evt) {
211         writeEventLog("pinch-in", "ピンチインイベント");
212         clearTimeout(timeFn);
213 
214         gesture.addPointer(evt.pointerId);
215         if (pointerX1 == 0 && pointerY1 == 0) {
216             pointerX1 = evt.pageX - canvasPosition.x;
217             pointerY1 = evt.pageY - canvasPosition.y;
218         }
219 
220         else if (pointerX2 == 0 && pointerY2 == 0) {
221             pointerX2 = evt.pageX - canvasPosition.x;
222             pointerY2 = evt.pageY - canvasPosition.y;
223         }
224         preX = evt.pageX - canvasPosition.x;
225         preY = evt.pageY - canvasPosition.y;
226 
227     });
228 
229     //ジェスチャーの変更する処理。
230     function handlegesture(e) {
231         arv_address.arv_node = "";
232         arv_address.arv_hyper = "";
233         arv_address.arv_num = "";
234         $("#ekiPanel").animate({ opacity: "hide" }, 50);
235         isGesture = true;
236         if (e.scale > 1) {
237             zoomInAndOutMap(true);
238         }
239         else if (e.scale < 1) {
240             zoomInAndOutMap(false);
241         } else {
242 
243             //イメージポイントを取得する
244             var imgX = (imgW * preX) / (windowWidth * scaleX) + imgOffsetX;
245             var imgY = (imgH * preY) / (windowHeight * scaleY) + imgOffsetY;
246             setZoom(imgX, imgY, e.offsetX, e.offsetY);
247             preX = e.offsetX;
248             preY = e.offsetY;
249         }
250     }
251 
252     //ジェスチャーの終わる処理。
253     function handlegestureEnd(e) {
254         writeEventLog("pinch-out", "ピンチアウトイベント");
255         pointerX1 = 0;
256         pointerY1 = 0;
257         pointerX2 = 0;
258         pointerY2 = 0;
259         isGesture = false;
260     }
261 }
262 //表示する倍率を設置する。
263 function setScale(isUp) {
264     if (isUp) {
265         if (scaleY < 4) {
266             scaleX += scaleXY * 0.05;
267             scaleY += 0.05;
268         }
269     } else {
270         if (scaleY > 1) {
271             scaleX -= scaleXY * 0.05;
272             scaleY -= 0.05;
273         }
274     }
275     if (scaleY < 1) {
276         scaleY = 1;
277         scaleX = scaleXY;
278     }
279     if (scaleY > 4) {
280         scaleY = 4;
281         scaleX = scaleXY * 4;
282     }
283 }
284 
285 //地図のズーミングは操作します。
286 function zoomInAndOutMap(isUp) {
287     var x = Math.abs(pointerX1 - pointerX2) / 2;
288     var y = Math.abs(pointerY1 - pointerY2) / 2;
289     if (pointerX1 <= pointerX2) {
290         x = x + pointerX1;
291     } else {
292         x = x + pointerX2;
293     }
294     if (pointerY1 <= pointerY2) {
295         y = y + pointerY1;
296     } else {
297         y = y + pointerY2;
298     }
299     //img point
300     g_x = ((imgW / scaleX) * (x / windowWidth)) + imgOffsetX;
301     g_y = ((imgH / scaleY) * (y / windowHeight)) + imgOffsetY;
302 
303     setScale(isUp);
304     setZoom(g_x, g_y, x, y);
305 }
306 
307 //地図を移動する。
308 function moveMap(x, y) {
309     if (imgOffsetX >= 0) {
310         imgOffsetX += x;
311     }
312     if (imgOffsetY >= 0) {
313         imgOffsetY += y;
314     }
315     if (imgShowW + imgOffsetX > imgW) {
316         imgOffsetX = imgW - imgShowW;
317     }
318     if (imgShowH + imgOffsetY > imgH) {
319         imgOffsetY = imgH - imgShowH;
320     }
321     if (imgOffsetX < 0) {
322         imgOffsetX = 0;
323     }
324     if (imgOffsetY < 0) {
325         imgOffsetY = 0;
326     }
327     //絵を描く
328     drawScreen();
329 }
330 
331 //絵を描く
332 function drawScreen() {
333     if (imgShowW > 0 && imgShowH > 0 && imgOffsetX >= 0 && imgOffsetY >= 0) {
334         cxt.fillRect(0, 0, windowWidth, windowHeight);
335         if (scaleY <= 1) {
336             asc = true;
337             desc = false;
338         }
339         if (scaleY >= 4) {
340             asc = false;
341             desc = true;
342         }
343         if (scaleY >= 1) {
344             cxt.drawImage(img, imgOffsetX, imgOffsetY, imgShowW, imgShowH,
345              0, 0, windowWidth, windowHeight);
346         }
347         else {
348             cxt.drawImage(img, imgOffsetX, imgOffsetY, imgShowW, imgShowH,
349              0, 0, windowWidth * scaleX, windowHeight * scaleY);
350         }
351     }
352 }