Element canvas i klasy w JS

Data: 2017-06-20, autor: Michał Misztal

JS to bez wątpienia język obiektowy. Definiując zmienne mamy dostęp do ich właściwości. Ba, nie ma problemu w definiowaniu nowych właściwości. Niestety do tej pory trzeba było operować na samych obiektach a nie na klasach.

Od 2015 roku zaszła pewna zmiana. Dotąd aż tak nie interesował mnie ten język - napisać co trzeba napisać i w nogi. Ale teraz sytuacja się zmieniła. Mogąc deklarować klasy, cechy i metody i tworzyć ich instancję język stał się bardzie zarządzalny, kod czytelniejszy i wtórny.

Dzisiaj krótki przykład z obiektem canvas. Chodzi o przykład z obrazka poniżej - tzn ładne ścięcie obrazka. Oczywiście można utworzyć ścięty png z przezroczystością ale dla typowego obrazka będzie to małoefektywne. Pierwsze co trzeba będzie przygotować to kod html w stylu



<style>
body{margin:0;overflow:hidden;}
#canv_top{background-image:url(obrazek);margin-bottom:-100px;}
</style>
<div>
	<canvas id="canv_top">Twoja przeglądarka nie obsługuje obiektu canvas</canvas>
</div>

No i JS



$(function(){
    
    class Canvas{
        constructor(id,wymiary){
            this.id=id;
            this.wymiary=wymiary;
            this.object=document.getElementById(this.id);
            this.object.width=window.innerWidth;
            this.c=this.object.getContext("2d");
        }
        
        refresh(){
            this.object.width=window.innerWidth;
            this.c.beginPath();

            for(var i=0;i<this.wymiary.length+1;i++){
                if(i==0){
                    this.c.moveTo(this.wymiary[0][0],this.wymiary[0][1]);
                }else if(i==this.wymiary.length){
                    this.c.lineTo(this.wymiary[0][0],this.wymiary[0][1]);
                }else{
                    this.c.lineTo(this.wymiary[i][0],this.wymiary[i][1]);
                }
            }
           
            this.c.strokeStyle="white";
            this.c.fillStyle="white";
            this.c.closePath();
            this.c.stroke();
            this.c.fill();
        }
        
        returnWidth(){
            return this.object.width;
        }
    }
        
   var c1=new Canvas("canv_top",[[0,50],[window.innerWidth,50],[window.innerWidth,0]]);
   c1.refresh();
   
   
   window.onresize=function(){
       c1.refresh();
   }
   
});

Widzimy, że klasa wygląda jak połączenie C++ z PHP. W konstruktorze ustalamy jakiego id w html dotyczy obiekt. Tutaj również przekazujemy współrzędne do wyrysowania konturu oraz pobieramy właściwości płótna. Całość jest rysowana w metodzie refresh z tego względu, że całość musi być przerysowana w momencie zmiany rozmiaru okna. A prościej jest wykonać jedną funkcję niż przepisywać wszystko później od nowa. Pętla for jest zastosowana by można było rysować bardziej fikuśne kształty tzn ilość współrzędnych nie ma znaczenia.

Potem tylko inicjalizacja obiektu i przerysowanie płótna przy zmianie rozmiaru okna. Overflow dla body jest po to by pozbyć się ewentualnych pasków przewijania przy złym przeskalowaniu płótna.

O nowościach w EcmaScript6 możecie przeczytać tutaj.

Skomentuj lub zgłoś błąd

© Michał Misztal 2018

Czytasz właśnie

Element canvas i klasy w JS
Autor: Michał Misztal
Data: 2017-06-20

Tagi

Podobne wpisy