Edytor graficzny – rozwiązanie zadania – grafika, zdarzenia, strona www, JavaScript

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>
Kod HTML / JavaScript programu Edytor graficzny, który jest omówiony w powyższym filmie

 

Nie dodano jeszcze komentarza, rozpocznij dyskusję pierwszy.

Dodaj komentarz