Přejít k navigační liště

Zdroják » JavaScript » Vytváříme kreslicí aplikaci s HTML5 canvasem

Vytváříme kreslicí aplikaci s HTML5 canvasem

Články JavaScript, Různé

Zvládli jste základy práce s canvasem a přemýšlíte, co dál? Ukážeme, jak pomocí obsluhy událostí můžete canvas proměnit v kreslicí aplikaci. V dnešní první části se soustředíme na základní kreslení pomocí sledování kurzoru myši.

Tento článek je překladem anglického originálu vydaného na Dev.Opera.

Úvod

V předchozím článku Začínáme s HTML5 canvasem jsem vás zasvětil do používání canvasu. V tomto textu si ukážeme, jak pomocí canvasu vytvořit kreslicí aplikaci.

Vytvoření webové aplikace, která uživatelům umožní kreslit, vyžaduje několik kroků: vytvoření HTML dokumentu (se značkou canvas, které přiřadíme atribut id), nastavení skriptu tak, aby kreslil do tohoto canvasu, přidání obsluhy událostí myši pro interakci s uživatelem a pro logiku aplikace. Jakmile je obsluha událostí nastavena, je už velmi jednoduché přidat požadovanou funkčnost.

Naše výsledná kreslicí aplikace bude vypadat takto:

Vzhled finalni aplikace
Abychom vám usnadnili práci, můžete si stáhnout plný zdrojový kód příkladů z tohoto článku, abyste ho měli po ruce již při čtení textu.

Začneme s HTML

Vytvoříme si základní dokument HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Paint</title>
    <style type="text/css"><!--
      #container { position: relative; }
      #imageView { border: 1px solid #000; }
    --></style>

  </head>
  <body>
    <div id="container">
      <canvas id="imageView" width="400" height="300">
        <p>Naše aplikace váš prohlížeč nepodporuje. Omlouváme se. Následuje přehled
         podporovaných prohlížečů.</p>

        <p>Podporované prohlížeče: <a href="http://www.opera.com">Opera</a>, <a
          href="http://www.mozilla.com">Firefox</a>, <a
          href="http://www.apple.com/safari">Safari</a>, and <a
          href="http://www.konqueror.org">Konqueror</a>.</p>

      </canvas>
    </div>

    <script type="text/javascript"
    src="example1.js"></script>
  </body>
</html> 

Jak můžete vidět, jedná se o velmi jednoduchý dokument obsahující značku canvas. Pokud prohlížeč canvas nepodporuje, zobrazí obsah vnořený do této značky (tzv. fallback content). Později dokument trochu rozšíříme, prozatím je to přesně to, co potřebujeme.

Vložený fallback content by měl být maximálně vysvětlující. Nestačí prosté „váš prohlížeč nepodporujeme“, to by bylo k ničemu. Vysvětlete uživateli, jak si může aplikaci spustit nebo mu nabídněte alternativní možnost (v našem případě by to mohl být formulář s uploadem souborů umožňující nahrát obrázky vytvořené offline). Ještě lepší by bylo podporu canvasu detekovat a následně automaticky nabídnou buď aplikaci nebo nahrávací formulář.

Interakce s canvasem

Když nyní máme náš canvas umístěn v dokumentu, bude dalším krokem interakce s myší. Napřed si naši interakci otestujeme a teprve po té začneme přidávat funkce potřebné pro naši aplikaci.

Testujeme interakci s canvasem

Pro testovací účely si napřed zkusíme nakreslit něco pod kurzorem myši. Toho docílíme, když našemu canvasu přiřadíme obsluhu události mousemove. Tohle je základ našeho ukázkového skriptu:

// ...
function init () {
  // ...
  // Přiřazení handleru pro událost mousemove.
  canvas.addEventListener('mousemove', ev_mousemove, false);
}

// Obsluha události mousemove.
var started = false;
function ev_mousemove (ev) {
  var x, y;

  // Získání souřadnic kurzoru relativně k canvasu.
  if (ev.layerX || ev.layerX == 0) { // Firefox
    x = ev.layerX;
    y = ev.layerY;
  } else if (ev.offsetX || ev.offsetX == 0) { // Opera
    x = ev.offsetX;
    y = ev.offsetY;
  }

  // Malujeme "tužkou", tj. sledujeme pohyby myši.
  // Začínáme kreslit cestu (path) složenou z čar.
  if (!started) {
    context.beginPath();
    context.moveTo(x, y);
    started = true;
  } else {
    context.lineTo(x, y);
    context.stroke();
  }
}
// ... 

