html5 canvas strokeStyle?

Question

Próbuję odwzorować obraz na "trójwymiarową" siatkę, która symuluje szmatkę za pomocą stylu obrysu i płótna, mam obraz włączony, ale obecnie działa on jako obraz tła i nie przepływa z "szmatką", podobnie jak zmarszczki, IE obraz jest statyczny, gdy przepływa sieć. tutaj jest jsfiddle, co jest oczywiste (działa tylko w Chrome). każda pomoc jest bardzo doceniana. tutaj jest JavaScript, który powoduje, że obraz w tle, w jaki sposób powstrzymać od renderowania jako tło i tylko zrobić to wypełnić siatkę ?:

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

Hers jest oryginalny codepen pracuję z. "zaktualizowano fiddle z aktualizacją funkcji obrazu zewnętrznego(): Obecnie wydaje się, że faktycznie wypełnia komórki, a także stosuje je jako obraz tła. czy jest jakiś sposób, aby zatrzymać go jako obraz tła i zastosować go tylko do wypełnienia siatki? Próbowałem tego:
ctx.fillStyle = ptrn; i usuwanie linii 260:
ctx.strokeStyle = ptrn; ale wydaje się, że usunięto obraz tła, wyświetlając go w postaci czarnej siatki ... jeszcze raz dziękuję za cierpliwość.

Answer 1

O mój! Świetne pytanie!

Zobaczmy, co mamy. System, który ma garść "więzów", które są zestawami 2 punktów. Same wiązania występują w parach i tworzą dwie linie, tworząc kształt ┘ (w prawym dolnym rogu okna).

Gdyby narysować linię wiązania każdy indywidualnie chcielibyśmy zobaczyć:

to wszystko poziome i pionowe czerwone linie niebieskie linie. Narysując jeden, który właśnie zobaczyliśmy, kształt, a każda długa czerwona linia to naprawdę setki małych linii, dolna część każdego kształtu ┘, od końca do końca. Jest tutaj kilkaset ┘ s, które razem tworzą spójną siatkę. Fakt, że każdy jest już indywidualny, ułatwia nam to.

Ten kształt jest wszystkim, czego potrzebujemy do określenia sortowania obwiedni. Wygląda na to, że każdy z numerów Point w wersji Constraint ma oryginalne wartości, więc zapiszemy je jako sx i sy.

Jeśli znamy granice skrzynek w ich nowej lokalizacji i znamy oryginalne granice, ponieważ zachowaliśmy wszystkie wartości Punktów dla Zawiązków, powinniśmy być złotymi.

Gdy mamy pierwotną obwiednię ograniczenie i jej bieżącej obwiedni, dlaczego, wszystko co musisz zrobić, to wywołanie drawImage z obu polach: ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);

pisałem nową Constraint.prototype.draw rutynę, to wygląda tak :

I tak dalej.

Istnieje kilka sposobów, w jakie można "załatać" dziury, a to naprawdę zależy od was, w przeciwnym razie trzeba będzie przejść transformację.

Zobacz kod. Nie zmieniłem wiele. Poszukaj !!! w kodzie (moje edycje) i DEBUG: w kodzie (kod debugowania na wypadek, gdyby obraz się nie załadował lub chcesz zobaczyć szkielety).

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

Kod jest długi, więc nie chcę wklej to wszystko tutaj, ale tutaj jest kopia zapasowa na wypadek jsfiddle idzie w dół: https://gist.github.com/simonsarris/5405304

A oto najbardziej istotne części:

// !!! 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); 
};