contentview_Paint.js 22.6 KB
Newer Older
1 2
/// コンテンツ閲覧画面_消しゴム書式オーバーレイ

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

6
//未使用
7
// works out the X, Y position of the click inside the canvas from the X, Y position on the page
8
CONTENTVIEW_PAINT.getPosition = function(mouseEvent, sigCanvas) {
9 10 11 12 13 14 15 16 17 18 19 20 21
    var x, y;
    if (mouseEvent.pageX != undefined && mouseEvent.pageY != undefined) {
        x = mouseEvent.pageX;
        y = mouseEvent.pageY;
    } else {
        x = mouseEvent.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        y = mouseEvent.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }

    return { X: x - sigCanvas.offsetLeft, Y: y - sigCanvas.offsetTop };
};


22
CONTENTVIEW_PAINT.initializeCanvas = function(targetCanvas) {
23 24 25 26 27 28 29 30 31 32 33
    // get references to the canvas element as well as the 2D drawing context
    var sigCanvas = targetCanvas;
    var context = sigCanvas.getContext("2d");
    context.strokeStyle = 'Black';

    // This will be defined on a TOUCH device such as iPad or Android, etc.
    var is_touch_device = 'ontouchstart' in document.documentElement;

    if (is_touch_device) {
        // create a drawer which tracks touch movements
        var drawer = {
34
        		isDrawing: false,
35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
            //            touchstart: function (coors) {
            //                context.beginPath();
            //                context.moveTo(coors.x, coors.y);
            //                this.isDrawing = true;
            //            },
            //            touchmove: function (coors) {
            //                if (this.isDrawing) {
            //                    context.lineTo(coors.x, coors.y);
            //                    context.stroke();
            //                }
            //            },
            //            touchend: function (coors) {
            //                if (this.isDrawing) {
            //                    this.touchmove(coors);
            //                    this.isDrawing = false;
            //                }
            //            }
            touchstart: function (coors) {
                context.beginPath();
                context.moveTo(coors.x, coors.y);
                this.isDrawing = true;
56
                CONTENTVIEW_PAINT.drawPoint(coors, context);
57 58 59
            },
            touchmove: function (coors) {
                if (this.isDrawing) {
60
                	CONTENTVIEW_PAINT.drawMove(coors, context);
61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116
                }
            },
            touchend: function (coors) {
                if (this.isDrawing) {
                    //this.touchmove(coors);
                    this.isDrawing = false;
                    context.closePath();
                }
            }

        };

        // create a function to pass touch events and coordinates to drawer
        function draw(event) {
            if (event.type == "touchend") {
                drawer[event.type](null);
            }
            else {
                // get the touch coordinates.  Using the first touch in case of multi-touch
                var coors = {
                    x: event.targetTouches[0].pageX,
                    y: event.targetTouches[0].pageY
                };

                // Now we need to get the offset of the canvas location
                var obj = sigCanvas;

                if (obj.offsetParent) {
                    // Every time we find a new object, we add its offsetLeft and offsetTop to curleft and curtop.
                    do {
                        coors.x -= obj.offsetLeft;
                        coors.y -= obj.offsetTop;
                    }
                    // The while loop can be "while (obj = obj.offsetParent)" only, which does return null
                    // when null is passed back, but that creates a warning in some editors (i.e. VS2010).
                    while ((obj = obj.offsetParent) != null);
                }

                // pass the coordinates to the appropriate handler
                drawer[event.type](coors);
            }
        };


        // attach the touchstart, touchmove, touchend event listeners.
        sigCanvas.addEventListener('touchstart', draw, false);
        sigCanvas.addEventListener('touchmove', draw, false);
        sigCanvas.addEventListener('touchend', draw, false);

        // prevent elastic scrolling
        sigCanvas.addEventListener('touchmove', function (event) {
            event.preventDefault();
        }, false);
    }
    
};
117 118 119

