Skocz do zawartości

[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

Odnośnik do komentarza
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);
}

Odnośnik do komentarza
Udostępnij na innych stronach

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

Jedynie 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ę poniżej.

Zaloguj się
  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...