//名前空間用のオブジェクトを用意する var CONTENTVIEW_3D = {}; CONTENTVIEW_3D.createMatrixPoints = function(width, height, _v, _h, imgCurrX, imgCurrY){ var deltaX = width/ _h; var deltaY = height/ _v; var _arrFrame = []; for (var countV = 1; countV<= _v; countV++){ var temp = []; for(var countH = 1;countH<=_h; countH++){ var frame = { x1: deltaX*(countH-1), y1: deltaY*(countV-1), x2: deltaX*countH, y2: deltaY*countV, matrixY: countV, matrixX: countH }; temp[countH]=frame; } _arrFrame[countV]=temp; } _arrFrame = CONTENTVIEW_3D.setImageIndexToMatrix(imgCurrX, imgCurrY, _arrFrame, _h, _v); return _arrFrame; }; CONTENTVIEW_3D.setImageIndexToMatrix = function(imgCurrX, imgCurrY, _arrFrame, _h, _v){ var deltaH = (_h - 1)/2; var deltaV = (_v - 1)/2; for(var countY = 1;countY<=_v;countY++){ var currY = CONTENTVIEW_3D.reCalcMatrixY(imgCurrY - deltaV + (countY - 1), _v); for(var countX=1;countX<=_h;countX++){ var currFrame = _arrFrame[countY][countX]; currFrame.imgY = currY; var currX = imgCurrX - deltaH + (countX-1); currFrame.imgX = CONTENTVIEW_3D.reCalcMatrixX(currX, _h); //set value back _arrFrame[countY][countX] = currFrame; } } return _arrFrame; }; CONTENTVIEW_3D.showCurrImg = function(id, x, y, w, h, _currFrameX, _currFrameY){ var strCountH = CONTENTVIEW_GETDATA.convNumTo2Char(_currFrameX); var strCountV = CONTENTVIEW_GETDATA.convNumTo2Char(_currFrameY); var canvas = document.getElementById('offscreen'); var context = canvas.getContext('2d'); var imageId = strCountV + "-" + strCountH; var imageUrl = ""; for(var i = 0 ; i < CONTENTVIEW_GENERAL._object3DImageArr.length; i++){ var obj = CONTENTVIEW_GENERAL._object3DImageArr[i]; if(obj.id == id){ var Obj1 = obj["3dview"]; imageUrl = Obj1[imageId]; break; } } var imgCurr = new Image(); imgCurr.onload= function() { context.drawImage(imgCurr, x,y,w,h); context.save(); if (ClientData.IsAddingMarking() == false && ClientData.IsDisplayMarking() == true) { CONTENTVIEW.drawMarkingOnScreen(); if(!CONTENTVIEW.isExistDrawing){ CONTENTVIEW.flip(); } } else{ CONTENTVIEW.flip(); } }; imgCurr.src = imageUrl; }; CONTENTVIEW_3D.reCalcMatrixX = function(x, _h){ if(x <= 0) x = x + _h; if(x >_h) x = x - _h; return x; }; CONTENTVIEW_3D.reCalcMatrixY = function(y, _v){ if(y <= 0) y = y + _v; if(y >_v) y = y - _v; return y; }; CONTENTVIEW_3D.getArrFrame = function(id){ var arrResult = []; for(var i = 0; i < CONTENTVIEW_GENERAL._object3DImageArr.length; i++){ var obj = CONTENTVIEW_GENERAL._object3DImageArr[i]; if(obj.id == id){ arrResult = obj.arrFrame; return arrResult; } } }; CONTENTVIEW_3D.get3dLastSeclectedFrame = function(id){ var arrResult = Object(); for(var i = 0; i < CONTENTVIEW_GENERAL._object3DImageArr.length; i++){ var obj = CONTENTVIEW_GENERAL._object3DImageArr[i]; if(obj.id == id){ arrResult = obj._lastSelectedFrame; return arrResult; } } }; CONTENTVIEW_3D.set3dLastSeclectedFrame = function(id, lastFrame){ for(var i = 0; i < CONTENTVIEW_GENERAL._object3DImageArr.length; i++){ var obj = CONTENTVIEW_GENERAL._object3DImageArr[i]; if(obj.id == id){ CONTENTVIEW_GENERAL._object3DImageArr[i]._lastSelectedFrame = lastFrame; } } }; CONTENTVIEW_3D.getMatrixIndexByPosition = function(id, position, left, top, tempRatioWidth2, tempRatioHeight2){ //compate with matrix to check went to another frame or not var posX = position.x; var posY = position.y; //console.log("posX:" + posX + " posY:" + posY + " left:" + left + " top:" + top ); posX = posX - left; posY = posY - top; //座標調整 縮める posX = posX * tempRatioWidth2; posY = posY * tempRatioHeight2; var _arrFrame = CONTENTVIEW_3D.getArrFrame(id); for(var countY=1;countY<_arrFrame.length;countY++){ for(var countX=1;countX<_arrFrame[countY].length;countX++){ // get curr frame image object var objFrame = _arrFrame[countY][countX]; if(posX >= objFrame.x1 && posX < objFrame.x2 && posY >= objFrame.y1 && posY < objFrame.y2 ){ var nRet = objFrame; return nRet; } } } return false; }; CONTENTVIEW_3D.get3dCurrentFramePos = function(id){ var currFrame = []; for(var i = 0; i < CONTENTVIEW_GENERAL._object3DImageArr.length; i++){ var obj = CONTENTVIEW_GENERAL._object3DImageArr[i]; if(obj.id == id){ currFrame['_currFrameX'] = obj['_currFrameX']; currFrame['_currFrameY'] = obj['_currFrameY']; return currFrame; } } }; CONTENTVIEW_3D.set3dCurrentFramePos = function(id, currFramePos){ for(var i = 0; i < CONTENTVIEW_GENERAL._object3DImageArr.length; i++){ var obj = CONTENTVIEW_GENERAL._object3DImageArr[i]; if(obj.id == id){ CONTENTVIEW_GENERAL._object3DImageArr[i]._currFrameX = currFramePos._currFrameX; CONTENTVIEW_GENERAL._object3DImageArr[i]._currFrameY = currFramePos._currFrameY; } } }; CONTENTVIEW_3D.OnMouseDown3D = function(id, position, left, top, tempRatioWidth2, tempRatioHeight2) { if(!CONTENTVIEW_3D._3dMoveFlag ){ CONTENTVIEW_3D._3dMoveFlag = true; //compate with matrix to check went to another frame or not //and set to last selected frame to compare on move event later var _lastSelectedFrame = CONTENTVIEW_3D.getMatrixIndexByPosition(id, position, left, top, tempRatioWidth2, tempRatioHeight2); CONTENTVIEW_3D.set3dLastSeclectedFrame(id, _lastSelectedFrame); } }; CONTENTVIEW_3D.OnMouseMove3D = function(id, position, left, top, width, height, _h, _v, tempRatioWidth2, tempRatioHeight2) { if(!CONTENTVIEW_3D._3dMoveFlag){ return; } //compate with matrix to check went to another frame or not var selectedFrame = CONTENTVIEW_3D.getMatrixIndexByPosition(id, position, left, top, tempRatioWidth2, tempRatioHeight2); //console.log("selectedFrameX:" + selectedFrame.matrixX + "," + selectedFrame.matrixY ); var _lastSeclectedFrame = CONTENTVIEW_3D.get3dLastSeclectedFrame(id); var _currFramePos = CONTENTVIEW_3D.get3dCurrentFramePos(id); var _currFrameX = _currFramePos._currFrameX; var _currFrameY = _currFramePos._currFrameY; var strCountH = CONTENTVIEW_GETDATA.convNumTo2Char(selectedFrame.matrixX); var strCountV = CONTENTVIEW_GETDATA.convNumTo2Char(selectedFrame.matrixY); //get what action did occur var action = CONTENTVIEW_3D.get3DAction(_lastSeclectedFrame, selectedFrame); $('#test').html(action); if(action!=0){ if(action==1) //_currFrameX--; _currFrameX++; else if(action==2) //_currFrameX++; _currFrameX--; else if(action==3) //_currFrameY--; _currFrameY++; else if(action==4) //_currFrameY++; _currFrameY--; _currFrameX = CONTENTVIEW_3D.reCalcMatrixX(_currFrameX, _h); _currFrameY = CONTENTVIEW_3D.reCalcMatrixY(_currFrameY, _v); // show current img CONTENTVIEW_3D.showCurrImg(id, left, top, width, height, _currFrameX, _currFrameY); _lastSeclectedFrame = selectedFrame; //recalculate X, Y value _currFramePos._currFrameX = _currFrameX; _currFramePos._currFrameY = _currFrameY; CONTENTVIEW_3D.set3dCurrentFramePos(id, _currFramePos); CONTENTVIEW_3D.set3dLastSeclectedFrame(id, _lastSeclectedFrame); } }; CONTENTVIEW_3D.OnMouseEnd3D = function(id, _h, _v) { if(CONTENTVIEW_3D._3dMoveFlag) { CONTENTVIEW_3D._3dMoveFlag = false; var currFramePos = CONTENTVIEW_3D.get3dCurrentFramePos(id); var _currFrameX = currFramePos._currFrameX; var _currFrameY = currFramePos._currFrameY; var _arrFrame = CONTENTVIEW_3D.getArrFrame(id); //CONTENTVIEW_3D.setImageIndexToMatrix(_currFrameX, _currFrameY, _arrFrame, _h, _v); CONTENTVIEW_3D.setArrFrame(id, _h, _v, _currFrameX, _currFrameY, _arrFrame); } }; CONTENTVIEW_3D.setArrFrame = function(id, _h, _v, _currX, _currY, _arrFrame){ for(var i = 0; i < CONTENTVIEW_GENERAL._object3DImageArr.length; i++){ var obj = CONTENTVIEW_GENERAL._object3DImageArr[i]; if(obj.id == id){ obj.arrFrame = CONTENTVIEW_3D.setImageIndexToMatrix(_currX, _currY, _arrFrame, _h, _v); } } }; //compare 2 frame to get action CONTENTVIEW_3D.get3DAction = function(lastFrame, currFrame){ var nRet = 0; if(lastFrame.x1<currFrame.x1) nRet=1; // move right else if(lastFrame.x1>currFrame.x1) nRet=2; // move left else if(lastFrame.y1<currFrame.y1) nRet=3; // move down else if(lastFrame.y1>currFrame.y1) nRet=4; // move up return nRet; }; $(function () { //CONTENTVIEW_3D.ready(); }); CONTENTVIEW_3D.ready = function(){ CONTENTVIEW_3D._3dMoveFlag = false; CONTENTVIEW_3D._3dAction = ''; CONTENTVIEW_3D._curr3dObject = undefined; CONTENTVIEW_3D._3dActionType = { 'TouchStart_MouseDown' : 0, 'TouchMove_MouseMove' : 1, 'TouchEnd_MouseUp' : 2 }; };