CONTENTVIEW_PAINT.drawMove = function(coors, context_draw) {
    if (CONTENTVIEW_GENERAL.isAddingMarking == true) {
120 121

        
122
            if (CONTENTVIEW_GENERAL.markingType == 'eraser') {
123 124
                //context.clearRect(coors.x, coors.y, ClientData.erase_size(), ClientData.erase_size());
                context_draw.globalCompositeOperation = 'destination-out';
125
                context_draw.lineWidth = CONTENTVIEW_GENERAL.eraseSize;
126 127
                context_draw.lineJoin = 'round';
                context_draw.lineCap = 'round';
128
                context_draw.lineTo(CONTENTVIEW_GENERAL.sx, CONTENTVIEW_GENERAL.sy);
129 130 131
                context_draw.stroke();
                context_draw.globalCompositeOperation = 'source-over';
            }
132
            else if (CONTENTVIEW_GENERAL.markingType == 'pen') {
133 134
                context_draw.lineCap = "round";
                context_draw.lineJoin = "bevel";
135 136
                context_draw.lineWidth = CONTENTVIEW_GENERAL.penSize;
                context_draw.strokeStyle = "#" + CONTENTVIEW_GENERAL.penColor;
Vo Duc Thang committed
137
                //context_draw.globalAlpha = 1;                 
138 139 140
                context_draw.lineTo(coors.x, coors.y);
                context_draw.stroke();
            }
141
            else if (CONTENTVIEW_GENERAL.markingType == 'maker') {
142 143 144 145 146 147 148 149 150
                /*context_draw.clearRect(coors.x , coors.y,makerSize, coors.y - sy);*/
                /*context_draw.globalCompositeOperation = 'destination-out';
                context_draw.lineWidth = makerSize/10;
                context_draw.lineHeight = makerSize/10;
                context_draw.lineJoin = 'bevel';
                context_draw.lineCap = 'butt';
                context_draw.lineTo(coors.x, coors.y);
                context_draw.stroke();
                context_draw.globalCompositeOperation = 'source-over';*/
Vo Duc Thang committed
151
                //context_draw.globalCompositeOperation = 'destination-out'                                                     
152 153
                context_draw.beginPath();

154 155
                var halfSize = CONTENTVIEW_GENERAL.makerSize / 2;
                var quotSize = CONTENTVIEW_GENERAL.makerSize / 4;
156 157

                var ptStart = [
158 159 160 161
                                    { x: CONTENTVIEW_GENERAL.sx - quotSize, y: CONTENTVIEW_GENERAL.sy - halfSize },
                                    { x: CONTENTVIEW_GENERAL.sx + quotSize, y: CONTENTVIEW_GENERAL.sy - halfSize },
                                    { x: CONTENTVIEW_GENERAL.sx + quotSize, y: CONTENTVIEW_GENERAL.sy + halfSize },
                                    { x: CONTENTVIEW_GENERAL.sx - quotSize, y: CONTENTVIEW_GENERAL.sy + halfSize }
Vo Duc Thang committed
162
                              ];
163
                var ptEnd = [
Vo Duc Thang committed
164 165 166 167 168
                                            { x: coors.x - quotSize, y: coors.y - halfSize },
                                            { x: coors.x + quotSize, y: coors.y - halfSize },
                                            { x: coors.x + quotSize, y: coors.y + halfSize },
                                            { x: coors.x - quotSize, y: coors.y + halfSize }
                            ];
169 170
                if (CONTENTVIEW_GENERAL.sx > coors.x) {
                    if (CONTENTVIEW_GENERAL.sy > coors.y) {
171 172 173 174 175 176 177 178 179
                        context_draw.globalCompositeOperation = 'destination-out';
                        context_draw.moveTo(ptStart[1].x, ptStart[1].y);
                        context_draw.lineTo(ptStart[2].x, ptStart[2].y);
                        context_draw.lineTo(ptStart[3].x, ptStart[3].y);
                        context_draw.lineTo(ptEnd[3].x, ptEnd[3].y);
                        context_draw.lineTo(ptEnd[0].x, ptEnd[0].y);
                        context_draw.lineTo(ptEnd[1].x, ptEnd[1].y);
                        context_draw.lineJoin = 'bevel';
                        context_draw.lineCap = 'butt';
180
                        context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor;
Vo Duc Thang committed
181
                        context_draw.fill();                
182 183 184 185 186 187 188 189 190 191 192
                        context_draw.globalCompositeOperation = 'lighter';
                        context_draw.closePath();
                        context_draw.beginPath();
                        // 左上に描画する場合
                        context_draw.moveTo(ptStart[1].x, ptStart[1].y);
                        context_draw.lineTo(ptStart[2].x, ptStart[2].y);
                        context_draw.lineTo(ptStart[3].x, ptStart[3].y);
                        context_draw.lineTo(ptEnd[3].x, ptEnd[3].y);
                        context_draw.lineTo(ptEnd[0].x, ptEnd[0].y);
                        context_draw.lineTo(ptEnd[1].x, ptEnd[1].y);
                        context_draw.closePath();
193
                    } else if (CONTENTVIEW_GENERAL.sy < coors.y) {
194 195 196 197 198 199
                        context_draw.globalCompositeOperation = 'destination-out';
                        context_draw.moveTo(ptStart[0].x, ptStart[0].y);
                        context_draw.lineTo(ptStart[1].x, ptStart[1].y);
                        context_draw.lineTo(ptStart[2].x, ptStart[2].y);
                        context_draw.lineTo(ptEnd[2].x, ptEnd[2].y);
                        context_draw.lineTo(ptEnd[3].x, ptEnd[3].y);
Vo Duc Thang committed
200
                        context_draw.lineTo(ptEnd[0].x, ptEnd[0].y);    
201 202
                        context_draw.lineJoin = 'bevel';
                        context_draw.lineCap = 'butt';
203
                        context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor;
Vo Duc Thang committed
204
                        context_draw.fill();                
205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224
                        context_draw.globalCompositeOperation = 'lighter';
                        context_draw.closePath();
                        context_draw.beginPath();

                        // 左下に描画する場合
                        context_draw.moveTo(ptStart[0].x, ptStart[0].y);
                        context_draw.lineTo(ptStart[1].x, ptStart[1].y);
                        context_draw.lineTo(ptStart[2].x, ptStart[2].y);
                        context_draw.lineTo(ptEnd[2].x, ptEnd[2].y);
                        context_draw.lineTo(ptEnd[3].x, ptEnd[3].y);
                        context_draw.lineTo(ptEnd[0].x, ptEnd[0].y);
                        context_draw.closePath();
                    } else {
                        context_draw.globalCompositeOperation = 'destination-out';
                        context_draw.moveTo(ptStart[1].x, ptStart[1].y);
                        context_draw.lineTo(ptStart[2].x, ptStart[2].y);
                        context_draw.lineTo(ptEnd[3].x, ptEnd[3].y);
                        context_draw.lineTo(ptEnd[0].x, ptEnd[0].y);
                        context_draw.lineJoin = 'bevel';
                        context_draw.lineCap = 'butt';
225
                        context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor;
Vo Duc Thang committed
226
                        context_draw.fill();                
227 228 229 230 231 232 233 234 235 236 237
                        context_draw.globalCompositeOperation = 'lighter';
                        context_draw.closePath();
                        context_draw.beginPath();

                        // 左に描画する場合
                        context_draw.moveTo(ptStart[1].x, ptStart[1].y);
                        context_draw.lineTo(ptStart[2].x, ptStart[2].y);
                        context_draw.lineTo(ptEnd[3].x, ptEnd[3].y);
                        context_draw.lineTo(ptEnd[0].x, ptEnd[0].y);
                        context_draw.closePath();
                    }
238 239
                } else if (CONTENTVIEW_GENERAL.sx < coors.x) {
                    if (CONTENTVIEW_GENERAL.sy > coors.y) {
240 241 242 243 244 245 246 247 248
                        context_draw.globalCompositeOperation = 'destination-out';
                        context_draw.moveTo(ptStart[2].x, ptStart[2].y);
                        context_draw.lineTo(ptStart[3].x, ptStart[3].y);
                        context_draw.lineTo(ptStart[0].x, ptStart[0].y);
                        context_draw.lineTo(ptEnd[0].x, ptEnd[0].y);
                        context_draw.lineTo(ptEnd[1].x, ptEnd[1].y);
                        context_draw.lineTo(ptEnd[2].x, ptEnd[2].y);
                        context_draw.lineJoin = 'bevel';
                        context_draw.lineCap = 'butt';
249
                        context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor;
Vo Duc Thang committed
250 251
                        context_draw.fill();                
                        context_draw.globalCompositeOperation = 'lighter';                              
252 253 254 255 256 257 258 259 260 261 262
                        context_draw.closePath();
                        context_draw.beginPath();

                        // 右上に描画する場合
                        context_draw.moveTo(ptStart[2].x, ptStart[2].y);
                        context_draw.lineTo(ptStart[3].x, ptStart[3].y);
                        context_draw.lineTo(ptStart[0].x, ptStart[0].y);
                        context_draw.lineTo(ptEnd[0].x, ptEnd[0].y);
                        context_draw.lineTo(ptEnd[1].x, ptEnd[1].y);
                        context_draw.lineTo(ptEnd[2].x, ptEnd[2].y);
                        context_draw.closePath();
263
                    } else if (CONTENTVIEW_GENERAL.sy < coors.y) {
264 265 266 267 268 269 270 271 272
                        context_draw.globalCompositeOperation = 'destination-out';
                        context_draw.moveTo(ptStart[3].x, ptStart[3].y);
                        context_draw.lineTo(ptStart[0].x, ptStart[0].y);
                        context_draw.lineTo(ptStart[1].x, ptStart[1].y);
                        context_draw.lineTo(ptEnd[1].x, ptEnd[1].y);
                        context_draw.lineTo(ptEnd[2].x, ptEnd[2].y);
                        context_draw.lineTo(ptEnd[3].x, ptEnd[3].y);
                        context_draw.lineJoin = 'bevel';
                        context_draw.lineCap = 'butt';
273
                        context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor;
Vo Duc Thang committed
274
                        context_draw.fill();                
275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294
                        context_draw.globalCompositeOperation = 'lighter';
                        context_draw.closePath();
                        context_draw.beginPath();

                        // 右下に描画する場合
                        context_draw.moveTo(ptStart[3].x, ptStart[3].y);
                        context_draw.lineTo(ptStart[0].x, ptStart[0].y);
                        context_draw.lineTo(ptStart[1].x, ptStart[1].y);
                        context_draw.lineTo(ptEnd[1].x, ptEnd[1].y);
                        context_draw.lineTo(ptEnd[2].x, ptEnd[2].y);
                        context_draw.lineTo(ptEnd[3].x, ptEnd[3].y);
                        context_draw.closePath();
                    } else {
                        context_draw.globalCompositeOperation = 'destination-out';
                        context_draw.moveTo(ptStart[3].x, ptStart[3].y);
                        context_draw.lineTo(ptStart[0].x, ptStart[0].y);
                        context_draw.lineTo(ptEnd[1].x, ptEnd[1].y);
                        context_draw.lineTo(ptEnd[2].x, ptEnd[2].y);
                        context_draw.lineJoin = 'bevel';
                        context_draw.lineCap = 'butt';
295
                        context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor;
Vo Duc Thang committed
296
                        context_draw.fill();                
297 298 299 300 301 302 303 304 305 306 307 308
                        context_draw.globalCompositeOperation = 'lighter';
                        context_draw.closePath();
                        context_draw.beginPath();

                        // 右に描画する場合
                        context_draw.moveTo(ptStart[3].x, ptStart[3].y);
                        context_draw.lineTo(ptStart[0].x, ptStart[0].y);
                        context_draw.lineTo(ptEnd[1].x, ptEnd[1].y);
                        context_draw.lineTo(ptEnd[2].x, ptEnd[2].y);
                        context_draw.closePath();
                    }
                } else {
309
                    if (CONTENTVIEW_GENERAL.sy > coors.y) {
310 311 312 313 314 315 316
                        context_draw.globalCompositeOperation = 'destination-out';
                        context_draw.moveTo(ptStart[2].x, ptStart[2].y);
                        context_draw.lineTo(ptStart[3].x, ptStart[3].y);
                        context_draw.lineTo(ptEnd[0].x, ptEnd[0].y);
                        context_draw.lineTo(ptEnd[1].x, ptEnd[1].y);
                        context_draw.lineJoin = 'bevel';
                        context_draw.lineCap = 'butt';
317
                        context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor;
Vo Duc Thang committed
318
                        context_draw.fill();                
319 320 321 322 323 324 325 326 327 328
                        context_draw.globalCompositeOperation = 'lighter';
                        context_draw.closePath();
                        context_draw.beginPath();

                        // 上に描画する場合
                        context_draw.moveTo(ptStart[2].x, ptStart[2].y);
                        context_draw.lineTo(ptStart[3].x, ptStart[3].y);
                        context_draw.lineTo(ptEnd[0].x, ptEnd[0].y);
                        context_draw.lineTo(ptEnd[1].x, ptEnd[1].y);
                        context_draw.closePath();
329
                    } else if (CONTENTVIEW_GENERAL.sy < coors.y) {
330 331 332 333 334 335 336
                        context_draw.globalCompositeOperation = 'destination-out';
                        context_draw.moveTo(ptStart[0].x, ptStart[0].y);
                        context_draw.lineTo(ptStart[1].x, ptStart[1].y);
                        context_draw.lineTo(ptEnd[2].x, ptEnd[2].y);
                        context_draw.lineTo(ptEnd[3].x, ptEnd[3].y);
                        context_draw.lineJoin = 'bevel';
                        context_draw.lineCap = 'butt';
337
                        context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor;
Vo Duc Thang committed
338
                        context_draw.fill();                
339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356
                        context_draw.globalCompositeOperation = 'lighter';
                        context_draw.closePath();
                        context_draw.beginPath();

                        // 下に描画する場合
                        context_draw.moveTo(ptStart[0].x, ptStart[0].y);
                        context_draw.lineTo(ptStart[1].x, ptStart[1].y);
                        context_draw.lineTo(ptEnd[2].x, ptEnd[2].y);
                        context_draw.lineTo(ptEnd[3].x, ptEnd[3].y);
                        context_draw.closePath();
                    } else {
                        context_draw.globalCompositeOperation = 'destination-out';
                        context_draw.moveTo(ptStart[0].x, ptStart[0].y);
                        context_draw.lineTo(ptStart[1].x, ptStart[1].y);
                        context_draw.lineTo(ptStart[2].x, ptStart[2].y);
                        context_draw.lineTo(ptStart[3].x, ptStart[3].y);
                        context_draw.lineJoin = 'bevel';
                        context_draw.lineCap = 'butt';
357
                        context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor;
Vo Duc Thang committed
358
                        context_draw.fill();                
359 360 361 362 363 364 365 366 367 368 369 370 371 372 373
                        context_draw.globalCompositeOperation = 'lighter';
                        context_draw.closePath();
                        context_draw.beginPath();

                        // 移動なしの場合
                        context_draw.moveTo(ptStart[0].x, ptStart[0].y);
                        context_draw.lineTo(ptStart[1].x, ptStart[1].y);
                        context_draw.lineTo(ptStart[2].x, ptStart[2].y);
                        context_draw.lineTo(ptStart[3].x, ptStart[3].y);
                        context_draw.closePath();
                    }
                }
                context_draw.lineJoin = 'bevel';
                context_draw.lineCap = 'butt';
                context_draw.globalAlpha = 0.4;   // Opacity 20%
374
                context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor;
375 376 377 378 379 380 381 382 383 384 385 386
                context_draw.fill();

                context_draw.globalAlpha = 1;   // Opacity 100%
            }


            /*
            * 描画モードを戻す
            */
            context_draw.globalCompositeOperation = 'source-over';

            // 終点を保存
387 388
            CONTENTVIEW_GENERAL.sx = coors.x;
            CONTENTVIEW_GENERAL.sy = coors.y;
389 390 391 392
        
    }
};

