Diskuze: Canvas - cesty a mezery mezi nimi

JavaScript JavaScript Canvas - cesty a mezery mezi nimi

Avatar
1Pupik1989
Člen
Avatar
1Pupik1989:

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=n3dbad­tria.jpg][img]http://www­.imagehosting­.cz/thumbs/n3dbad­tria.jpg[/img][/ur­l]

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=n3dbad­qxq.jpg][img]http://www­.imagehosting­.cz/thumbs/n3dbad­qxq.jpg[/img][/ur­l]

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
Avatar
Odpovídá na 1Pupik1989
Michal Žůrek (misaz):

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
Nesnáším {}, proto se jim vyhýbám.
Avatar
1Pupik1989
Člen
Avatar
1Pupik1989:

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
Avatar
1Pupik1989
Člen
Avatar
1Pupik1989:

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

 
Nahoru Odpovědět 18.7.2014 0:02
Avatar
coells
Redaktor
Avatar
Odpovídá na 1Pupik1989
coells:

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

 
Nahoru Odpovědět 18.7.2014 8:35
Avatar
1Pupik1989
Člen
Avatar
Odpovídá na coells
1Pupik1989:

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
Avatar
coells
Redaktor
Avatar
Odpovídá na 1Pupik1989
coells:

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
Avatar
1Pupik1989
Člen
Avatar
Odpovídá na coells
1Pupik1989:

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
Avatar
coells
Redaktor
Avatar
Odpovídá na 1Pupik1989
coells:

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

 
Nahoru Odpovědět 18.7.2014 10:34
Avatar
1Pupik1989
Člen
Avatar
1Pupik1989:

ctx.globalCom­positeOperati­on = '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
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.