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í

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

Vyzkoušeli jsme FM štěnici: Když si vtipálci hrají na pirátské rozhlasové vysílání

Vyzkoušeli jsme FM štěnici: Když si vtipálci hrají na pirátské rozhlasové vysílání

** Dnes žádnou elektroniku programovat nebudeme ** Štěnice totiž funguje sama o sobě ** Stačí připojit baterii a naladit frekvenci

22.  1.  2017 | Jakub Čížek | 31

Microsoft: Zbavte se už konečně zastaralých a děravých Windows 7

Microsoft: Zbavte se už konečně zastaralých a děravých Windows 7

** Microsoft pomalu začíná kritizovat svůj nejpopulárnější OS ** Chce konečně dostat podniky na Desítky ** Bezpečnostní podpora Sedmiček vydrží ještě necelé tři roky

17.  1.  2017 | Jakub Čížek | 409

Takto si špičkoví grafici představují nový Facebook. S čistým vzhledem a bez reklam

Takto si špičkoví grafici představují nový Facebook. S čistým vzhledem a bez reklam

** Design Facebooku se delší dobu nemění a pro mnohé je nudným ** Grafici zkouší navrhovat nové koncepty toho, jak by mohla síť vypadat ** Hlasujte pro nejzdařilejší návrh

22.  1.  2017 | Stanislav Janů | 65

Umělá inteligence dokáže ze snímků srdce předpovědět, kdy zemřete

Umělá inteligence dokáže ze snímků srdce předpovědět, kdy zemřete

** Strojové učení lze skvěle použít pro vylepšení modelů pro předpověď srdečních komplikací ** Nová technologie umožňuje přesněji určit rizikové pacienty ** Dřívější diagnostika může díky včasně léčbě do budoucna zachránit životy

21.  1.  2017 | Karel Javůrek | 7

8 produktů, o kterých byste neřekli, že nesou značku Apple

8 produktů, o kterých byste neřekli, že nesou značku Apple

** Věděli jste, že Apple vyvinul celkem 45 modelů tiskáren? ** ** Monitor na výšku, plotter nebo herní konzole - to vše měl Apple ve své nabídce ** Většinu z těchto produktů pohřbil Steve Jobs

19.  1.  2017 | Stanislav Janů | 43


Aktuální číslo časopisu Computer

99 nejlepších programů pro váš počítač

Zvykejte si na umělou inteligenci

Velké testy PC zdrojů a gamepadů

Alternativní zdroje energie

reklama
reklama