Umíme ve Flashi 13. díl - kreslicí aplikace - křivky

V minulém díle jsme si vytvořili aplikaci pro kreslení jednoduchých čar. V dnešním díle provedeme menší úpravy této aplikace, abychom si vyzkoušeli základní možnosti kreslení křivek.
Umíme ve Flashi 13. díl - kreslicí aplikace - křivky

Metoda kreslení křivek

Pro kreslení křivek využijeme velmi podobnou metodu, kterou jsme použili v minulém díle při kreslení rovných čar. Takže ještě než přistoupíme k samotné křivce, opět musíme nastavit parametry kreslené čáry. Určení těchto parametrů provádíme pomocí totožných metod jako u kreslení rovných čar, jedná se o metody lineStyle() a moveTo. Jednotlivé parametry obou metod jsme si uvedli v minulém díle, proto se jimi již dnes nebudeme zabývat.

Nově nám zde přibude metoda curveTo(). Tato metoda umožňuje nakreslit křivku z jednoho bodu do druhého společně s určením souřadnic bodu, ke kterému se provede zakřivení. Podle uvedeného popisu je zřejmé, že metoda má celkem čtyři parametry, kterými jsou:

  • controlX – x-ová souřadnice bodu, ke kterému se vytvoří vytažení oblouku kreslené křivky
  • controlY – y-ová souřadnice bodu, ke kterému se vytvoří vytažení oblouku kreslené křivky
  • anchorX – x-ová souřadnice bodu, ve kterém bude nakreslená křivka zakončena
  • anchorY – y-ová souřadnice bodu, ve kterém bude nakreslená křivka zakončena

Úprava programu

Pro kreslení křivek využijeme jako základ zdrojový soubor minulého dílu, který si můžeme stáhnout zde.

Kódy prvního snímku zůstávají v nezměněné podobě:

var barva:Color = new Color(tuzka.telo);
b1.onPress = function() {
 tuzka.barva = 0x000000;
 barva.setRGB(0x000000);
};
b2.onPress = function() {
 tuzka.barva = 0x009900;
 barva.setRGB(0x009900);
};
b3.onPress = function() {
 tuzka.barva = 0xFF9900;
 barva.setRGB(0xFF9900);
};
b4.onPress = function() {
 tuzka.barva = 0x003366;
 barva.setRGB(0x003366);
};

Úprav dozná kód na objektu kreslicí tužky. Budeme chtít, aby se tažením myší se stisknutým tlačítkem natáhla rovná čára, která se, po uvolnění tlačítka, bude prohýbat podle měnící se pozice kurzoru myši. Při opětovném kliknutí zůstane nakreslená křivka na ploše. S dalším kreslením již bude docházet k překreslování dříve vytvořené křivky.

Zvolíme objekt tužky, otevřeme si panel akcí a původní kód změníme do této podoby:

onClipEvent (load) {
 _level0.createEmptyMovieClip("kresba", 1);
 startDrag(this, true);
 this.swapDepths(2);
 barva = 0x000000;
 Mouse.hide();
}
onClipEvent (mouseDown) {
 if (this._parent.b1.hitTest(_root._xmouse, _root._ymouse, true) != true && this._parent.b2.hitTest(_root._xmouse, _root._ymouse, true) != true && this._parent.b3.hitTest(_root._xmouse, _root._ymouse, true) != true && this._parent.b4.hitTest(_root._xmouse, _root._ymouse, true) != true && this._parent.b5.hitTest(_root._xmouse, _root._ymouse, true) != true) {
  if (line) {
   line = false;
   pressed = false;
  } else {
   pressed = true;
   pointx = _root._xmouse;
   pointy = _root._ymouse;
  }
 }
}
onClipEvent (mouseMove) {
 if (pressed == true && line != true) {
  _level0.kresba.clear();
  _level0.kresba.lineStyle(1, barva, 100);
  _level0.kresba.moveTo(pointx, pointy);
  _level0.kresba.lineTo(_root._xmouse, _root._ymouse);
 } else if (pressed == true && line == true) {
  _level0.kresba.clear();
  _level0.kresba.lineStyle(1, barva, 100);
  _level0.kresba.moveTo(pointx, pointy);
  _level0.kresba.curveTo( _root._xmouse,  _root._ymouse, finx, finy);
 }
}
onClipEvent (mouseUp) {
 if (this._parent.b1.hitTest(_root._xmouse, _root._ymouse, true) != true && this._parent.b2.hitTest(_root._xmouse, _root._ymouse, true) != true && this._parent.b3.hitTest(_root._xmouse, _root._ymouse, true) != true && this._parent.b4.hitTest(_root._xmouse, _root._ymouse, true) != true && this._parent.b5.hitTest(_root._xmouse, _root._ymouse, true) != true) {
  if (pressed) {
   line = true;
   finx = _root._xmouse;
   finy = _root._ymouse;
  }
 }
}

