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
- 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>