Edytor graficzny część 1 – rozwiązanie zadania – grafika, zdarzenia, strona www, JavaScript

Szczegółowe omówienie zadania Edytor graficzny – część 1:


Link do powyższego omówienia zadania Edytor graficzny – część 1:
https://youtu.be/Ck6k19b7FVU?t=848
Skrócone omówienie kodu: https://youtu.be/Ck6k19b7FVU?t=5222
Treść zadania: https://oki.org.pl/edytor-graficzny-czesc-1-zadanie/
Kod programu użyty w filmie i tworzący edytor – na dole strony.

Edytor graficzny – część 1 tworzy stronę www na której można:
* rysować po naciśnięciu myszy
* wyczyścić rysunek

  1. Pusta strona z plikiem index.html
    Otwarcie pliku w edytorze / przeglądarce: https://youtu.be/Ck6k19b7FVU?t=886

Poniżej jest kod wynikowy który utworzyliśmy w trakcie naszych zajęć.
Jak uruchomić edytor graficzny – część 1?
1. Skopiuj cały poniższy kod i umieść w notatniku.
2. Zapisz zwartość notatnika z wklejonym właśnie kodem jako plik index_edytor_graficzny_czesc1.html
Zwróć uwagę by był to plik index_edytor_graficzny_czesc1.html a nie index_edytor_graficzny_czesc1.html.html.txt lub index_edytor_graficzny_czesc1.html.txt. Wyjaśnienie: https://youtu.be/kYa-2EdIF3Q?t=1658
3. Kliknij dwukrotnie na pliku index_edytor_graficzny_czesc1.html
Powinna otworzyć się domyślna przeglądarka i uruchomić animację.

Alternatywnie
Kliknij na poniższy link prawym klawiszem myszy i wybierz “zapisz jako”.
Zapisz plik w dowolnym katalogu.
https://oki.org.pl/wp-content/uploads/2022/02/index_edytor_graficzny_czesc1.html
Następne dwukrotnie kliknij na zapisanym pliku.
Otworzy się przeglądarka i uruchomi się program który rysuje animację.


Kod HTML / JavaScript programu Edytor graficzny - część 1, który jest omówiony w powyższym filmie


<!DOCTYPE html>
<html>

<head>
<style>
#plansza_canvas {                                  
   background-color: #FFFF00;
}
</style>
</head>



<body>

<h1>Edytor graficzny SUPEREDIT v1.3 by CodeMaster</h1>    

<canvas id="plansza_canvas" width="400px" height="200px">
</canvas>
<div>
    <button onclick="CzyscPlansze()">
    Czysc!
    </button>
 </div>


<script>
//Otworz ten plik w Visual Studio Code lub innym edytorze do JavaScript
//Mozesz otworzyc w notatniku, ale bedzie trudniej modyfikowac
//https://youtu.be/Ck6k19b7FVU?t=994

let plansza, rysowanie;
plansza = document.getElementById("plansza_canvas");
rysowanie = plansza.getContext("2d");  

//funkcja ktora rysuje punkt/kolo o srodku (x,y) oraz promieniu i kolorze
//x oraz y zmniejszamy o przesuniecie naszego canvas (plotna) wzgledem rogu strony www
//https://youtu.be/Ck6k19b7FVU?t=3335
function RysujPunkt(x, y, promien, kolor) {
   x = x - plansza.offsetLeft;
   y = y - plansza.offsetTop;
   rysowanie.beginPath();   
   rysowanie.fillStyle = kolor;
   rysowanie.arc(x, y, promien, 0, 2*Math.PI);
   rysowanie.fill();   
   rysowanie.closePath();
}

//Jesli mysz jest nacisnieta to rysujemy punkt w miejscu nacisniecia 
//oraz zapamietujemy ze jest ncaisnieta
//https://youtu.be/Ck6k19b7FVU?t=5102
function MyszNacisnieta(zdarzenie) {
   RysujPunkt(zdarzenie.pageX, zdarzenie.pageY, 10, "#FF00FF");
   czy_mysz_wcisnieta = true;
}        

//Jesli jest podniesiona - przestaje byc nacisnieta to zapamietujemy ze juz MIE jest ncaisnieta
//https://youtu.be/Ck6k19b7FVU?t=5102
function MyszPodniesiona(zdarzenie) {
   czy_mysz_wcisnieta = false;
}                   

//Jesli jest ruch myszy to rysujemy punkt tylko wtedy gdy stan myszy jest WCISNIETA
//https://youtu.be/Ck6k19b7FVU?t=5102
function RuchMyszy(zdarzenie) {
   if (czy_mysz_wcisnieta == true)
       RysujPunkt(zdarzenie.pageX, zdarzenie.pageY, 10, "#FF00FF");
}

//Jesli nacisniety bedzie guzik Czysc! to wywolana bedzie ta funkcja ktora czysci planszę
https://youtu.be/Ck6k19b7FVU?t=3990
function CzyscPlansze() {
   rysowanie.clearRect(0, 0, plansza.width, plansza.height);    
}

//Naslucujemy zdarzen:
// * ruch myszy
// * mysz wcisnieta
// * mysz podniesiona (przestaje byc wcisnieta)
//i wywolujemy odpowiednie funkcje
//https://youtu.be/Ck6k19b7FVU?t=2536
plansza.addEventListener('mousemove', RuchMyszy);
plansza.addEventListener('mousedown', MyszNacisnieta);
plansza.addEventListener('mouseup', MyszPodniesiona);

 let czy_mysz_wcisnieta;
 czy_mysz_wcisnieta = false; 

</script>
</body> 


</html>
Kod HTML / JavaScript programu Edytor graficzny - część 1, który jest omówiony w powyższym filmie

 

 

Nie dodano jeszcze komentarza, rozpocznij dyskusję pierwszy.

Dodaj komentarz