To druga i ostatnia część tworzenia edytora graficznego.
Pierwsza część tworzenia edytora – kod/omówienie: https://oki.org.pl/edytor-graficzny-czesc-1/
Szczegółowe omówienie zadania Edytor graficzny:
Link do powyższego omówienia zadania Edytor graficzny:
https://youtu.be/EXENvWJLI5k?t=1334
Skrócone omówienie kodu: https://youtu.be/Ck6k19b7FVU?t=5222
Treść zadania: https://oki.org.pl/edytor-graficzny-zadanie/
Kod programu użyty w filmie i tworzący edytor – na dole strony.
Edytor graficzny tworzy stronę www na której można:
* rysować po naciśnięciu myszy
* wyczyścić rysunek / ustawić wartości początkowe
* ustawić wielkość / kolor pędzla
Poniżej jest kod wynikowy który utworzyliśmy w trakcie naszych zajęć.
Jak uruchomić edytor graficzny?
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.html
Zwróć uwagę by był to plik index_edytor_graficzny..html a nie index_edytor_graficzny.html.html.txt lub index_edytor_graficzny.html.txt. Wyjaśnienie: https://youtu.be/kYa-2EdIF3Q?t=1658
3. Kliknij dwukrotnie na pliku index_edytor_graficzny.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.
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, który jest omówiony w powyższym filmie
–
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Edytor graficzny SUPEREDIT v2.0 by CodeMaster</h1>
<canvas id="plansza_canvas" width="400px" height="200px">
</canvas>
<div>
<fieldset style="width: 370px;">
<legend>Pedzel</legend>
<label>Wielkosc:</label>
<input type="number" id="pole_wielkosc_pedzla" min="1" max="40">
<label style="margin-left: 20px;">Kolor:</label>
<input type="color" id="pole_kolor_pedzla">
</fieldset>
</div>
<div style="margin-top: 20px;">
<button onclick="CzyscPlansze()">
Czysc!
</button>
<button onclick="UstawieniaPoczatkoweEdytora()" style="margin-left: 20px;">
Do poczatku!
</button>
<button onclick="ZapiszObraz()" style="margin-left: 20px;">
Zapisz jako
</button>
<input type="text" id="pole_nazwa_pliku" size="10">
</div>
<script>
let plansza, rysowanie;
plansza = document.getElementById("plansza_canvas");
rysowanie = plansza.getContext("2d");
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();
}
function MyszNacisnieta(zdarzenie) {
RysujPunkt(zdarzenie.pageX, zdarzenie.pageY, wielkosc_pedzla, kolor_pedzla);
czy_mysz_wcisnieta = true;
}
function MyszPodniesiona(zdarzenie) {
czy_mysz_wcisnieta = false;
}
function RuchMyszy(zdarzenie) {
if (czy_mysz_wcisnieta == true)
RysujPunkt(zdarzenie.pageX, zdarzenie.pageY, wielkosc_pedzla, kolor_pedzla);
}
function CzyscPlansze() {
rysowanie.fillStyle = "#FFFF00";
rysowanie.fillRect(0,0,plansza.width, plansza.height);
}
function ZmianaWielkosciPedzla(zdarzenie) {
wielkosc_pedzla = document.getElementById("pole_wielkosc_pedzla").value;
}
function ZmianaKoloruPedzla(zdarzenie) {
kolor_pedzla = document.getElementById("pole_kolor_pedzla").value;
}
function UstawieniaPoczatkoweEdytora() {
CzyscPlansze();
wielkosc_pedzla = 10;
document.getElementById("pole_wielkosc_pedzla").value = wielkosc_pedzla;
kolor_pedzla = "#FF0000";
document.getElementById("pole_kolor_pedzla").value = kolor_pedzla;
document.getElementById("pole_nazwa_pliku").value = "moje_dzielo";
czy_mysz_wcisnieta = false;
}
function ZapiszObraz(){
let obraz, link;
obraz = plansza.toDataURL();
link = document.createElement('a');
link.download = document.getElementById("pole_nazwa_pliku").value;
link.href = obraz;
link.click();
}
plansza.addEventListener('mousemove', RuchMyszy);
document.addEventListener('mousedown', MyszNacisnieta);
document.addEventListener('mouseup', MyszPodniesiona);
pole_wielkosc_pedzla.addEventListener('change', ZmianaWielkosciPedzla);
pole_kolor_pedzla.addEventListener('change', ZmianaKoloruPedzla);
let czy_mysz_wcisnieta, wielkosc_pedzla, kolor_pedzla;
UstawieniaPoczatkoweEdytora();
</script>
</body>
</html>