/// コンテンツ閲覧画面_消しゴム書式オーバーレイ //名前空間用のオブジェクトを用意する var CONTENTVIEW_PAINT = {}; //未使用 // works out the X, Y position of the click inside the canvas from the X, Y position on the page CONTENTVIEW_PAINT.getPosition = function(mouseEvent, sigCanvas) { 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 }; }; CONTENTVIEW_PAINT.initializeCanvas = function(targetCanvas) { // 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 = { isDrawing: false, // 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; CONTENTVIEW_PAINT.drawPoint(coors, context); }, touchmove: function (coors) { if (this.isDrawing) { CONTENTVIEW_PAINT.drawMove(coors, context); } }, 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); } }; CONTENTVIEW_PAINT.drawMove = function(coors, context_draw) { if (CONTENTVIEW_GENERAL.isAddingMarking == true) { if (CONTENTVIEW_GENERAL.markingType == 'eraser') { //context.clearRect(coors.x, coors.y, ClientData.erase_size(), ClientData.erase_size()); context_draw.globalCompositeOperation = 'destination-out'; context_draw.lineWidth = CONTENTVIEW_GENERAL.eraseSize; context_draw.lineJoin = 'round'; context_draw.lineCap = 'round'; context_draw.lineTo(CONTENTVIEW_GENERAL.sx, CONTENTVIEW_GENERAL.sy); context_draw.stroke(); context_draw.globalCompositeOperation = 'source-over'; } else if (CONTENTVIEW_GENERAL.markingType == 'pen') { context_draw.lineCap = "round"; context_draw.lineJoin = "bevel"; context_draw.lineWidth = CONTENTVIEW_GENERAL.penSize; context_draw.strokeStyle = "#" + CONTENTVIEW_GENERAL.penColor; //context_draw.globalAlpha = 1; context_draw.lineTo(coors.x, coors.y); context_draw.stroke(); } else if (CONTENTVIEW_GENERAL.markingType == 'maker') { /*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';*/ //context_draw.globalCompositeOperation = 'destination-out' context_draw.beginPath(); var halfSize = CONTENTVIEW_GENERAL.makerSize / 2; var quotSize = CONTENTVIEW_GENERAL.makerSize / 4; var ptStart = [ { 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 } ]; var ptEnd = [ { 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 } ]; if (CONTENTVIEW_GENERAL.sx > coors.x) { if (CONTENTVIEW_GENERAL.sy > coors.y) { 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'; context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor; context_draw.fill(); 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(); } else if (CONTENTVIEW_GENERAL.sy < coors.y) { 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); context_draw.lineTo(ptEnd[0].x, ptEnd[0].y); context_draw.lineJoin = 'bevel'; context_draw.lineCap = 'butt'; context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor; context_draw.fill(); 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'; context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor; context_draw.fill(); 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(); } } else if (CONTENTVIEW_GENERAL.sx < coors.x) { if (CONTENTVIEW_GENERAL.sy > coors.y) { 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'; context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor; context_draw.fill(); 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(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(); } else if (CONTENTVIEW_GENERAL.sy < coors.y) { 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'; context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor; context_draw.fill(); 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'; context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor; context_draw.fill(); 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 { if (CONTENTVIEW_GENERAL.sy > coors.y) { 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'; context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor; context_draw.fill(); 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(); } else if (CONTENTVIEW_GENERAL.sy < coors.y) { 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'; context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor; context_draw.fill(); 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'; context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor; context_draw.fill(); 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% context_draw.fillStyle = "#" + CONTENTVIEW_GENERAL.makerColor; context_draw.fill(); context_draw.globalAlpha = 1; // Opacity 100% } /* * 描画モードを戻す */ context_draw.globalCompositeOperation = 'source-over'; // 終点を保存 CONTENTVIEW_GENERAL.sx = coors.x; CONTENTVIEW_GENERAL.sy = coors.y; } }; CONTENTVIEW_PAINT.drawPoint = function(coors, context_draw) { /* set value sx,sy */ CONTENTVIEW_GENERAL.sx = coors.x; CONTENTVIEW_GENERAL.sy = coors.y; if (CONTENTVIEW_GENERAL.isAddingMarking == true) { /* begin draw*/ CONTENTVIEW_GENERAL.isClearDrawing = false; if (CONTENTVIEW_GENERAL.markingType == 'eraser') { context_draw.globalCompositeOperation = 'destination-out'; context_draw.lineWidth = CONTENTVIEW_GENERAL.eraseSize; 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'; } else if (CONTENTVIEW_GENERAL.markingType == 'pen') { /* set flag */ CONTENTVIEW_GENERAL.isDrawing = true; context_draw.lineCap = "round"; context_draw.lineWidth = CONTENTVIEW_GENERAL.penSize; context_draw.strokeStyle = "#" + CONTENTVIEW_GENERAL.penColor; context_draw.lineTo(coors.x + 0.001, coors.y + 0.001); context_draw.stroke(); } else if (CONTENTVIEW_GENERAL.markingType == 'maker') { /* set flag */ CONTENTVIEW_GENERAL.isDrawing = true; context_draw.globalCompositeOperation = 'destination-out'; context_draw.lineWidth = CONTENTVIEW_GENERAL.makerSize ; context_draw.lineHeight = CONTENTVIEW_GENERAL.makerSize; context_draw.lineTo(coors.x , coors.y + 0.001); context_draw.lineCap = 'square'; context_draw.strokeStyle = "#" + CONTENTVIEW_GENERAL.makerColor; context_draw.stroke(); context_draw.globalCompositeOperation = 'lighter'; context_draw.lineCap = "square"; context_draw.lineWidth = CONTENTVIEW_GENERAL.makerSize; context_draw.lineHeight = CONTENTVIEW_GENERAL.makerSize; context_draw.globalAlpha = 0.4; context_draw.strokeStyle = "#" + CONTENTVIEW_GENERAL.makerColor; context_draw.lineTo(coors.x, coors.y + 0.001); context_draw.stroke(); context_draw.globalAlpha = 1; } } }; CONTENTVIEW_PAINT.ready = function(){ };