Podívejte se na živou ukázku.

Zatím vidíte jen začátek toho, jak skvělým dynamickým nástrojem může canvas být. Použili jsme vlastnosti event.layer* a event.offset*, abychom určili pozici kurzoru myši relativně k canvasu. To je vše, co potřebujeme, abychom mohli začít kreslit.

Implementujeme události

Nyní náš skript trochu zkomplikujeme. Nejlepší bude mít jednu obsluhu události, která bude pouze zjišťovat souřadnice kurzoru myši vzhledem k canvasu. Implementaci jednotlivých kreslicích nástrojů rozdělíme do několika nezávislých funkcí. A nakonec kreslicí nástroje potřebují interagovat s událostmi mousedown a mouseup, nestačí jim samotná mousemove. Proto budeme mít tři obslužné funkce.

Náš aktualizovaný skript s novými událostmi mj. obsahuje:

// ...
function init () {
  // ...
  // Kreslicí nástroj tužka.
  tool = new tool_pencil();

  // Zaregistruj obsluhu událostí mousedown, mousemove a mouseup.
  canvas.addEventListener('mousedown', ev_canvas, false);
  canvas.addEventListener('mousemove', ev_canvas, false);
  canvas.addEventListener('mouseup',   ev_canvas, false);
}

// Tento nástroj funguje jako kreslicí tužka, která sleduje pohyby myši.
function tool_pencil () {
  var tool = this;
  this.started = false;

  // Zavolá se, když začnete držet tlačítko myši.
  // Spustí kreslení tužkou.
  this.mousedown = function (ev) {
      context.beginPath();
      context.moveTo(ev._x, ev._y);
      tool.started = true;
  };

  // Tato funkce se zavolá, kdykoliv pohnete myší. Pochopitelně kreslí jen v případě,
  // že tool.started je nastaven na true (když držíte stisknuté tlačítko myši).
  this.mousemove = function (ev) {
    if (tool.started) {
      context.lineTo(ev._x, ev._y);
      context.stroke();
    }
  };

  // Zavolá se, když uvolníte tlačítko myši.
  this.mouseup = function (ev) {
    if (tool.started) {
      tool.mousemove(ev);
      tool.started = false;
    }
  };
}

// Obecný handler. Tato funkce zjistí souřadnice kurzoru myši
// vzhledem k canvasu.
function ev_canvas (ev) {
  if (ev.layerX || ev.layerX == 0) { // Firefox
    ev._x = ev.layerX;
    ev._y = ev.layerY;
  } else if (ev.offsetX || ev.offsetX == 0) { // Opera
    ev._x = ev.offsetX;
    ev._y = ev.offsetY;
  }

  // Zavolá handler vlastního nástroje.
  var func = tool[ev.type];
  if (func) {
    func(ev);
  }
}
// ... 

Podívejte se na novou živou ukázku.

Skript byl rozdělen do několika funkcí. Máme nyní pro canvas tři obsluhy událostí ( mousedown, mousemove a mouseup). Funkce ev_canvas() přidá objektu události dvě nové vlastnosti _x a _y, které obsahují souřadnice kurzoru myši vzhledem k canvasu. Tento handler funguje jako „proxy“ a zavolá další funkci v závislosti na typu události. Pokud se jedná o událost mousemove, zavolá tool.mousemove()  atd.

Úpravy, které jsme provedli, nám pomůžou s vytvořením celé aplikace. Nástroj kreslicí tužka po přidání funkcí pro začátek a konec kreslení už funguje; všechny potřebné funkce nástroje jsme zapsali jako metody jednoho objektu. A brzy přidáme další objekty.

Pokračování příště

Příště přidáme další kreslicí nástroje jako kreslení obdélníků a úseček. A aplikace bude hotova.

Tento článek je překladem textu Creating an HTML 5 canvas painting application, jehož autorem je Mihai Sucan a je zde zveřejněn s laskavým svolením Opera Software.

Komentáře

Subscribe
Upozornit na
guest
0 Komentářů
Inline Feedbacks
View all comments

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.