html5 canvas strokeStyle?

Question

html5 canvas strokeStyle?

Próbuję odwzorować obraz na siatkę "3d", która symuluje tkaninę za pomocą strokeStyle 'u i płótna, mam obraz w zestawie, ale obecnie działa jako obraz tła i nie płynie z "tkaniną", tak jak fale, tzn. obraz jest statyczny, jak przepływ siatki. oto jsfiddle , który jest oczywisty (działa tylko w Chrome). każda pomoc jest mile widziana. oto javascript, który renderuje obraz w tle, jak zatrzymać się od renderowania jako obraz tła i tylko 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);
    }
}

/ Align = "left" / "Update with image outside function update(): Obecnie wydaje się, że faktycznie wypełnia komórki, a także stosuje go jako obraz tła. czy jest jakiś sposób, aby nie stać się obrazem 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 Usuń obraz tła wyświetlający go jako czarną siatkę... jeszcze raz dziękuję za cierpliwość

25

javascript html5 canvas 2d

Author: vimes1984, 2013-03-27

Source

1 answers

score 33 · Accepted Answer

O mój Boże! Świetne pytanie!

Zobaczmy, co mamy. System, który ma kilka "ograniczeń", które są zestawy 2 punktów. Kontrasty same występują w parach i tworzą dwie linie, tworząc kształt ┘ (dolny prawy bok pudełka).

Gdybyśmy mieli narysować każdą linię ograniczenia indywidualnie, zobaczylibyśmy to:

pudła!

To wszystkie poziome czerwone linie i pionowe niebieskie linie. Rysując jeden, zobaczylibyśmy tylko ten ┘ kształt, a każdy długi czerwona linia to naprawdę setki małych linii, dno każdego kształtu ┘, od końca do końca. Jest tu kilkaset ┘ s i razem sprawiają, że wygląda to Jak spójna siatka. Fakt, że każdy z nich jest już indywidualny, ułatwia nam to.

Ten kształt jest wszystkim, czego potrzebujemy, aby określić rodzaj obwiedni. I wygląda na to, że każda Point w Constraint ma oryginalne wartości, więc zapiszemy je jako sx i sy.

Jeśli znamy granice pudełek w ich nowym miejsce i wiemy, że pierwotne granice były, ponieważ zapisaliśmy wszystkie wartości punktu dla kontraktów, wtedy powinniśmy być złoci.

Gdy mamy oryginalną obwiednię ograniczenia i jego bieżącą obwiednię, wszystko co musimy zrobić, to wywołać drawImage z obu obwiedni: ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);

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

tak!

więcej tak!

I tak dalej.

Istnieje kilka sposobów na "załatanie" dziur, a jego naprawdę zależy od Ciebie, w przeciwnym razie będziesz musiał finagle z przekształceń.

Spójrz na kod. Niewiele się zmieniłam. Poszukaj !!! w kodzie (moje edycje) i DEBUG: w kodzie (kod debugowania w przypadku, gdy obrazek nie ładuje się lub chcesz zobaczyć wireframes).

Http://jsfiddle.net/simonsarris/Kuw6P/

Kod jest długi, więc nie chcę wklejać go tutaj, ale tutaj jest kopia zapasowa na wypadek, gdyby jsfiddle upadł: https://gist.github.com/simonsarris/5405304

A oto najistotniejsza część:

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