Info o ciastkach

Eeee...
Żeby strona działała fajnie to trzeba zaakceptować obsługę pewnych plików. Jeśli jesteś nienormalny, nosisz czapkę z amelinium i siedzisz w schronie zbudowanym z poduszek to możesz je sobie wyłączyć. Autor strony nie czerpie żadnych korzyści z cookies (twierdzi nawet, że ten komunikat jest głupi), ale, cóż - Unia wymaga. Korzystając z witryny zgadzasz się z polityką cookies.

Wszystko w budowie...

Element canvas i klasy w JS

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.

Komentarze (0)

Nikt jeszcze nie dodał komentarza. Możesz być pierwszy.

Napisz komentarz lub zgłoś błąd

Dodane w dniu 20 czerwca 2017 przez Michał Misztal
Kopiowanie powyższych wypocin dozwolone pod warunkiem podania źródła, znaczy tandemu autor + link do strony