contentview_3d.js 10.1 KB
Newer Older
1

2 3 4 5
//名前空間用のオブジェクトを用意する
var CONTENTVIEW_3D = {};

CONTENTVIEW_3D.createMatrixPoints = function(width, height, _v, _h, imgCurrX, imgCurrY){   
6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
    
    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;
    }
    
29
    _arrFrame = CONTENTVIEW_3D.setImageIndexToMatrix(imgCurrX, imgCurrY, _arrFrame, _h, _v);
30 31 32 33
    
    return _arrFrame;    
};

34
CONTENTVIEW_3D.setImageIndexToMatrix = function(imgCurrX, imgCurrY, _arrFrame, _h, _v){
35 36 37 38 39
    
    var deltaH = (_h - 1)/2;
    var deltaV = (_v - 1)/2;
    
    for(var countY = 1;countY<=_v;countY++){
40
        var currY = CONTENTVIEW_3D.reCalcMatrixY(imgCurrY - deltaV + (countY - 1), _v);
41 42 43 44 45 46
        
        for(var countX=1;countX<=_h;countX++){     
            var currFrame = _arrFrame[countY][countX];
            currFrame.imgY = currY;
            
            var currX = imgCurrX - deltaH + (countX-1);
47
            currFrame.imgX = CONTENTVIEW_3D.reCalcMatrixX(currX, _h);
48 49 50 51 52 53 54 55 56
            
            //set value back
            _arrFrame[countY][countX] = currFrame;      
        }
    }
    
    return _arrFrame;
};

57 58 59
CONTENTVIEW_3D.showCurrImg = function(id, x, y, w, h, _currFrameX, _currFrameY){
    var strCountH = CONTENTVIEW_GETDATA.convNumTo2Char(_currFrameX);
    var strCountV = CONTENTVIEW_GETDATA.convNumTo2Char(_currFrameY);
60 61 62 63 64 65 66
    
    var canvas = document.getElementById('offscreen');
    var context = canvas.getContext('2d');
    
    var imageId = strCountV + "-" + strCountH;
    var imageUrl = "";
    
67 68
    for(var i = 0 ; i < CONTENTVIEW_GENERAL._object3DImageArr.length; i++){
        var obj = CONTENTVIEW_GENERAL._object3DImageArr[i];
69 70 71 72 73 74 75 76 77 78 79 80 81 82 83
        
        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) {
84 85 86
        	CONTENTVIEW.drawMarkingOnScreen();
            if(!CONTENTVIEW.isExistDrawing){
            	CONTENTVIEW.flip();
87 88 89
            }
        }
        else{
90
        	CONTENTVIEW.flip();
91 92 93 94 95
        }
    };
    imgCurr.src = imageUrl;
};

96
CONTENTVIEW_3D.reCalcMatrixX = function(x, _h){
97 98 99 100 101 102 103 104
    if(x <= 0)
        x = x + _h;
    
    if(x >_h)
        x = x - _h;
    return x;
};
    
105
CONTENTVIEW_3D.reCalcMatrixY = function(y, _v){
106 107 108 109 110 111 112
    if(y <= 0)
        y = y + _v;
    if(y >_v)
        y =  y - _v;
    return y;
};

113
CONTENTVIEW_3D.getArrFrame = function(id){
114 115
    var arrResult = [];

116 117
    for(var i = 0; i < CONTENTVIEW_GENERAL._object3DImageArr.length; i++){
        var obj = CONTENTVIEW_GENERAL._object3DImageArr[i];
118 119 120 121 122 123 124
        if(obj.id == id){
            arrResult = obj.arrFrame;            
            return arrResult;
        }
    }
};

125
CONTENTVIEW_3D.get3dLastSeclectedFrame = function(id){
126 127
    var arrResult = Object();

128 129
    for(var i = 0; i < CONTENTVIEW_GENERAL._object3DImageArr.length; i++){
        var obj = CONTENTVIEW_GENERAL._object3DImageArr[i];
130 131 132 133 134 135 136
        if(obj.id == id){
            arrResult = obj._lastSelectedFrame;            
            return arrResult;
        }
    }
};

137
CONTENTVIEW_3D.set3dLastSeclectedFrame = function(id, lastFrame){
138

139 140
    for(var i = 0; i < CONTENTVIEW_GENERAL._object3DImageArr.length; i++){
        var obj = CONTENTVIEW_GENERAL._object3DImageArr[i];
141
        if(obj.id == id){
142
        	CONTENTVIEW_GENERAL._object3DImageArr[i]._lastSelectedFrame = lastFrame;
143 144 145 146
        }
    }
};

Masaru Abe committed
147
CONTENTVIEW_3D.getMatrixIndexByPosition = function(id, position, left, top, tempRatioWidth2, tempRatioHeight2){
148 149 150 151 152
    //compate with matrix to check went to another frame or not
    
    var posX = position.x;
    var posY = position.y;  
    
Masaru Abe committed
153 154
    //console.log("posX:" + posX + " posY:" + posY + " left:" + left + " top:" + top );
    
155 156 157
    posX = posX - left;
    posY = posY - top;
    
Masaru Abe committed
158 159 160 161
    //座標調整 縮める
    posX = posX * tempRatioWidth2;
    posY = posY * tempRatioHeight2;
    
162
    var _arrFrame = CONTENTVIEW_3D.getArrFrame(id);
163 164 165 166 167 168 169 170 171 172 173 174 175 176 177
        
    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;       
};

