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í, Elsa, Křivka, Fine, Díl, Opětovné kliknutí

Určitě si přečtěte

Tesla chce změnit nákladní dopravu. Její elektrický náklaďák má ohromující parametry

Tesla chce změnit nákladní dopravu. Její elektrický náklaďák má ohromující parametry

** Tesla představila elektrický kamion ** Má obdivuhodný výkon i dojezd ** Prodávat by se měl už za dva roky

17.  11.  2017 | Vojtěch Malý | 215

Elektronika, která nepotřebuje kabel ani baterii. Živí se rádiovým šumem

Elektronika, která nepotřebuje kabel ani baterii. Živí se rádiovým šumem

** Každá elektrická krabička má konektor pro napájení nebo baterii ** Jenže pozor, jednou by to tak nemuselo být ** Drobná elektronika se může živit rádiovými vlnami

14.  11.  2017 | Jakub Čížek | 15

Nejlepší notebooky do 10 tisíc, které si teď můžete koupit

Nejlepší notebooky do 10 tisíc, které si teď můžete koupit

** I pod hranicí desíti tisíc korun existují dobře použitelné notebooky ** Mohou plnit roli pracovního stroje i zařízení pro zábavu ** Nejlevnější použitelný notebook koupíte za pět a půl tisíce

16.  11.  2017 | Stanislav Janů | 53


Aktuální číslo časopisu Computer

Otestovali jsme 5 HDR 4K televizorů

Jak natáčet video zrcadlovkou

Vytvořte si chytrou domácnost

Radíme s koupí počítačového zdroje