Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:

Diskuze: JS vykreslování na canvas - modré vertikální čáry

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

Aktivity
Avatar
Petr Šťastný
Tvůrce
Avatar
Petr Šťastný:29.7.2017 11:28

Zdravím, hned na začátek bych vám chtěl říct jednu věc. Vykresloval jsem v JS na canvas a přišlo mi to strašně pomalé, vykresloval jsem asi 20 různých obrázků. Tak jsem je všechny nalil do jednoho obrázku a vždy vykresloval jenom jednu část toho velkého obrázku. IE byl v průměru 1.2x rychlejší, Edge 1.4x, Chrome 6x a Opera dokonce 16.5x rychlejší. U chromu i u opery byla rychlost vykreslování jednoho obrázku téměř totožná.

Prohlížeč Počet ms potřebných k vykreslení jednoho obrázku
Chrome 0.0008
Opera 0.0009
IE 0.0082
Edge 0.0075

Jde o průměr z 3000 sérií vykreslování, při každé sérii jsem vykreslil 20 obrázků

Jenže nastal problém, při vykreslování tímto způsobem se mi na canvasu objevují mezi obrázky vertikální modré čáry. Nejde o problém textury, tyto čáry se objevují například takto: čára obrázek obrázek čára obrázek obrázek čára ...
Někdy se stane, že se modré čáry vykreslují po stranách canvasu, někdy všude, někdy vůbec. Opravdu netuším, kde je problém. Zde je moje metoda pro vykreslování:
Kód píšu v C# převedeném do JS pomocí Bridge.NET

private static void Draw()
        {
                for (int x = 0; x < visibleTiles + -offsetX + (offsetX == 0 ? 0 : (offsetX < 0 ? 1 : -1)); x++)
                {
                    if (x >= tiles)
                        break;
                    for (int y = 0; y < visibleTiles + -offsetY + (offsetY == 0 ? 0 : (offsetY < 0 ? 1 : -1)); y++)
                    {
                        if (y >= tiles)
                            break;

                        // Získej pozici obrázku v textureMap
                        Point p = textureMap.txMap.getSubImageCoords(Game.game.Map[x, y, 0].texture);

                        // Texturemapa, X a Y obrázku, délka a výška obrázku, kam na canvas to kreslím (X, Y), délka a výška kresleného obrázku
                        ctx.DrawImage(txMap, p.x, p.y, (int?)64, (int?)64, (x + offsetX) * width, (y + offsetY) * height, width, height);

                        // Vykreluju další věci naprosto stejně, jenom s jinou texturou

                        // ...
                    }
                }
        }

Ještě na závěr bych dodal, že v závislosti na tom, jak scrolluji mapu do stran (offsetX a offsetY), modré pruhy se posouvají / mizí / objevují se. Počet a místa, kde se objevují modré pruhy také ovlivňuje to, jak moc velký zoom jsem nastavil. (Tedy jak velké vykresluji jednotlivé textury. Taky k tomu samozřejmě dopočítávám, kolik jich vykresluji na canvas)

Děkuji, Petr

 
Odpovědět
29.7.2017 11:28
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Michal Žůrek - misaz:29.7.2017 11:44

řekl bych že to způsobuje nějaký aliasing.

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
29.7.2017 11:44
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Petr Šťastný
David Hartinger:29.7.2017 12:20

A není možné, že se ti ta velikost spočítá jako desetinné číslo? Pak by dávalo smysl, že je občas něco větší nebo menší o 1, jak se to zrovna zaokrouhlí. Myslím tuhle část:

(x + offsetX) * width, (y + offsetY) * height,width, height

Zkus tam dát pevné hodnoty, jestli to bude dělat dále.

Nahoru Odpovědět
29.7.2017 12:20
New kid back on the block with a R.I.P
Avatar
Petr Šťastný
Tvůrce
Avatar
Odpovídá na David Hartinger
Petr Šťastný:29.7.2017 20:05

Tím to nebylo, hodnoty (x + offsetX) * width a (y + offsetY) * height byly

0 | 0
0 | 100
0 | 200
0 | 300
0 | 400
0 | 500
0 | 600
0 | 700
0 | 800
0 | 900
0 | 1000
0 | 1100
0 | 1200
0 | 1300
0 | 1400
0 | 1500
0 | 1600
0 | 1700
0 | 1800
0 | 1900
0 | 2000
0 | 2100
0 | 2200
0 | 2300
0 | 2400
0 | 2500
0 | 2600
0 | 2700
0 | 2800
0 | 2900
0 | 3000
0 | 3100
100 | 0
100 | 100
100 | 200
100 | 300
// ...
3100 | 2500
3100 | 2600
3100 | 2700
3100 | 2800
3100 | 2900
3100 | 3000
3100 | 3100

Ale díky za pomoc. Michal Žůrek - misaz měl pravdu. Vložení

ctx.ImageSmoothingEnabled = false;

to vyřešilo.

Díky všem :-)

 
Nahoru Odpovědět
29.7.2017 20:05
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 4 zpráv z 4.