| Autor | Zpráva | ||
|---|---|---|---|
| Niorko Profil |
#1 · Zasláno: 19. 5. 2012, 16:41:49
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 |
#2 · Zasláno: 20. 5. 2012, 20:11:34
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 |
#4 · Zasláno: 21. 5. 2012, 13:15:30
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 |
#5 · Zasláno: 21. 5. 2012, 15:04:55
peta:
„ten priklad nejede.“ Funguje od verze 3. Jen není moc intuitivní. |
||
| peta Profil |
#6 · Zasláno: 22. 5. 2012, 10:36:22
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 |
#7 · Zasláno: 22. 5. 2012, 12:22:53
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 |
#8 · Zasláno: 22. 5. 2012, 14:00:08
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 |
#9 · Zasláno: 24. 5. 2012, 20:34:34
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.
|
||
|
Časová prodleva: 12 let
|
|||
0