Javascript 单击并拖动以使用JS在html画布上绘制字符串。可以在桌面上工作,但不能在移动设备上工作。触摸开始/结束也不工作
下面的代码使用鼠标事件侦听器在画布上绘制字符串。 然而,我无法让它在手机上工作。我尝试了触摸开始/结束/移动,并检查了多个堆栈溢出问题的答案。非常感谢你的帮助 我知道我必须使用触摸事件,并防止自动“触摸时滚动”,以便用户能够绘制,但我猜我的代码中有一部分不允许触摸事件工作 我还读到“鼠标和触摸事件”不能同时触发,或者它们不能工作。我也不知道该怎么做。如果有人能找到解决办法,我将不胜感激Javascript 单击并拖动以使用JS在html画布上绘制字符串。可以在桌面上工作,但不能在移动设备上工作。触摸开始/结束也不工作,javascript,canvas,mouseevent,draw,touch-event,Javascript,Canvas,Mouseevent,Draw,Touch Event,下面的代码使用鼠标事件侦听器在画布上绘制字符串。 然而,我无法让它在手机上工作。我尝试了触摸开始/结束/移动,并检查了多个堆栈溢出问题的答案。非常感谢你的帮助 我知道我必须使用触摸事件,并防止自动“触摸时滚动”,以便用户能够绘制,但我猜我的代码中有一部分不允许触摸事件工作 我还读到“鼠标和触摸事件”不能同时触发,或者它们不能工作。我也不知道该怎么做。如果有人能找到解决办法,我将不胜感激 // Application variables var position = {x: 0, y: windo
// Application variables
var position = {x: 0, y: window.innerHeight/2};
var counter = 0;
var minFontSize = 3;
var angleDistortion = 0;
var letters = "Once upon a time, long, long ago a king and queen ruled over a distant land. The queen was kind and lovely and all the people of the realm adored her. The only sadness in the queen's life was that she wished for a child but did not have one. One winter day, the queen was doing needle work while gazing out her ebony window at the new fallen snow. A bird flew by the window startling the queen and she pricked her finger. A single drop of blood fell on the snow outside her window. As she looked at the blood on the snow she said to herself, 'Oh, how I wish that I had a daughter that had skin as white as snow, lips as red as blood, and hair as black as ebony.'";
// Drawing variables
var canvas;
var context;
var mouse = {x: 0, y: 0, down: false}
function init() {
canvas = document.getElementById( 'canvas' );
context = canvas.getContext( '2d' );
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.addEventListener('mousemove', mouseMove, false);
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mouseout', mouseUp, false);
canvas.addEventListener('dblclick', doubleClick, false);
window.onresize = function(event) {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
}
function mouseMove ( event ){
mouse.x = event.pageX;
mouse.y = event.pageY;
draw();
}
function draw() {
if ( mouse.down ) {
var d = distance( position, mouse );
var fontSize = minFontSize + d/2;
var letter = letters[counter];
var stepSize = textWidth( letter, fontSize );
if (d > stepSize) {
var angle = Math.atan2(mouse.y-position.y, mouse.x-position.x);
context.font = fontSize + "px Great Vibes";
context.save();
context.translate( position.x, position.y);
context.rotate( angle );
context.fillText(letter,0,0);
context.restore();
counter++;
if (counter > letters.length-1) {
counter = 0;
}
//console.log (position.x + Math.cos( angle ) * stepSize)
position.x = position.x + Math.cos(angle) * stepSize;
position.y = position.y + Math.sin(angle) * stepSize;
}
}
}
function distance( pt, pt2 ){
var xs = 0;
var ys = 0;
xs = pt2.x - pt.x;
xs = xs * xs;
ys = pt2.y - pt.y;
ys = ys * ys;
return Math.sqrt( xs + ys );
}
function mouseDown( event ){
mouse.down = true;
position.x = event.pageX;
position.y = event.pageY;
document.getElementById('info').style.display = 'none';
}
function mouseUp( event ){
mouse.down = false;
}
function doubleClick( event ) {
canvas.width = canvas.width;
}
function textWidth( string, size ) {
context.font = size + "px Great Vibes";
if ( context.fillText ) {
return context.measureText( string ).width;
} else if ( context.mozDrawText) {
return context.mozMeasureText( string );
}
};
init();