Skocz do zawartości
Konrad-GM

[JS/HTML5] Skalowanie elementu <canvas>

Rekomendowane odpowiedzi

Joł joł,

 

spotkał mnie pewien problem - a mianowicie z "wyłączeniem" interpolacji przy rysowaniu skalowanego elementu w przeglądarce Mozilla Firefox. Otóż aby osiągnąć styl rozpikselowania używam dwóch canvasów. Jeden ukryty, odpowiada za wstępne rysowanie a'la "backbuffer". Drugi zaś jest kilkakrotnie (4x) większy niż jego poprzednik. Aby skopiować zawartość pierwszego płótna, używam coś takiego:

present: function(canvas, smooth){
    var ctx = canvas.getContext("2d");

    ctx.scale(canvas.width/this.width,
              canvas.height/this.height);

    ctx.webkitImageSmoothingEnabled = 
    ctx.mozImageSmoothingEnabled =
    ctx.msImageSmoothingEnabled =
    ctx.oImageSmoothingEnabled =
    ctx.imageSmoothingEnabled = false;

    ctx.fillStyle = ctx.createPattern(this.canvas, 'no-repeat');
    ctx.fillRect(0, 0, this.width, this.height);
}

Gdzie:

this - to obiekt który posiada zmienną "canvas", która z kolei służy do przechowywania ukrytego elementu canvas.

canvas - to element canvas który jest tym "frontbufferem", naszym celem.

 

W Chromie działa ok, ale Firefox skalując traktuje obrazek interpolacją. A to wygląda już tak:

 

Chrome:

cPbJDJt.png

 

Firefox:

7MGWlvH.png

 

Czy znacie może jakieś efektywniejsze sposoby aby osiągnąć skalowanie przy braku interpolacji? (nearest neighbor) A może istnieje rozwiązanie tego problemu dopisując pewne części non-standard? Skalowanie ma się odbywać co klatka (30/60 fps). Także kopiowanie całości poprzez getImageData/putImageData odpada.

 

Pozdrawiam,

Konrad-GM

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Ok, rozwiązałem problem. Zmieniłem "createPattern>fillStyle>fillRect" na "drawImage". Już jest ok :)

 

Dzięki temu: http://vaughnroyko.com/jsfiddle/nearest-neighbor.html

 

presentViaDrawImage: function(canvas) {
    var ctx = canvas.getContext("2d");

    ctx.scale(canvas.width/this.width,
              canvas.height/this.height);

    ctx.webkitImageSmoothingEnabled = 
    ctx.mozImageSmoothingEnabled =
    ctx.msImageSmoothingEnabled =
    ctx.oImageSmoothingEnabled =
    ctx.imageSmoothingEnabled = false;

    ctx.drawImage(this.canvas, 0, 0);
}

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się tutaj.

Zaloguj się tutaj

  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

×