Arrastrar estrellas

Esta es una continuación de Arrastrar y soltar

A continuación haremos lo mismo, pero esta vez vamos a dibujar y arrastrar varias estrellas.
Cada estrella será definida por sus coordenadas: las coordenadas X e Y del centro de la estrella y el radio R. También especificaremos el color de cada estrella y una propiedad más: bool que es un booleano que nos permite identificar la estrella que movemos (bool = true) de las demás estrellas (bool = false)

Con las coordinadas y demás características de cada estrella vamos a construir un objeto, y vamos a almacenar todos estos objetos en un array de estrellas (estrellasRy)
Vamos a ordenar este array con sort() por el tamaño del radio (R) de cada estrella.


var estrellasRy = [
		{'X':250, 'Y':210,'R':100,'color':'#6ab150', 'bool':false},
		{'X':350, 'Y':130,'R':75,'color':'#ff8844', 'bool':false},
		{'X':150, 'Y':100,'R':50,'color':'#abcdef', 'bool':false}
];

Para que sea evidente que pasa con una estrella cuando acaba debajo de otra más grande, todos los trazados del <canvas> tienen una opacidad de 85% (ctx.globalAlpha=0.85).

Redibujar todas las estrellas

Habrá que tener en cuenta que después de limpiar el <canvas> con clearRect(), tenemos que redibujar todas las estrellas del "firmamento". Por lo tanto tenemos que escribir una función dibujarEstrellas() que haga exactamente esto: redibujar todas las estrellas.


function dibujarLasEstrellas(){
		for( var i = 0; i< estrellasRy.length; i++)	{
		dibujarUnaEstrella(estrellasRy[i].R, estrellasRy[i].color, estrellasRy[i].X,estrellasRy[i].Y);
		}	
}

Poniendolo todo junto


var canvas = document.getElementById('lienzo');
if (canvas && canvas.getContext) {
  var ctx = canvas.getContext('2d');
  if (ctx) {
    // opacidad 85%
    ctx.globalAlpha = 0.85;
    var arrastrar = false;
    var delta = new Object();

    function oMousePos(canvas, evt) {
      var rect = canvas.getBoundingClientRect();
      return { // devuelve un objeto
        x: Math.round(evt.clientX - rect.left),
        y: Math.round(evt.clientY - rect.top)
      }
    }

    function dibujarUnaEstrella(R, color, X, Y) {
      var L = 5;
      var paso = 2;
      ctx.fillStyle = color;
      var estrella = L / paso
      var rad = (2 * Math.PI) / estrella;
      ctx.beginPath();
      for (var i = 0; i < L; i++) {
        x = X + R * Math.cos(rad * i);
        y = Y + R * Math.sin(rad * i);
        ctx.lineTo(x, y);
      }
      ctx.closePath();
      ctx.fill();
    }

    function dibujarLasEstrellas() {
      for (var i = 0; i < estrellasRy.length; i++) {
        dibujarUnaEstrella(estrellasRy[i].R, estrellasRy[i].color, estrellasRy[i].X, estrellasRy[i].Y);
      }
    }

    var estrellasRy = [{
      'X': 250,
      'Y': 210,
      'R': 100,
      'color': '#6ab150',
      'bool': false
    }, {
      'X': 350,
      'Y': 130,
      'R': 75,
      'color': '#ff8844',
      'bool': false
    }, {
      'X': 150,
      'Y': 100,
      'R': 50,
      'color': '#abcdef',
      'bool': false
    }];

    estrellasRy.sort(function(a, b) {
        return a.R - b.R
      })
      //console.log(estrellasRy);

    dibujarLasEstrellas();

    // mousedown ***************************
    canvas.addEventListener('mousedown', function(evt) {
      arrastrar = true;
      //var first = 0;	
      var mousePos = oMousePos(canvas, evt);
      for (var i = 0; i < estrellasRy.length; i++) {
        dibujarUnaEstrella(estrellasRy[i].R, estrellasRy[i].color, estrellasRy[i].X, estrellasRy[i].Y);

        if (ctx.isPointInPath(mousePos.x, mousePos.y)) {
          estrellasRy[i].bool = true;
          delta.x = estrellasRy[i].X - mousePos.x;
          delta.y = estrellasRy[i].Y - mousePos.y;
          break;
        } else {
          estrellasRy[i].bool = false;
        }
      }
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      dibujarLasEstrellas();
    }, false);

    // mousemove ***************************
    canvas.addEventListener('mousemove', function(evt) {
      if (arrastrar) {
        var mousePos = oMousePos(canvas, evt);
        for (var i = 0; i < estrellasRy.length; i++) {
          if (estrellasRy[i].bool) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            X = mousePos.x + delta.x, Y = mousePos.y + delta.y
            estrellasRy[i].X = X;
            estrellasRy[i].Y = Y;
            break;
          }
        }
        dibujarLasEstrellas();
      }
    }, false);

    // mouseup ***************************
    canvas.addEventListener('mouseup', function(evt) {
      arrastrar = false;
      for (var i = 0; i < estrellasRy.length; i++) {
        estrellasRy[i].bool = false
      }
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      dibujarLasEstrellas();
    }, false);

    // mouseout  ***************************
    canvas.addEventListener('mouseout', function(evt) {
      arrastrar = false;
      for (var i = 0; i < estrellasRy.length; i++) {
        estrellasRy[i].bool = false
      }
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      dibujarLasEstrellas();
    }, false);
  }
}

A continuación haremos lo mismo, pero esta vez vamos a dibujar y arrastrar varias tipos de polígonos. Continúa leyendo...

w3.unpo<code>todo