178
CONTENTVIEW_3D.get3dCurrentFramePos = function(id){
179 180
    var currFrame = [];
    
181 182
    for(var i = 0; i < CONTENTVIEW_GENERAL._object3DImageArr.length; i++){
        var obj = CONTENTVIEW_GENERAL._object3DImageArr[i];
183 184 185 186 187 188 189 190 191
        if(obj.id == id){
            currFrame['_currFrameX'] = obj['_currFrameX'];
            currFrame['_currFrameY'] = obj['_currFrameY'];
            
            return currFrame;
        }
    }
};

192 193 194
CONTENTVIEW_3D.set3dCurrentFramePos = function(id, currFramePos){
    for(var i = 0; i < CONTENTVIEW_GENERAL._object3DImageArr.length; i++){
        var obj = CONTENTVIEW_GENERAL._object3DImageArr[i];
195
        if(obj.id == id){
196 197
        	CONTENTVIEW_GENERAL._object3DImageArr[i]._currFrameX = currFramePos._currFrameX;
        	CONTENTVIEW_GENERAL._object3DImageArr[i]._currFrameY = currFramePos._currFrameY;
198 199 200 201
        }
    }
};

Masaru Abe committed
202
CONTENTVIEW_3D.OnMouseDown3D = function(id, position, left, top, tempRatioWidth2, tempRatioHeight2) {
203
    
204 205
    if(!CONTENTVIEW_3D._3dMoveFlag ){
    	CONTENTVIEW_3D._3dMoveFlag = true;  
206 207 208
                
        //compate with matrix to check went to another frame or not
        //and set to last selected frame to compare on move event later
Masaru Abe committed
209
        var _lastSelectedFrame = CONTENTVIEW_3D.getMatrixIndexByPosition(id, position, left, top, tempRatioWidth2, tempRatioHeight2);
210
        CONTENTVIEW_3D.set3dLastSeclectedFrame(id, _lastSelectedFrame);
211 212 213 214
    }
    
};

Masaru Abe committed
215 216
CONTENTVIEW_3D.OnMouseMove3D = function(id, position, left, top, width, height, _h, _v, tempRatioWidth2, tempRatioHeight2) {
	
217
    if(!CONTENTVIEW_3D._3dMoveFlag){
218 219
        return;
    }
Masaru Abe committed
220
	
221
    //compate with matrix to check went to another frame or not
Masaru Abe committed
222 223 224
    var selectedFrame = CONTENTVIEW_3D.getMatrixIndexByPosition(id, position, left, top, tempRatioWidth2, tempRatioHeight2);
//console.log("selectedFrameX:" + selectedFrame.matrixX + "," + selectedFrame.matrixY );
    
225 226
    var _lastSeclectedFrame = CONTENTVIEW_3D.get3dLastSeclectedFrame(id);
    var _currFramePos = CONTENTVIEW_3D.get3dCurrentFramePos(id);
227 228 229 230
    var _currFrameX = _currFramePos._currFrameX;
    var _currFrameY = _currFramePos._currFrameY; 
    
        
231 232
    var strCountH = CONTENTVIEW_GETDATA.convNumTo2Char(selectedFrame.matrixX);
    var strCountV = CONTENTVIEW_GETDATA.convNumTo2Char(selectedFrame.matrixY);
233 234

    //get what action did occur
235
    var action = CONTENTVIEW_3D.get3DAction(_lastSeclectedFrame, selectedFrame);
236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252

    $('#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--;
                   
253 254
        _currFrameX = CONTENTVIEW_3D.reCalcMatrixX(_currFrameX, _h);
        _currFrameY = CONTENTVIEW_3D.reCalcMatrixY(_currFrameY, _v);
255 256
               
         // show current img 
257
        CONTENTVIEW_3D.showCurrImg(id, left, top, width, height, _currFrameX, _currFrameY);
258 259 260 261 262 263
        _lastSeclectedFrame = selectedFrame;
        
        //recalculate X, Y value
        _currFramePos._currFrameX = _currFrameX; 
        _currFramePos._currFrameY = _currFrameY;
        
264 265
        CONTENTVIEW_3D.set3dCurrentFramePos(id, _currFramePos);                                  
        CONTENTVIEW_3D.set3dLastSeclectedFrame(id, _lastSeclectedFrame);
266 267 268
    }
};

269
CONTENTVIEW_3D.OnMouseEnd3D = function(id, _h, _v) {
Masaru Abe committed
270
	
271 272
    if(CONTENTVIEW_3D._3dMoveFlag) {
    	CONTENTVIEW_3D._3dMoveFlag = false;
273
        
274
        var currFramePos = CONTENTVIEW_3D.get3dCurrentFramePos(id);
275 276
        var _currFrameX = currFramePos._currFrameX;
        var _currFrameY = currFramePos._currFrameY;
277
        var _arrFrame = CONTENTVIEW_3D.getArrFrame(id);
278
        
279 280
        //CONTENTVIEW_3D.setImageIndexToMatrix(_currFrameX, _currFrameY, _arrFrame, _h, _v);
        CONTENTVIEW_3D.setArrFrame(id, _h, _v, _currFrameX, _currFrameY, _arrFrame);
281 282 283
    }   
};

284
CONTENTVIEW_3D.setArrFrame = function(id, _h, _v, _currX, _currY, _arrFrame){
285
    
286 287
    for(var i = 0; i < CONTENTVIEW_GENERAL._object3DImageArr.length; i++){
        var obj = CONTENTVIEW_GENERAL._object3DImageArr[i];
288
        if(obj.id == id){
289
            obj.arrFrame = CONTENTVIEW_3D.setImageIndexToMatrix(_currX, _currY, _arrFrame, _h, _v);
290 291 292 293 294
        }
    }   
};

//compare 2 frame to get action
295
CONTENTVIEW_3D.get3DAction = function(lastFrame, currFrame){
296 297 298 299 300 301 302 303 304 305 306 307 308
    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;    
};
309

310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326
$(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
	};
	
};