Question

我正在尝试实施 this neat animation ：

// Drawing with text. Ported from Generative Design book - http://www.generative-gestaltung.de - Original licence: http://www.apache.org/licenses/LICENSE-2.0

// Application variables
var position = {x: 0, y: window.innerHeight/2};
var counter = 0;
var minFontSize = 14;
var angleDistortion = 0;
var letters = "En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que viv\xEDa un hidalgo de los de lanza en astillero, adarga antigua, roc\xEDn flaco y galgo corredor. Una olla de algo m\xE1s vaca que carnero, salpic\xF3n las m\xE1s noches, duelos y quebrantos los s\xE1bados, lentejas los viernes, alg\xFAn palomino de a\xF1adidura los domingos, consum\xEDan las tres partes de su hacienda.";

// 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/1;
    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 garamond-premier-pro";

      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 garamond-premier-pro";

  if ( context.fillText ) {
    return context.measureText( string ).width;
  } else if ( context.mozDrawText) {
    return context.mozMeasureText( string );
  }

 };

init();

但是，不是让用户单击并拖动来在画布上绘制内容，如果可以通过自动创建带文本的随机行，甚至更好，只需在画布上移动鼠标就可以实现（实际上没有实际情况）单击以生成文本动画路径）。触摸/移动友好解决方案也是首选。

非常感谢任何帮助。非常感谢！

Answer 1

首先你需要使用不同的事件，我认为这可以解决问题。

使用＆＃34; mouseover＆＃34;事件而不是＆＃34; mousedown＆＃34;事件。（我希望它也有pageX / Y信息）

您还可以使用特殊的触摸事件。 http://www.mediaevent.de/javascript/touch-events.html

Answer 2

以下是修改后的代码，用于mousemove或touchmove，无需mousedown初始化绘图：http://jsfiddle.net/m1erickson/B2j5P/

修改很简单：

// add a touchmove event listener and point it toward the handleMove event handler

canvas.addEventListener("touchmove", handleMove, false);

// set the initial state of mouse.down to true instead of false

var mouse = {x: 0, y: 0, down:true}

// disable (or remove) resetting mouse.down to false in the mouseup event handler

function mouseUp( event ){
//    mouse.down = false;
}

在画布上用文本绘图

2 个答案: