3

Me parece que debería incluirse en la orientación de uso de la etiqueta javascript la sugerencia de preferir stacksnippet en lugar de otras herramientas externas como jsfiddle. En particular me gustaría conocer el punto de vista de quienes tienen mayor participación en esa etiqueta antes de proponer hacer la sugerencia directamente.

Actualmente el wiki de javascript al final incluye una sección de herramientas para probar código en línea. Ni en esta sección, ni en las previas se menciona stacksnippet. Si bien los mensajes de error de stacknippet podrían mejorarse, este ofrece varias ventajas como

  1. No es necesario abrir otra página para probar el código
  2. La integración es predeterminada, se evita el tener que actualizar el código en dos partes.
  3. Al responder, se facilita la escritura de código en particular si sólo hay que hacer modificaciones sencillas.
1
  • 1
    Aunque no participo en esa etiqueta me parece muy buena idea. Pero tendría cuidado con la forma de redactarlo. stacksnippet es preferible para mostrar código ejecutando en una respuesta de SO, al menos como lector lo prefiero. Pero no creo que un desarrollador lo prefiera como herramienta externa para un uso que no sea una respuesta de SO. el 3 may. 2017 a las 8:22

1 respuesta 1

4

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

// Application
var position = {
  x: 0,
  y: window.innerHeight / 2
};
var counter = 0;
var minFontSize = 8;
var angleDistortion = 0;
var letters = atob("U+0sIHBvciBzdXB1ZXN0byAg");

// Drawing
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 Georgia";

      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;
      }

      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 Georgia";

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

};

init();
html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  overflow: hidden;
  &:hover {
    span {
      display: none;
    }
  }
}

canvas {
  cursor: crosshair;
}

span {
  font-family: 'Georgia', cursive;
  font-size: 40px;
  position: fixed;
  top: 50%;
  left: 50%;
  color: #000;
  margin-top: -40px;
  margin-left: -200px;
}
<canvas id='canvas'></canvas>
<span id='info'>Click + arrastrar<br>para ver la respuesta.<span>

1
  • 1
    ¡Vaya! pero creo que jsfiddle también debería ser mencionado, De pronto, no todos los usuarios están familiarizado con las herramientas de SOes. el 3 may. 2017 a las 16:20

Debes iniciar sesión para responder a esta pregunta.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta .