2012-10-09 12 views
2

webview (titanium mobile)에서 사용하는 캔버스 요소가 있습니다. 간단한 이벤트 처리기에 문제가 있습니다. 캔버스를 터치하여 선을 그릴 때 선은 약 1 초의 드로잉 이후에 캔버스의 중심점으로 점프 한 다음 올바르게 작동합니다. 터치를 약 1 초간 누르고 있으면 그다음 멋지게 그려주세요 ...? 나는 당황 스럽다. 누군가 나를 알아낼 수있게 도와 줄 수 있을까? 사용중인 코드는 다음과 같습니다.이 리소스를 온라인에서 찾은 다음 수정했습니다.touch html 5 캔버스 문제

// Keep everything in anonymous function, called on window load. 
if(window.addEventListener) { 
window.addEventListener('load', function() { 
var canvas, context, canvaso, contexto; 

// The active tool instance. 
var tool; 



var tool_default = 'bluepen'; 

function init() { 
// Find the canvas element. 
canvaso = document.getElementById('markup'); 
if (!canvaso) { 
    alert('Error: I cannot find the canvas element!'); 
    return; 
} 

if (!canvaso.getContext) { 
    alert('Error: no canvas.getContext!'); 
    return; 
} 

// Get the 2D canvas context. 
contexto = canvaso.getContext('2d'); 
if (!contexto) { 
    alert('Error: failed to getContext!'); 
    return; 
} 

// Add the temporary canvas. 
var container = canvaso.parentNode; 
canvas = document.createElement('canvas'); 
if (!canvas) { 
    alert('Error: I cannot create a new canvas element!'); 
    return; 
} 

canvas.id  = 'markupTemp'; 
canvas.width = canvaso.width; 
canvas.height = canvaso.height; 
canvas.display = 'none'; 
container.appendChild(canvas); 

context = canvas.getContext('2d'); 

// Get the tool select input. 
var tool_select = document.getElementById('dtool'); 
if (!tool_select) { 
    alert('Error: failed to get the dtool element!'); 
    return; 
} 
tool_select.addEventListener('change', ev_tool_change, false); 






// Activate the default tool. 
if (tools[tool_default]) { 
    tool = new tools[tool_default](); 
    tool_select.value = tool_default; 
} 

// Attach the mousedown, mousemove and mouseup event listeners. 
    canvas.addEventListener('mousedown', ev_canvas, false); 
    canvas.addEventListener('mousemove', ev_canvas, false); 
    canvas.addEventListener('mouseup', ev_canvas, false); 
canvas.addEventListener('touchstart', ev_canvas, false); 
canvas.addEventListener('touchmove', ev_canvas, false); 
canvas.addEventListener('touchend', ev_canvas, false); 
    } 


function settool(t){ 

tool = this; 

}; 


    // The general-purpose event handler. This function just determines the mouse 
    // position relative to the canvas element. 
    function ev_canvas (ev) { 
    ev.preventDefault(); 

    ev._x = ev.layerX; 
    ev._y = ev.layerY; 

// Call the event handler of the tool. 
var func = tool[ev.type]; 
if (func) { 
    func(ev); 
} 
} 

    // The event handler for any changes made to the tool selector. 
    function ev_tool_change (ev) { 
if (tools[this.value]) { 
    tool = new tools[this.value](); 
} 
} 

// This function draws the #imageTemp canvas on top of #markup, after which 
// #imageTemp is cleared. This function is called each time when the user 
// completes a drawing operation. 
function img_update() { 
    contexto.drawImage(canvas, 0, 0); 
    context.clearRect(0, 0, canvas.width, canvas.height); 
} 

// This object holds the implementation of each drawing tool. 
var tools = {}; 

    // The drawing pencil. 
tools.bluepen = function() { 
var tool = this; 
this.started = false; 

// This is called when you start holding down the mouse button. 
// This starts the pencil drawing. 
this.mousedown = function (ev) { 
    ev.preventDefault(); 
    context.beginPath(); 
    context.moveTo(ev._x, ev._y); 
    tool.started = true; 
}; 


// This function is called every time you move the mouse. Obviously, it only 
// draws if the tool.started state is set to true (when you are holding down 
// the mouse button). 
this.mousemove = function (ev) { 
    if (tool.started) { 
     ev.preventDefault(); 
    context.lineTo(ev._x, ev._y); 
     context.lineJoin = "round"; 
    context.lineWidth = 1; 
    context.strokeStyle = '#2e3092'; 
    context.stroke(); 
    } 
}; 

// This is called when you release the mouse button. 
this.mouseup = function (ev) { 
    if (tool.started) { 
     ev.preventDefault(); 
    tool.mousemove(ev); 
    tool.started = false; 
    img_update(); 
    } 
}; 

}; 

// The red Pen. 
tools.redpen = function() { 
var tool = this; 
this.started = false; 

// This is called when you start holding down the mouse button. 
// This starts the pencil drawing. 
this.mousedown = function (ev) { 
    context.beginPath(); 
    context.moveTo(ev._x, ev._y); 
    tool.started = true; 
}; 

// This function is called every time you move the mouse. Obviously, it only 
// draws if the tool.started state is set to true (when you are holding down 
// the mouse button). 
this.mousemove = function (ev) { 
    if (tool.started) { 
    context.lineTo(ev._x, ev._y); 
     context.lineJoin = "round"; 
    context.lineWidth = 1; 
    context.strokeStyle = '#ed1c24'; 
    context.stroke(); 
    } 
}; 

// This is called when you release the mouse button. 
this.mouseup = function (ev) { 
    if (tool.started) { 
    tool.mousemove(ev); 
    tool.started = false; 
    img_update(); 
    } 
}; 
}; 



// The Highlighter 
tools.highlighter = function() { 
var tool = this; 
this.started = false; 

// This is called when you start holding down the mouse button. 
// This starts the pencil drawing. 
this.mousedown = function (ev) { 
    context.beginPath(); 
    context.moveTo(ev._x, ev._y); 
    tool.started = true; 
}; 

// This function is called every time you move the mouse. Obviously, it only 
// draws if the tool.started state is set to true (when you are holding down 
// the mouse button). 
this.mousemove = function (ev) { 
    if (tool.started) { 
    context.lineTo(ev._x, ev._y); 
    context.lineJoin = "round"; 
    context.lineWidth = 20; 
    context.strokeStyle = '#f9e100'; 
    context.stroke(); 

    } 
}; 

// This is called when you release the mouse button. 
this.mouseup = function (ev) { 
    if (tool.started) { 
    tool.mousemove(ev); 
    tool.started = false; 
    img_update(); 
    } 
}; 
}; 

// The Eraser 
tools.eraser = function() { 
var tool = this; 
this.started = false; 

// This is called when you start holding down the mouse button. 
// This starts the pencil drawing. 
this.mousedown = function (ev) { 
    context.beginPath(); 
    context.moveTo(ev._x, ev._y); 
    tool.started = true; 
}; 

// This function is called every time you move the mouse. Obviously, it only 
// draws if the tool.started state is set to true (when you are holding down 
// the mouse button). 
this.mousemove = function (ev) { 
    if (tool.started) { 
    context.lineTo(ev._x, ev._y); 
    context.lineJoin = "round"; 
    context.lineWidth = 40; 
    context.strokeStyle = '#fff'; 

    context.stroke(); 

    } 
    }; 

    // This is called when you release the mouse button. 
    this.mouseup = function (ev) { 
    if (tool.started) { 
    tool.mousemove(ev); 
    tool.started = false; 
    img_update(); 
    } 
}; 
}; 




init(); 

}, false); } 
+0