Podobně jako v minulém díle, nejdříve si vytvoříme objekt (kresba), do kterého kreslíme křivku. Protože jsme objekt pro křivku umístili do vrstvy 1 a chceme, aby byla tužka nad kreslenou čarou, umístíme jí do vrstvy 2. Objekt tužky začneme přesouvat společně s kurzorem myši, který schováme, aby nerušil přetahovanou tužku.

Následují akce při události, kdy stiskneme tlačítko myši. Nejdříve otestujeme, jestli jsme neklikli nad některým z objektů pro změnu barvy čáry. Pokud jsme mimo tyt objekty, zjistíme podle proměnné „line“, jestli jsme byli v režimu kreslení křivek. Pokud jsme měnili zakřivení, ukončíme kreslení.

V opačném případě začínáme s novou křivkou, nastavíme si proměnnou „pressed“ na „true“ a zjistíme aktuální souřadnice kurzoru myši.

Následuje událost, která provede příslušné příkazy během pohybu myši. Zde testujeme, v jakém režimu se momentálně nacházíme. Pokud kreslíme pouze rovnou čáru, je nutné nejdříve vymazat předchozí obsah klipu a nakreslit novou linku, která vychází se souřadnic, které jsme si nastavili při stisknutí tlačítka myši (pointx,pointy).

Pokud jsme v režimu kreslení samotné křivky, musíme zjistit umístění bodu, ke kterému bude oblouk křivky vysunut. V našem případě se nejedná o nic jiného než je aktuální pozice kurzoru myši. Další dva parametry metody curveTo() jsou souřadnice bodu, kde křivka končí.

Tyto souřadnice zjistíme pomocí sledování události uvolnění tlačítka myši. Zde opět otestujeme, jestli nejsme nad objekty pro změnu barvy. Pokud ne, zjistíme souřadnice bodu, kam až bude křivka dosahovat.

Kreslení více křivek najednou

Aplikace nám kreslí pouze jednu křivku. Pokud chceme, aby kreslila křivek více najednou, musíme změnit kód na tužce takto:

onClipEvent (load) {
 num = 1;
 mkKresba = function () {
  _level0.createEmptyMovieClip("kresba"+num, -100+num);
  nazev = "_level0.kresba"+num;
  num++;
  return nazev;
 };
 startDrag(this, true);
 this.swapDepths(2);
 barva = 0x000000;
 Mouse.hide();
}
onClipEvent (mouseDown) {
 if (this._parent.b1.hitTest(_root._xmouse, _root._ymouse, true) != true && this._parent.b2.hitTest(_root._xmouse, _root._ymouse, true) != true && this._parent.b3.hitTest(_root._xmouse, _root._ymouse, true) != true && this._parent.b4.hitTest(_root._xmouse, _root._ymouse, true) != true && this._parent.b5.hitTest(_root._xmouse, _root._ymouse, true) != true) {
  if (line) {
   line = false;
   pressed = false;
  } else {
   newName = mkKresba();
   pressed = true;
   pointx = _root._xmouse;
   pointy = _root._ymouse;
  }
 }
}
onClipEvent (mouseMove) {
 if (pressed == true && line != true) {
  eval(newName).clear();
  eval(newName).lineStyle(1, barva, 100);
  eval(newName).moveTo(pointx, pointy);
  eval(newName).lineTo(_root._xmouse, _root._ymouse);
 } else if (pressed == true && line == true) {
  eval(newName).clear();
  eval(newName).lineStyle(1, barva, 100);
  eval(newName).moveTo(pointx, pointy);
  eval(newName).curveTo(_root._xmouse, _root._ymouse, finx, finy);
 }
}
onClipEvent (mouseUp) {
 if (this._parent.b1.hitTest(_root._xmouse, _root._ymouse, true) != true && this._parent.b2.hitTest(_root._xmouse, _root._ymouse, true) != true && this._parent.b3.hitTest(_root._xmouse, _root._ymouse, true) != true && this._parent.b4.hitTest(_root._xmouse, _root._ymouse, true) != true && this._parent.b5.hitTest(_root._xmouse, _root._ymouse, true) != true) {
  if (pressed) {
   line = true;
   finx = _root._xmouse;
   finy = _root._ymouse;
  }
 }
}