393
CONTENTVIEW_PAINT.drawPoint = function(coors, context_draw) {
394
    /* set value sx,sy */
395 396
	CONTENTVIEW_GENERAL.sx = coors.x;
	CONTENTVIEW_GENERAL.sy = coors.y;
397

398
    if (CONTENTVIEW_GENERAL.isAddingMarking == true) {
399
        /* begin draw*/
400
    	CONTENTVIEW_GENERAL.isClearDrawing = false;
401

402
        if (CONTENTVIEW_GENERAL.markingType == 'eraser') {
403
            context_draw.globalCompositeOperation = 'destination-out';
404
            context_draw.lineWidth = CONTENTVIEW_GENERAL.eraseSize;
405 406 407 408 409 410
            context_draw.lineJoin = 'round';
            context_draw.lineCap = 'round';
            context_draw.lineTo(coors.x + 0.001, coors.y + 0.001);
            context_draw.stroke();
            context_draw.globalCompositeOperation = 'source-over';
        }
411
        else if (CONTENTVIEW_GENERAL.markingType == 'pen') {
412
            /* set flag */
413
        	CONTENTVIEW_GENERAL.isDrawing = true;
414 415

            context_draw.lineCap = "round";
416 417
            context_draw.lineWidth = CONTENTVIEW_GENERAL.penSize;
            context_draw.strokeStyle = "#" + CONTENTVIEW_GENERAL.penColor;
418 419 420
            context_draw.lineTo(coors.x + 0.001, coors.y + 0.001);
            context_draw.stroke();
        }
421
        else if (CONTENTVIEW_GENERAL.markingType == 'maker') {
422
            /* set flag */
423
        	CONTENTVIEW_GENERAL.isDrawing = true;
424 425

            context_draw.globalCompositeOperation = 'destination-out';
426 427
            context_draw.lineWidth = CONTENTVIEW_GENERAL.makerSize ;
            context_draw.lineHeight = CONTENTVIEW_GENERAL.makerSize;
Vo Duc Thang committed
428
            context_draw.lineTo(coors.x , coors.y + 0.001);     
429
            context_draw.lineCap = 'square';
430
            context_draw.strokeStyle = "#" + CONTENTVIEW_GENERAL.makerColor;
Vo Duc Thang committed
431
            context_draw.stroke();              
432 433 434
            context_draw.globalCompositeOperation = 'lighter';

            context_draw.lineCap = "square";
435 436
            context_draw.lineWidth = CONTENTVIEW_GENERAL.makerSize;
            context_draw.lineHeight = CONTENTVIEW_GENERAL.makerSize;
437
            context_draw.globalAlpha = 0.4;
438
            context_draw.strokeStyle = "#" + CONTENTVIEW_GENERAL.makerColor;
439 440 441 442 443 444 445
            context_draw.lineTo(coors.x, coors.y + 0.001);
            context_draw.stroke();
            context_draw.globalAlpha = 1;
        }

        
    }
446 447
};