reklama

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.

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...
reklama
Určitě si přečtěte

Vybíráte herní periferii nebo hardware? Pak zapomeňte na nálepku Gaming

Vybíráte herní periferii nebo hardware? Pak zapomeňte na nálepku Gaming

** Herní hardware se od toho běžného často liší jen vzhledem ** Při výběru stále nezapomínejte na základní parametry ** Poradíme jak vybrat herní hardware i periferie

20.  2.  2017 | Stanislav Janů | 36

10 nejhorších produktů v historii Microsoftu

10 nejhorších produktů v historii Microsoftu

20.  2.  2017 | Karel Javůrek | 133

Pojďme programovat elektroniku: Žádný bastlíř se neobejde bez armády švábů

Pojďme programovat elektroniku: Žádný bastlíř se neobejde bez armády švábů

** Každý bastlíř se po čase neobjede bez armády švábů ** Dnes si některé z nich vyzkoušíme ** Třeba zázračný posuvný registr

19.  2.  2017 | Jakub Čížek | 39

AMD oficiálně představilo procesory Ryzen. Známe i jejich české ceny

AMD oficiálně představilo procesory Ryzen. Známe i jejich české ceny

** AMD uvedlo první tři procesory Ryzen 7 ** Všechny budou pracovat s osmi jádry a šestnácti vlákny ** Na pulty obchodů se dostanou už za týden

22.  2.  2017 | Stanislav Janů | 131

EU se děsí Windows 10. Prý o nás vědí až příliš. Microsoft chystá změny

EU se děsí Windows 10. Prý o nás vědí až příliš. Microsoft chystá změny

** Evropští úředníci chtějí, aby byly Desítky transparentnější ** Microsoft od jara skutečně chystá změny ** Ochráncům soukromí to ale nestačí

21.  2.  2017 | Jakub Čížek | 217

Vyhledávání ve Windows není dokonalé, zkuste to 5× jinak

Vyhledávání ve Windows není dokonalé, zkuste to 5× jinak

** V macOS funguje vyhledávání Spotlight, ve Windows podobně propracovaná funkce chybí ** Alternativy se zaměřují na rychlé hledání souborů i externí zdroje ** Mnohé mohou vyhledávání ve Windows kompletně nahradit

18.  2.  2017 | Stanislav Janů | 58


Aktuální číslo časopisu Computer

Supertéma o počítačové bezpečnosti

AMD Ryzen přichází

Velké testy kinoprojektorů a levných špuntových sluchátek

Příslušenství do USB-C

reklama
reklama