Přidali jsme funkci (mkKresba), která vytváří nové prázdné MC a vrací jejich název. Pomocí této funkce tak můžeme kreslit více křivek najednou. Pokud bychom chtěli, aby tlačítko „vymazat“ fungovalo, musíme upravit jeho kód na:

on (release) {
  for (i=1; i<tuzka.num+1; i++) {
    trace(tuzka.num+1);
    eval("_level0.kresba"+i).clear();
  }
}

Výslednou aplikaci si můžeme prohlédnout zde. Zdrojový soubor je k dispozici zde.

Témata článku: Software, Programování, Fine, Elsa

4 komentáře

Nejnovější komentáře

  • OBr 4. 1. 2006 13:17:28
    doporučil bych si nainstalovat flashplayer8, v tom je totiž aplikace...
  • OBr 4. 1. 2006 13:17:21
    doporučil bych si nainstalovat flashplayer8, v tom je totiž aplikace...
  • von B 3. 1. 2006 15:55:40
    online ukázka vygeneruje bíloi stránku a offline soubor nejde ve flashi...
Určitě si přečtěte

Jak vybrat monitor k počítači: nenechte se zlákat nepodstatnými parametry

Jak vybrat monitor k počítači: nenechte se zlákat nepodstatnými parametry

** Na jaké parametry se zaměřit a kde vás výrobci chtějí nachytat ** Monitory se stále více specifikují pro konkrétní určení ** Náročný hráč nebo profesionální grafik mají různé požadavky

20.  6.  2017 | Tomáš Holčík | 32

11 tipů, jak efektivně a přesně sledovat počasí pomocí internetu

11 tipů, jak efektivně a přesně sledovat počasí pomocí internetu

** Sledujte počasí z více zdrojů a podrobněji, přesněji tak určíte, jaké počasí vás potká na dovolené ** Na webu najdete hromadu pokročilých předpovědí počasí, ale i specializované meteorologické služby ** Vybrali jsme 14 služeb na počasí, které se vám můžou hodit

23.  6.  2017 | Jakub Čížek | 19

Jak unikají informace o nových iPhonech? Třeba podprsenkami čínských pracovnic

Jak unikají informace o nových iPhonech? Třeba podprsenkami čínských pracovnic

** Na černém trhu mohou zaměstnanci továren za kradené součástky inkasovat částku ve výši ročního platu ** Velké množství informací je vyneseno i z centrály Applu ** Díly jsou pašovány v botách, podprsenkách i odpadem

21.  6.  2017 | Stanislav Janů | 24

Herní počítač vs. Xbox One X: Kvalita obrazu není všechno

Herní počítač vs. Xbox One X: Kvalita obrazu není všechno

** Nový Xbox One X slibuje hraní ve 4K s HDR za 13 tisíc korun ** Aby stejnou kvalitu obrazu zvládl počítač, museli byste za něj dát minimálně dvakrát tolik ** Přesto herní počítače stále svůj smysl mají

24.  6.  2017 | Tomáš Holčík | 58


Aktuální číslo časopisu Computer

Bojujeme proti Fake News

Dva velké testy: fotoaparáty a NASy

Co musíte vědět o změně evropského roamingu

Radíme s výběrem základní desky