도움이 될 것입니다. – jlukin

답변

1

저는 Acer ICS 태블릿의 재고 안드로이드 브라우저에서이 정확한 문제를 겪었습니다 (실제로 귀하의 질문을 발견 한 방법입니다). 나는 iPad의 사파리 나 진저 브레드 폰의 주식 브라우저에서이 문제를 복제 할 수 없었다. 나는 그것이 브라우저 버그인지 또는 무엇인지 모르지만, 나는 당신을 도울 수있는 해결 방법을 kluge 할 수 있었다.

var tool; 
var touchflag = false; //Add this property 
... 
... 
function ev_canvas (ev) { 
    ev.preventDefault(); 

    //Two new lines here 
    if (ev.type == 'touchstart') this.touchflag = true; 
    if (ev.type == 'touchend') this.touchflag = false; 

    ev._x = ev.layerX; 
    ev._y = ev.layerY; 
    ... 
} 

... 
... 
this.mousemove = function (ev) { 
    // if (tool.started) { //Change this 
    if (tool.started && !touchflag) { // to this 
     ev.preventDefault(); 
     context.lineTo(ev._x, ev._y); 
    ... 
    } 
}; 

klugy, ham-fisted 및 inelegant이지만, 저에게는 효과적입니다. 잘하면 그것은 당신을 도와줍니다.

관련 문제