Diskuze: Canvas - cesty a mezery mezi nimi

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

1Pupik1989

Člen

1Pupik1989:17.7.2014 23:20

Nemá někdo nápad, jak se zbavit nevykreslených mezer mezi cestami? Pokud použiji i stroke, tak se to vykresluje 3x déle.

[url=http://www.imagehosting.cz/?v=n3dbadtria.jpg][img]http://www.imagehosting.cz/thumbs/n3dbadtria.jpg[/img][/url]

Abych to upřesnil. Vykresluji trojúhelníky. Zrovna tady na mapě, mají sousedící trojúhelníky společné body. Pokud to natočím do kolmého směru k obrazovce, tak to vypadá jako na obrázku níže.

[url=http://www.imagehosting.cz/?v=n3dbadqxq.jpg][img]http://www.imagehosting.cz/thumbs/n3dbadqxq.jpg[/img][/url]

Jen dodám, že všechny body jsou zaokrouhlené na celé číslo. A kontext má matici v základním stavu.

Odpovědět

17.7.2014 23:20

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:17.7.2014 23:26

odkazy na obrázky nefungují, nahraj je normálně zde přes možnost Zvolit soubory pod textareou na post.

Nahoru Odpovědět

17.7.2014 23:26

1Pupik1989

Člen

1Pupik1989:18.7.2014 0:00

Tak to jsou ty obrázky. Zapomněl jsem, že na tomto fóru nejdou některé BB-kódy.

Editováno 18.7.2014 0:01

Nahoru Odpovědět

18.7.2014 0:00

1Pupik1989

Člen

1Pupik1989:18.7.2014 0:02

Tak ještě ten druhý, který se nehodlal nahrát.

Nahoru Odpovědět

18.7.2014 0:02

coells

Tvůrce

coells:18.7.2014 8:35

Podle obrázků to nejsou mezery, ale antialiasing, zkus ho vypnout přes ctx.imageSmoothingEnabled

Nahoru Odpovědět

18.7.2014 8:35

1Pupik1989

Člen

1Pupik1989:18.7.2014 8:49

Tak antialiasing je v tom nevinně.

Jednoduchá ukázka:

<canvas id="c2d" width="640" height="480"></canvas>
<script type="text/javascript">
  var can = document.getElementById('c2d');
  var ctx = can.getContext('2d');

  ctx.beginPath();
  ctx.moveTo(150,100);
  ctx.lineTo(0,150);
  ctx.lineTo(200,200);
  ctx.closePath();
  ctx.fill();

  ctx.beginPath();
  ctx.moveTo(150,100);
  ctx.lineTo(400,150);
  ctx.lineTo(200,200);
  ctx.closePath();
  ctx.fill();
</script>

Jakmile spoj polygonů není rovně, tak to canvas odpíská. Čím víc je spoj zkosený (blížící se 45° ve čtyřech směrech), tím je to horší.

Editováno 18.7.2014 8:49

Nahoru Odpovědět

18.7.2014 8:49

coells

Tvůrce

coells:18.7.2014 8:55

Ale jasně, že je to antialias. Podívej se na vnější linie těch trojúhelníků, jak jsou jemné. A když posuneš jeden z bodů jemně stranou, efekt už tam není.

<script type="text/javascript">
  var can = document.getElementById('c2d');
  var ctx = can.getContext('2d');

  ctx.beginPath();
  ctx.moveTo(150,100);
  ctx.lineTo(0,150);
  ctx.lineTo(200,200);
  ctx.closePath();
  ctx.fill();

  ctx.beginPath();
  ctx.moveTo(140,100);
  ctx.lineTo(400,150);
  ctx.lineTo(200,200);
  ctx.closePath();
  ctx.fill();
</script>

Nahoru Odpovědět

18.7.2014 8:55

1Pupik1989

Člen

1Pupik1989:18.7.2014 9:53

Už jsem si to přiblížil. Takže jediná možnost je polygony zvětšovat o pixel na každou stranu od středu. Nic jiného mě nenapadá.

Nahoru Odpovědět

18.7.2014 9:53

coells

Tvůrce

coells:18.7.2014 10:34

Ještě můžeš zkusit ctx.globalCompositeOperation = 'lighter';
Ale v různých situacích se to může chovat odlišně.

Nahoru Odpovědět

18.7.2014 10:34

1Pupik1989

Člen

1Pupik1989:18.7.2014 15:55

ctx.globalCompositeOperation = 'lighter'; by situaci řešilo. Nicméně pokud překreslím polygon jiným polygonem, tak to deformuje barvy. Ideální by bylo něco mezi "lighter" a "source-over". Zatím jsem to vyřešil tím zvětšením polygonu. Pak budu muset vymyslet nějaké čistší řešení.

Nahoru Odpovědět

18.7.2014 15:55

Naučíme tě pracovat na home-office.

Zjistit více...

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 10.

Nejčastěji vyhledáváné

Diskuze: Canvas - cesty a mezery mezi nimi