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

UPC překopli páteřní kabel. V Brně i druhý den nejede internet ani kabelovka

UPC překopli páteřní kabel. V Brně i druhý den nejede internet ani kabelovka

** V Brně byl velký výpadek služeb UPC ** Důvodem je překopnutý páteřní kabel ** V některých lokalitách služby stále nefungují

5.  12.  2016 | Jakub Čížek | 104

17 expertek Microsoftu předpovědělo rok 2027. Splní se alespoň něco?

17 expertek Microsoftu předpovědělo rok 2027. Splní se alespoň něco?

** Zmizí klasické vyhledávače ** Budeme programovat buňky ** Kvantové počítače překonají šifry

6.  12.  2016 | Jakub Čížek | 36

11 tipů na dobrý stolní počítač: od základu po herní mašiny

11 tipů na dobrý stolní počítač: od základu po herní mašiny

** Postavte si stolní počítač! Máme pro vás 11 vzorových sestav s rozpisem komponent ** Většina tipů cílí na hráče, věnujeme se ale i základnímu PC a počítačům na střih videa ** Nadělte si nový počítač třeba pod stromeček

5.  12.  2016 | Adam Kahánek | 74

Nejlepší notebooky nad 20 tisíc: poradíme, které teď chcete

Nejlepší notebooky nad 20 tisíc: poradíme, které teď chcete

** V notebooku s cenou nad 20 tisíc nesmí chybět kvalitní displej a rychlé úložiště ** Za dalších deset tisíc můžete dostat navíc styl nebo výkonnější komponenty ** Vybírat můžete z různých velikostí i konstrukcí

8.  12.  2016 | Stanislav Janů | 85


reklama