javascript - whether - stroke width canvas

html5 canvas strokeStyle?

Question

Intento mapear una imagen en una cuadrícula "3d" que simula una tela usando strokeStyle y canvas, tengo la imagen incluida pero actualmente está actuando como una imagen de fondo y no fluyendo realmente con la "tela" como son las ondulaciones, es decir, el la imagen es estática a medida que fluye la red. aquí está el jsfiddle que se explica por sí mismo (solo funciona en Chrome). Cualquier ayuda es muy apreciada. aquí está el javascript que representa la imagen en segundo plano, ¿Cómo detengo el renderizado como imagen de fondo y solo llego a llenar la cuadrícula ?:

function update() {

    var img = new Image();
    img.src = ''http://free-textures.got3d.com/architectural/free-stone-wall-   textures/images/free-stone-wall-texture-002.jpg'';
    img.onload = function() {

        // create pattern
        var ptrn = ctx.createPattern(img, ''repeat'');

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        physics.update();

        ctx.strokeStyle = ptrn;
        ctx.beginPath();
        var i = points.length;
        while (i--) points[i].draw();
        ctx.stroke();

        requestAnimFrame(update);
    }
}

El suyo es el codepen original del que estoy trabajando. ` jsfiddle actualizado con imagen fuera de la función de actualización (): actualmente parece llenar las células y aplicarlas como imagen de fondo. ¿Hay alguna forma de evitar que se convierta en una imagen de fondo y solo aplicarla para llenar la cuadrícula? He intentado esto:
ctx.fillStyle = ptrn; y eliminar la línea 260:
ctx.strokeStyle = ptrn; pero parece eliminar la imagen de fondo simplemente mostrándola como una cuadrícula negra ... gracias de nuevo por la paciencia

Answer 1

¡Oh mi! Gran pregunta!

Entonces, veamos qué tenemos. Un sistema que tiene un montón de "restricciones", que son conjuntos de 2 puntos. Las contraints mismas vienen en pares, y forman dos líneas, formando una ┘ (la parte inferior derecha de una caja).

Si tuviéramos que dibujar cada línea de restricción individualmente, veríamos esto:

Eso es todas las líneas rojas horizontales y líneas azules verticales. Dibujando uno solo, veríamos esa forma ┘ y cada línea roja larga es realmente cientos de líneas pequeñas, la parte inferior de cada forma ┘ punta a punta. Hay varios cientos de años aquí, y juntos lo hacen parecer una malla cohesiva. El hecho de que cada uno ya sea individual nos facilita esto.

Esa forma es todo lo que necesitamos para determinar una especie de cuadro delimitador. Y parece que cada Point en una Constraint viene con valores originales, por lo que guardaremos esos como sx y sy .

Si conocemos los límites de las casillas en su nueva ubicación, y conocemos los límites originales porque hemos guardado todos los valores del Punto para los Contraints, entonces deberíamos ser dorados.

Una vez que tenemos el cuadro delimitador original de una Restricción y su cuadro delimitador actual, ¿por qué? Todo lo que tenemos que hacer es llamar a drawImage con ambas casillas: ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);

Escribí una nueva rutina Constraint.prototype.draw , se ve así:

Y así.

Hay algunas maneras en que podrías "parchar" los agujeros, y realmente depende de ti, de lo contrario tendrás que arreglártelas con las transformaciones.

Eche un vistazo al código. No cambié mucho. ¡Busca !!! en el código (mis ediciones) y DEBUG: en el código (código de depuración en caso de que la imagen no se cargue o desee ver las estructuras).

http://jsfiddle.net/simonsarris/Kuw6P/

El código es largo, así que no quiero pegarlo todo aquí, pero aquí hay una copia de seguridad en caso de que jsfiddle se caiga: https://gist.github.com/simonsarris/5405304

Y aquí está la parte más relevante:

// !!! new super awesome draw routine! So cool we skipped naming it draw2!
Constraint.prototype.draw3 = function(otherP2) {

  // NOW dear friends consider what we have. Each box is made out of two lines,
  // the bottom and rightmost ones.
  // From these lines we can deduce the topleft and bottom-right points
  // From these points we can deduce rectangles
  // From the skewed rectangle vs the original rectangle we can "stretch"
  // an image, using drawImage''s overloaded goodness.

  // AND WE''RE OFF:

  // destination rect has 2 points:
  //top left: Math.min(this.p2.x, otherP2.x), Math.min(this.p2.y, otherP2.y)
  //bottom right: (this.p1.x, this.p1.y)

  // image destination rectangle, a rect made from the two points
  var dx = Math.min(this.p1.x,  Math.min(this.p2.x, otherP2.x));
  var dy = Math.min(this.p1.y,  Math.min(this.p2.y, otherP2.y));
  var dw = Math.abs(this.p1.x - Math.min(this.p2.x, otherP2.x));
  var dh = Math.abs(this.p1.y - Math.min(this.p2.y, otherP2.y));
  // DEBUG: IF THERE IS NO IMAGE TURN THIS ON:
  //ctx.strokeStyle = ''lime'';
  //ctx.strokeRect(dx, dy, dw, dh);

  // source rect 2 points:
  //top left: Math.min(this.p2.sx, otherP2.sx), Math.min(this.p2.sy, otherP2.sy)
  //bottom right: (this.p1.sx, this.p1.sy)

  // these do NOT need to be caluclated every time,
  // they never change for a given constraint
  // calculate them the first time only. I could do this earlier but I''m lazy
  // and its past midnight. See also: http://www.youtube.com/watch?v=FwaQxDkpcHY#t=64s
  if (this.sx === undefined) {
    this.sx = Math.min(this.p1.sx,  Math.min(this.p2.sx, otherP2.sx));
    this.sy = Math.min(this.p1.sy,  Math.min(this.p2.sy, otherP2.sy));
    this.sw = Math.abs(this.p1.sx - Math.min(this.p2.sx, otherP2.sx));
    this.sh = Math.abs(this.p1.sy - Math.min(this.p2.sy, otherP2.sy));
  }
  var sx = this.sx;
  var sy = this.sy;
  var sw = this.sw;
  var sh = this.sh;
  // DEBUG: IF THERE IS NO IMAGE TURN THIS ON:
  //ctx.strokeStyle = ''red'';
  //ctx.strokeRect(sx, sy, sw, sh);


  // IF we have a source and destination rectangle, then we can map an image
  // piece using drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)
  // Only problem, we''re not exactly dealing with rectangles....
  // But we''ll deal. Transformations have kooties anyways.
  ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);
};