Skip to content

C
check
Commit 69c6ee16 by Masaru Abe
Options

タッチ対応のデバイスでプレビューするとJSエラーで表示されないバグ修正

parent f74b44e8
Showing with 453 additions and 3 deletions
abvw-preview/contentpreview.html
...@@ -40,6 +40,7 @@ ...@@ -40,6 +40,7 @@
<script src="js/contentview_CreateObjects.js" type="text/javascript"></script> <script src="js/contentview_CreateObjects.js" type="text/javascript"></script>
<script src="js/contentview_General.js" type="text/javascript"></script> <script src="js/contentview_General.js" type="text/javascript"></script>
<script src="js/contentview_initDefautValue.js" type="text/javascript"></script> <script src="js/contentview_initDefautValue.js" type="text/javascript"></script>
<script src="./js/contentview_Paint.js" type="text/javascript"></script>
<script src="./js/contentview.js"></script> <script src="./js/contentview.js"></script>
<script src="./js/contentview_PopupText.js"></script> <script src="./js/contentview_PopupText.js"></script>
<script src="./js/contentview_Anket.js"></script> <script src="./js/contentview_Anket.js"></script>
......
abvw-preview/js/contentview.js
...@@ -1099,9 +1099,8 @@ function changePage(page_index) { ...@@ -1099,9 +1099,8 @@ function changePage(page_index) {
function drawOnCanvas() { function drawOnCanvas() {
tool = new tool_drawing(); tool = new tool_drawing();
if (isTouchDevice() == true) { if (isTouchDevice() == true) {
initializeCanvas(document.getElementById('draw_canvas')); CONTENTVIEW_PAINT.initializeCanvas(document.getElementById('draw_canvas'));
CONTENTVIEW_PAINT.initializeCanvas(document.getElementById('marker_canvas'));
initializeCanvas(document.getElementById('marker_canvas'));
} }
else { else {
// Attach the mousedown, mousemove and mouseup event listeners. // Attach the mousedown, mousemove and mouseup event listeners.
......
abvw-preview/js/contentview_Paint.js 0 → 100644
/// コンテンツ閲覧画面_消しゴム書式オーバーレイ
//名前空間用のオブジェクトを用意する
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(){
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment