Autor Zpráva
Niorko
Profil
Zdravím, po dlhom rozmýšľaní ako spojazdniť kreslenie do Canvasu aj pre myš a dotykové zariadenie, sa mi naskytol problém s kreslenou čiarou. Čiara sa sice kreslí, ale jej krivky a čiara vôbec je dosť kostrbatá. Neviem si s tým rady a pokročilý v JS vôbec nie som, takže by som rád prijal nejaké riešenie formou príkladu. Ďakujem =)

    this.touchmove = this.mousemove = function (event) {
        if (tool.started) {

            // male vyhladenie
            var xc = (event._x + event._x+1) / 2;
            var yc = (event._y + event._y+1) / 2;

            obsah.strokeStyle = "#df4b26";
            obsah.lineWidth=2;
            obsah.lineJoin="round";
            obsah.lineCap = 'round';
            obsah.quadraticCurveTo(event._x, event._y,xc, yc);
            obsah.stroke();
        }
    };

Toto je kúsok kódu, ktorý vykresluje čiaru... prikladám aj celý zdrojový kód, ak by pomohlo.
http://pastebin.com/eqpAXDZM
Darker
Profil
Mohls třebas přiložit živou ukázku...
Nevím, co to tam vytváříš s .quadraticCurveTo(event._x, event._y,xc, yc);, já jsem to řešil tak, že jsem si zapamatoval poslední bod, kde se event onmousemove spustil a odtamtud udělal čáru na nové umístění.
Jak jsem já řešil malování můžeš vidět tu. Po chvíli jsem se na to vykašlal, takže je to kostrbaté, naprasené a nefunguje to v IE. Taky jsem ještě moc neovládal OOP, takže je to celé v jednom {objektu}. Čára je druhé tlačítko.
Niorko
Profil
.quadraticCurveTo() som skúšal.. primárne tam bolo lineTo()... ukážku už netreba, kedže podobne sa chová tvoj príklad. Ak s tým mojim kreslím na iPade alebo iPhone a povecme spravím čiaru šikmo nahor, je vidno, že nie je pekne vyhladená, ale sú tam vidieť schody.

Edit: Tak som pridal aj ukážku ukážku.
peta
Profil
Darker: ve FF mi ten priklad nejede.
Niorko: Ani tvuj priklad mi nejde.

http://devfiles.myopera.com/articles/649/example5.html
Funguje mi tento priklad. Kdyz se hybe rychle mysi, je cara kostrbata. To by slo resit Bézierovymi krivkami, ne?
https://developer.mozilla.org/samples/canvas-tutorial/2_5_canvas_quadraticcurveto.html
https://developer.mozilla.org/samples/canvas-tutorial/2_6_canvas_beziercurveto.html
https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes
Jestli chces vyhlazovani jako anti-aliasing. Ten se da tusim nekde vypnout nebo zapnout.
Darker
Profil
peta:
ten priklad nejede.
Funguje od verze 3. Jen není moc intuitivní.
peta
Profil
Darker: Neprisel jsem na to, jak tam kreslit caru. Resi to jakesi menicka, zalozky, export asi na png. At jsem klikl na co chtel, i druhe tlacitko, nepodarilo se mi kreslit caru. Mam FF12. Takze to povazuji za nefungujici.
Nox
Profil
peta: je velký problém pustit jiný prohlížeč?

Niorko:
Možná je problém to, že se provádíš vykreslování při jakýmkoli pohybu a to od posledního spuštění eventu do aktuálního spuštění, který je velmi brzo a tudíž jde o velmi krátkou křivku v řádku pár pixelů a nejde rozumně nasamplovat. Zkus si pro test dát vykreslit quadratic z nějakých tebou zadaných bodů na větší vzdálenost, jak to bude vypadat.

Jinak ruční kreslení kostrbatý asi bude trochu vždy
Niorko
Profil
Nox:
Super... ak vykreslím ako si povedal quadratic z jedného bodu, do druhého, je to fajn. Ako ale riešiť oblúky a ako to vykreslovať bez toho aby to bolo zubaté. Nejak ma nič použitelného nenapadá.
Niorko
Profil
Nox:
Ak som použil stroke() až po pustení tlačidla, kreslená čiara bola super... neboli vidieť žiadne schody. Kresba sa vykreslila až po odkliknutí. Čiže ak použijem vykreslenie pri každom pohybe, čiara je kostrbatá... ako to vykreslovanie riešiť? Nemôžem to vykresliť až po pár pohyboch, musí sa to vykreslovať stále.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: