a lot of changes -> almost there but the drawing is not consistent yet across devices.
Drawing on the draw canvas is going OK but the preview is not drawing well now. Giving up for now.
This commit is contained in:
Adriaan Wormgoor
parent
c51107a275
commit
6e32a36e12
|
|
@ -60,7 +60,7 @@ body {
|
|||
border: 2px solid #333;
|
||||
}
|
||||
|
||||
.container {
|
||||
.uiButtonsContainer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
|
@ -68,31 +68,12 @@ body {
|
|||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/*margin: 0px auto;*/
|
||||
|
||||
/*position: fixed;*/
|
||||
/*top: 0px;*/
|
||||
/*left: 0px;*/
|
||||
/*width: 1024px;*/
|
||||
/*min-height: 500px;*/
|
||||
/*max-height: 768px;*/
|
||||
/*height: 100%;*/
|
||||
/* height: 768px;*/
|
||||
}
|
||||
|
||||
#drawAreaContainer {
|
||||
/*position: absolute;*/
|
||||
/*top: 193px;*/
|
||||
/*left: 193px;*/
|
||||
/*width: 650px;*/
|
||||
/*height: 450px;*/
|
||||
/*background-color: #fff;*/
|
||||
/*border: 4px solid #000;*/
|
||||
/*border-radius: 15px;*/
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
/*margin: -225px 0 0 -325px;*/
|
||||
background-color: #fff;
|
||||
width: 65%;
|
||||
min-width: 150px;
|
||||
|
|
@ -100,8 +81,8 @@ body {
|
|||
height: 60%;
|
||||
min-height: 150px;
|
||||
max-height: 450px;
|
||||
/*border: 4px solid #000;*/
|
||||
/*border-radius: 15px;*/
|
||||
border: 4px solid #000;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
#canvasContainers {
|
||||
|
|
@ -115,63 +96,36 @@ body {
|
|||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
/*border: 4px solid #000;*/
|
||||
/*border-radius: 15px;*/
|
||||
}
|
||||
|
||||
#mycanvasContainer {
|
||||
display:table-cell;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
/*border: 4px solid #000;*/
|
||||
}
|
||||
#previewContainer {
|
||||
display:table-cell;
|
||||
width: 150px;
|
||||
height: 100%;
|
||||
/*border: 4px solid #000;*/
|
||||
/*border-radius: 15px;*/
|
||||
}
|
||||
|
||||
/*#canvasContainers {*/
|
||||
/*position: absolute;*/
|
||||
/*top: 0;*/
|
||||
/*left: 0;*/
|
||||
/*right: 0;*/
|
||||
/*bottom: 0;*/
|
||||
/*width: 100%;*/
|
||||
/*background-color: #0e0;*/
|
||||
/*}*/
|
||||
|
||||
#mycanvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
/*float: left;*/
|
||||
border-width: 0px;
|
||||
background-color: #f0f;
|
||||
border-right: 2px solid #333;
|
||||
/*border-radius: 15px;*/
|
||||
/*border-radius: 15px;*/
|
||||
border-radius-topleft: 15px;
|
||||
/*border-radius-topright: 15px;*/
|
||||
-moz-border-radius-topleft: 15px;
|
||||
/*-moz-border-radius-topright: 15px;*/
|
||||
-webkit-border-radius-topleft: 15px;
|
||||
/*-webkit-border-radius-topright: 15px;*/
|
||||
}
|
||||
|
||||
#previewContainer {
|
||||
display:table-cell;
|
||||
width: 150px;
|
||||
height: 100%;
|
||||
}
|
||||
#preview {
|
||||
width: 150px;
|
||||
height: 100%;
|
||||
float: right;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-width: 0px;
|
||||
background-color: #0ff;
|
||||
}
|
||||
|
||||
/* DEBUG THING */
|
||||
#preview_tmp {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
<div class="agentInfo"></div>
|
||||
</div>
|
||||
<div id="landscape">
|
||||
<div class="container">
|
||||
<div class="uiButtonsContainer">
|
||||
<img class="bgTop" src="img/bg_top.png" />
|
||||
<img class="bgMiddle" src="img/bg_middle.png" />
|
||||
<img class="bgBottom" src="img/bg_bottom.png" />
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@ var lineweight = 2;
|
|||
function initDoodleDrawing() {
|
||||
console.log("f:initDoodleDrawing()");
|
||||
|
||||
//*
|
||||
//TODO make these jquery eventhandlers (works for all)
|
||||
if (!canvas.addEventListener) {
|
||||
canvas.attachEvent('onmousedown',onCanvasMouseDown);
|
||||
|
|
@ -57,14 +58,19 @@ function initDoodleDrawing() {
|
|||
canvas.addEventListener('touchstart',onCanvasTouchDown,false);
|
||||
canvas.addEventListener('touchmove',onCanvasTouchMove,false);
|
||||
canvas.addEventListener('touchend',onCanvasTouchEnd,false);
|
||||
document.body.addEventListener('touchmove',prevent,false);
|
||||
}
|
||||
//*/
|
||||
|
||||
drawCanvas = $("#drawAreaContainer");
|
||||
// drawCanvas = $("#mycanvasContainer"); // $("#drawAreaContainer")
|
||||
|
||||
console.log("drawCanvasTopLeftCoords: " + drawCanvasTopLeftCoords);
|
||||
drawCanvasTopLeftCoords[0] = drawCanvas.css("left").match(/[0-9]/g).join("");
|
||||
drawCanvasTopLeftCoords[1] = drawCanvas.css("top").match(/[0-9]/g).join("");
|
||||
// drawCanvasTopLeftCoords[0] = drawCanvas.css("left").match(/[0-9]/g).join("");
|
||||
// drawCanvasTopLeftCoords[1] = drawCanvas.css("top").match(/[0-9]/g).join("");
|
||||
drawCanvasTopLeftCoords[0] = drawCanvas.offset().left;
|
||||
drawCanvasTopLeftCoords[1] = drawCanvas.offset().top;
|
||||
// drawCanvasTopLeftCoords[0] = drawCanvas[0].offsetParent.offsetLeft;
|
||||
// drawCanvasTopLeftCoords[1] = drawCanvas[0].offsetParent.offsetTop;
|
||||
|
||||
console.log("f:initDoodleDrawing() >> canvasWidth: " + canvasWidth);
|
||||
console.log("f:initDoodleDrawing() >> canvasHeight: " + canvasHeight);
|
||||
|
|
@ -146,6 +152,8 @@ function clearDoodle() {
|
|||
doodleBounds = [-1, -1, -1, -1]; // left, top, right, bottom
|
||||
doodleTransform = [0, 0, 1.0, 1.0]; // [ x, y, scaleX, scaleY ]
|
||||
|
||||
dragging = false;
|
||||
|
||||
clearMainView();
|
||||
resetPreview();
|
||||
}
|
||||
|
|
@ -259,7 +267,7 @@ function onCanvasMouseDown(e) {
|
|||
// console.log("onmousedown >> e.layerX,e.layerY= " + e.layerX+","+e.layerY);
|
||||
// console.log("onmousedown >> e: " + e);
|
||||
// console.log(e);
|
||||
console.log("f:onCanvasMouseDown()");
|
||||
// console.log("f:onCanvasMouseDown()");
|
||||
dragging = true;
|
||||
|
||||
prevCountingTime = new Date().getTime();
|
||||
|
|
@ -288,7 +296,7 @@ function onCanvasMouseDown(e) {
|
|||
|
||||
var prevPoint = {x:-1, y:-1};
|
||||
function onCanvasMouseMove(e) {
|
||||
console.log("f:onCanvasMouseMove()");
|
||||
// console.log("f:onCanvasMouseMove()");
|
||||
if (!dragging) return;
|
||||
// console.log("onmousemove");
|
||||
|
||||
|
|
@ -349,7 +357,7 @@ prevUpdateFullPreview = 0; // 0 is not a timeframe but refers to the _points arr
|
|||
prevUpdateFullPreviewInterval = 25; // refers to number of points, not a timeframe
|
||||
|
||||
function onCanvasMouseUp(e) {
|
||||
console.log("f:onCanvasMouseUp()");
|
||||
// console.log("f:onCanvasMouseUp()");
|
||||
// console.log("onmouseup");
|
||||
dragging = false;
|
||||
console.log("doodleBounds: " + doodleBounds);
|
||||
|
|
@ -370,10 +378,13 @@ function onCanvasMouseUp(e) {
|
|||
|
||||
function onCanvasTouchDown(e) {
|
||||
e.preventDefault();
|
||||
console.log("f:onCanvasTouchDown >> e: " , e);
|
||||
// var x = e.touches[0].pageX - e.touches[0].target.offsetLeft;
|
||||
// var y = e.touches[0].pageY - e.touches[0].target.offsetTop;
|
||||
var x = e.touches[0].pageX - drawCanvasTopLeftCoords[0];
|
||||
var y = e.touches[0].pageY - drawCanvasTopLeftCoords[1];
|
||||
// var x = e.touches[0].pageX - drawCanvasTopLeftCoords[0];
|
||||
// var y = e.touches[0].pageY - drawCanvasTopLeftCoords[1];
|
||||
var x = e.touches[0].layerX;
|
||||
var y = e.touches[0].layerY;
|
||||
|
||||
_points.push([x, y, true]);
|
||||
adjustBounds(x, y);
|
||||
|
|
@ -387,10 +398,13 @@ function onCanvasTouchDown(e) {
|
|||
|
||||
function onCanvasTouchMove(e) {
|
||||
e.preventDefault();
|
||||
console.log("f:onCanvasTouchMove >> e: " , e);
|
||||
// var x = e.touches[0].pageX - e.touches[0].target.offsetLeft;
|
||||
// var y = e.touches[0].pageY - e.touches[0].target.offsetTop;
|
||||
var x = e.touches[0].pageX - drawCanvasTopLeftCoords[0];
|
||||
var y = e.touches[0].pageY - drawCanvasTopLeftCoords[1];
|
||||
// var x = e.touches[0].layerX;
|
||||
// var y = e.touches[0].layerY;
|
||||
|
||||
if (prevPoint.x != -1 || prevPoint.y != -1) {
|
||||
var dist = Math.sqrt(Math.pow((prevPoint.x - x), 2) + Math.pow((prevPoint.y - y), 2));
|
||||
|
|
|
|||
|
|
@ -1,131 +1,27 @@
|
|||
var imgDims = [320, 320]; // width and height of image
|
||||
|
||||
function doClientAndOrientationStuff() {
|
||||
console.log("f:doClientAndOrientationStuff()");
|
||||
|
||||
$(".agentInfo").text("");
|
||||
|
||||
/*
|
||||
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
|
||||
if (window.orientation == -90 || window.orientation == 90) {
|
||||
// landscape
|
||||
// $('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes');
|
||||
} else {
|
||||
// portrait
|
||||
$('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes');
|
||||
}
|
||||
}
|
||||
return;
|
||||
//*/
|
||||
|
||||
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
|
||||
console.log("PHONE OR TABLET! --> window.orientation = " + window.orientation);
|
||||
if (window.orientation == -90 || window.orientation == 90) {
|
||||
console.log(" landscape");
|
||||
// landscape
|
||||
|
||||
// var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width; //get proper width
|
||||
var ww = 0; //get proper width
|
||||
if (window.innerWidth) {
|
||||
ww = window.innerWidth;
|
||||
// if (window.screen.availWidth) {
|
||||
// ww = window.screen.availWidth;
|
||||
|
||||
// if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
|
||||
// ww = window.innerWidth;
|
||||
// }
|
||||
} else if($(window).width()) {
|
||||
ww = $(window).width();
|
||||
} else {
|
||||
|
||||
}
|
||||
|
||||
// ww = 480;
|
||||
|
||||
var mw = imgDims[0]; // min width of site
|
||||
//*
|
||||
if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
|
||||
var mw = imgDims[1]; // in landscape: min-width is image width
|
||||
}
|
||||
//*/
|
||||
var ratio = ww / mw; //calculate ratio
|
||||
$('#Viewport').attr('content', 'initial-scale='+ratio+',maximum-scale='+ratio+',minimum-scale='+ratio+',user-scalable=no,width='+mw);
|
||||
if( ww < mw){ //smaller than minimum size
|
||||
// $(".colmask").css("background-color", "#ff0");
|
||||
// $('#Viewport').attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + ww);
|
||||
// $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
|
||||
}else{ //regular size
|
||||
// $(".colmask").css("background-color", "#0ff");
|
||||
// $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
|
||||
}
|
||||
|
||||
console.log(" ww: " + ww + ", mw: " + mw + ", ratio: " + ratio);
|
||||
|
||||
$(".agentInfo").append("ww: " + ww + ", mw: " + mw + "<br/>");
|
||||
$(".agentInfo").append("ratio: " + ratio + "<br/>");
|
||||
$(".agentInfo").append("<br/>");
|
||||
} else {
|
||||
console.log(" portrait");
|
||||
// portrait
|
||||
// $('#Viewport').attr('content', 'initial-scale='+1+',maximum-scale='+1+',minimum-scale='+1+',user-scalable=no');
|
||||
$('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no');
|
||||
}
|
||||
|
||||
} else {
|
||||
// console.log("else");
|
||||
$(".colmask").css("background-color", "#f80");
|
||||
|
||||
}
|
||||
|
||||
|
||||
$(".agentInfo").append("$(window).width(): " + $(window).width() + "<br/>");
|
||||
$(".agentInfo").append("window.screen.width: " + window.screen.width+ "<br/>");
|
||||
$(".agentInfo").append("window.screen.availWidth: " + window.screen.availWidth+ "<br/>");
|
||||
$(".agentInfo").append("<br/>");
|
||||
$(".agentInfo").append("window.innerWidth: " + window.innerWidth + "<br/>");
|
||||
$(".agentInfo").append("window.innerHeight: " + window.innerHeight + "<br/>");
|
||||
$(".agentInfo").append("<br/>");
|
||||
$(".agentInfo").append("$(window).height(): " + $(window).height() + "<br/>");
|
||||
$(".agentInfo").append("window.screen.height: " + window.screen.height+ "<br/>");
|
||||
$(".agentInfo").append("window.screen.availHeight: " + window.screen.availHeight+ "<br/>");
|
||||
$(".agentInfo").append("<br/>");
|
||||
$(".agentInfo").append("user agent: " + navigator.userAgent + "<br/>");
|
||||
};
|
||||
|
||||
function doOnOrientationChange() {
|
||||
console.log("doOnOrientationChange");
|
||||
doClientAndOrientationStuff();
|
||||
|
||||
// switch(window.orientation) {
|
||||
// case -90:
|
||||
// case 90:
|
||||
// alert('landscape');
|
||||
// break;
|
||||
// default:
|
||||
// alert('portrait');
|
||||
// break;
|
||||
// }
|
||||
}
|
||||
|
||||
var drawAreaContainerMinHeight = 300;
|
||||
var drawAreaContainerMaxHeight = 450;
|
||||
function doOnResize() {
|
||||
// console.log("doOnResize() >> " + new Date().getTime());
|
||||
// $(".container").css("height", window.innerHeight);
|
||||
|
||||
// code from new layouting approach... //TODO give this a more logical spot
|
||||
$drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2);
|
||||
canvas.width = canvas.clientWidth;
|
||||
canvas.height = canvas.clientHeight;
|
||||
// $("#drawAreaContainer").attr("width", parseInt($("#drawAreaContainer").css("width"), 10));
|
||||
// $("#drawAreaContainer").attr("height", parseInt($("#drawAreaContainer").css("height"), 10));
|
||||
// canvas.width = parseInt($canvas.css("width"), 10);
|
||||
// canvas.height = parseInt($canvas.css("height"), 10);
|
||||
$drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height")) * 0.45);
|
||||
|
||||
canvas.width = $drawAreaContainer.width() - 150; // canvas.clientWidth;
|
||||
canvas.height = $drawAreaContainer.height(); // canvas.clientHeight;
|
||||
|
||||
preview.width = 150;
|
||||
preview.height = $drawAreaContainer.height();
|
||||
// preview.width = parseInt($preview.css("width"), 10);
|
||||
// preview.height = parseInt($preview.css("height"), 10);
|
||||
|
||||
canvasWidth = canvas.width;
|
||||
canvasHeight = canvas.height;
|
||||
|
||||
drawCanvasTopLeftCoords[0] = drawCanvas.offset().left;
|
||||
drawCanvasTopLeftCoords[1] = drawCanvas.offset().top;
|
||||
// drawCanvasTopLeftCoords[0] = drawCanvas[0].offsetParent.offsetLeft;
|
||||
// drawCanvasTopLeftCoords[1] = drawCanvas[0].offsetParent.offsetTop;
|
||||
|
||||
redrawDoodle();
|
||||
redrawPreview();
|
||||
|
||||
|
|
@ -167,49 +63,24 @@ function initLayouting() {
|
|||
<!--canvas mycanvas 500, 450-->
|
||||
<!--canvas preview 150, 450-->
|
||||
|
||||
$drawAreaContainer = $("#drawAreaContainer");
|
||||
// $doodleCanvas = $("#mycanvas");
|
||||
// doodleCanvas = $("#mycanvas")[0];
|
||||
// doodleCanvasContext = doodleCanvas.getContext('2d');
|
||||
|
||||
$drawAreaContainer = $("#drawAreaContainer");
|
||||
$drawAreaContainer.css("margin", 0);
|
||||
$drawAreaContainer.css("marginLeft", -parseInt($drawAreaContainer.css("width"))/2);
|
||||
$drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2);
|
||||
$drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height")) * 0.45);
|
||||
|
||||
canvas.width = canvas.clientWidth;
|
||||
canvas.height = canvas.clientHeight;
|
||||
canvas.width = $drawAreaContainer.width() - 150; // canvas.clientWidth;
|
||||
canvas.height = $drawAreaContainer.height(); // canvas.clientHeight;
|
||||
|
||||
preview.width = 150;
|
||||
preview.height = $drawAreaContainer.height();
|
||||
|
||||
// code from new layouting approach... //TODO give this a more logical spot
|
||||
// $("#drawAreaContainer").attr("width", parseInt($("#drawAreaContainer").css("width"), 10));
|
||||
// $("#drawAreaContainer").attr("height", parseInt($("#drawAreaContainer").css("height"), 10));
|
||||
// canvas.width = parseInt($canvas.css("width"), 10);
|
||||
// canvas.height = parseInt($canvas.css("height"), 10);
|
||||
// preview.width = parseInt($preview.css("width"), 10);
|
||||
// preview.height = parseInt($preview.css("height"), 10);
|
||||
canvasWidth = canvas.width;
|
||||
canvasHeight = canvas.height;
|
||||
|
||||
// console.log("f:initLayouting() >> canvas height: " + canvas.height);
|
||||
|
||||
|
||||
|
||||
// imgDims[0] = parseInt($(".container").css("width").match(/[0-9]+/).join(""));
|
||||
// imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join(""));
|
||||
|
||||
// imgDims = [1024, 768];
|
||||
|
||||
/*
|
||||
if( /Android|webOS|BlackBerry/i.test(navigator.userAgent) ) {
|
||||
imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join(""));
|
||||
} else if ( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
|
||||
imgDims[1] = parseInt($(".container").css("width").match(/[0-9]+/).join(""));
|
||||
} else {
|
||||
imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join(""));
|
||||
}
|
||||
//*/
|
||||
|
||||
// $(".container").css("height", window.innerHeight);
|
||||
|
||||
// window.innerHeight
|
||||
console.log("window.innerHeight: " + window.innerHeight);
|
||||
console.log("window.innerWidth: " + window.innerWidth);
|
||||
|
|
@ -233,14 +104,6 @@ function _startOrientationAndChangeEventListening() {
|
|||
|
||||
$(window).on('resize', doOnResize);
|
||||
|
||||
// if (!window.addEventListener) {
|
||||
// window.attachEvent('orientationchange', doOnOrientationChange, false);
|
||||
// window.attachEvent('resize', doOnResize, false);
|
||||
// } else {
|
||||
// window.addEventListener('orientationchange', doOnOrientationChange, false);
|
||||
// window.addEventListener('resize', doOnResize, false);
|
||||
// }
|
||||
|
||||
// is it necessary to call these? Aren't they called by the above eventhandlers?
|
||||
// doClientAndOrientationStuff();
|
||||
doOnResize();
|
||||
|
|
|
|||
Loading…
Reference in New Issue