var _3dMoveFlag = false; var _3dAction = ''; var _curr3dObject; var _3dTimeToDetect = 1000; var _3dActionType = { 'TouchStart_MouseDown' : 0, 'TouchMove_MouseMove' : 1, 'TouchEnd_MouseUp' : 2 }; function createMatrixPoints(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 = setImageIndexToMatrix(imgCurrX, imgCurrY, _arrFrame, _h, _v); return _arrFrame; }; function setImageIndexToMatrix(imgCurrX, imgCurrY, _arrFrame, _h, _v){ var deltaH = (_h - 1)/2; var deltaV = (_v - 1)/2; for(var countY = 1;countY<=_v;countY++){ var currY = 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 = reCalcMatrixX(currX, _h); //set value back _arrFrame[countY][countX] = currFrame; } } return _arrFrame; }; function showCurrImg(id, x, y, w, h, _currFrameX, _currFrameY){ var strCountH = convNumTo2Char(_currFrameX); var strCountV = convNumTo2Char(_currFrameY); var canvas = document.getElementById('offscreen'); var context = canvas.getContext('2d'); var imageId = strCountV + "-" + strCountH; var imageUrl = ""; for(var i = 0 ; i < _object3DImageArr.length; i++){ var obj = _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) { drawMarkingOnScreen(); if(!isExistDrawing){ flip(); } } else{ flip(); } }; imgCurr.src = imageUrl; }; function reCalcMatrixX(x, _h){ if(x <= 0) x = x + _h; if(x >_h) x = x - _h; return x; }; function reCalcMatrixY(y, _v){ if(y <= 0) y = y + _v; if(y >_v) y = y - _v; return y; }; function getArrFrame(id){ var arrResult = []; for(var i = 0; i < _object3DImageArr.length; i++){ var obj = _object3DImageArr[i]; if(obj.id == id){ arrResult = obj.arrFrame; return arrResult; } } }; function get3dLastSeclectedFrame(id){ var arrResult = Object(); for(var i = 0; i < _object3DImageArr.length; i++){ var obj = _object3DImageArr[i]; if(obj.id == id){ arrResult = obj._lastSelectedFrame; return arrResult; } } }; function set3dLastSeclectedFrame(id, lastFrame){ for(var i = 0; i < _object3DImageArr.length; i++){ var obj = _object3DImageArr[i]; if(obj.id == id){ _object3DImageArr[i]._lastSelectedFrame = lastFrame; } } }; function getMatrixIndexByPosition(id, position, left, top){ //compate with matrix to check went to another frame or not var posX = position.x; var posY = position.y; posX = posX - left; posY = posY - top; var _arrFrame = 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; }; function get3dCurrentFramePos(id){ var currFrame = []; for(var i = 0; i < _object3DImageArr.length; i++){ var obj = _object3DImageArr[i]; if(obj.id == id){ currFrame['_currFrameX'] = obj['_currFrameX']; currFrame['_currFrameY'] = obj['_currFrameY']; return currFrame; } } }; function set3dCurrentFramePos(id, currFramePos){ for(var i = 0; i < _object3DImageArr.length; i++){ var obj = _object3DImageArr[i]; if(obj.id == id){ _object3DImageArr[i]._currFrameX = currFramePos._currFrameX; _object3DImageArr[i]._currFrameY = currFramePos._currFrameY; } } }; function OnMouseDown3D(id, position, left, top) { if(!_3dMoveFlag ){ _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 = getMatrixIndexByPosition(id, position, left, top); set3dLastSeclectedFrame(id, _lastSelectedFrame); } }; function OnMouseMove3D(id, position, left, top, width, height, _h, _v) { if(!_3dMoveFlag){ return; } //compate with matrix to check went to another frame or not var selectedFrame = getMatrixIndexByPosition(id, position, left, top); var _lastSeclectedFrame = get3dLastSeclectedFrame(id); var _currFramePos = get3dCurrentFramePos(id); var _currFrameX = _currFramePos._currFrameX; var _currFrameY = _currFramePos._currFrameY; var strCountH = convNumTo2Char(selectedFrame.matrixX); var strCountV = convNumTo2Char(selectedFrame.matrixY); //get what action did occur var action = 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 = reCalcMatrixX(_currFrameX, _h); _currFrameY = reCalcMatrixY(_currFrameY, _v); // show current img showCurrImg(id, left, top, width, height, _currFrameX, _currFrameY); _lastSeclectedFrame = selectedFrame; //recalculate X, Y value _currFramePos._currFrameX = _currFrameX; _currFramePos._currFrameY = _currFrameY; set3dCurrentFramePos(id, _currFramePos); set3dLastSeclectedFrame(id, _lastSeclectedFrame); } }; function OnMouseEnd3D(id, _h, _v) { if(_3dMoveFlag) { _3dMoveFlag = false; var currFramePos = get3dCurrentFramePos(id); var _currFrameX = currFramePos._currFrameX; var _currFrameY = currFramePos._currFrameY; var _arrFrame = getArrFrame(id); //setImageIndexToMatrix(_currFrameX, _currFrameY, _arrFrame, _h, _v); setArrFrame(id, _h, _v, _currFrameX, _currFrameY, _arrFrame); } }; function setArrFrame(id, _h, _v, _currX, _currY, _arrFrame){ for(var i = 0; i < _object3DImageArr.length; i++){ var obj = _object3DImageArr[i]; if(obj.id == id){ obj.arrFrame = setImageIndexToMatrix(_currX, _currY, _arrFrame, _h, _v); } } }; //compare 2 frame to get action function get3DAction(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; };