Zobrazit příspěvky
31
Vývoj / Kreslení složitého objektu do HTML5 canvas
« kdy: 14. 06. 2020, 20:01:05 »
Delam jednoduchy javascriptovy nastroj, ktery mi umozni zjistit co je v STL souboru (3D model). Mam to naprogramovane tak, ze nactu STL do pole poli, ktere potom javascriptem kreslim (jako cary do 2D canvas contextu; nize v obrazku cerne). Nad tim mam dalsi zindex+1 layer s dalsi canvas, ktery mi dela "kurzor" (nize v obrazku zeleny) a bude i kreslit koty + rez do dalsi osy. Nemusim tedy prekreslovat puvodni STL model pri pohybu kurzoru, coz muze trvat i velmi dlouho - radove vteriny pro tohoto typu model s 60k facety https://pasteboard.co/Jd53wIP.png (nejake slozite 3D-scanovane objekty maji stovky tisic facetu trva to treba 5-10 vterin!).
Moje otazka je zda to kresleni do dvou vrstev nedelam nejak blbe (neni na to nejaka lepsi metoda?), pripadne jak vyresit lepe kresleni toho 3D objektu ze STL souboru. Planuju preoptimalizovat facety z trojuhelniku na slozitejsi utvary (provede se pri loadu), principielne mi ale jde hlavne o to vykreslovani, zde je kod:
promenne axisX/Y, mulX/Y, addX/Y, min[..], max[..] resi ruzna zobrazeni, nejaka dalsi rutina tyto promenne prednaplni.
Druha otazka je jak udelat dragovani + zoom, aby to bylo uzivatelsky privetive. Je nejaka lepsi cesta, nez ze transformuji puvodni canvas pres CSS canvas.style.xxx = ... (posun+zoom, u tabletu bude i rotace kdyz clovek zamatla dvema prsty) a kdyz uzivatel dokonci operaci nebo dobehne nejaky timer, tak vykreslim novou canvas? Pripadne uz pri nejakem timeoutu si muzu kreslit do schovane canvas a ty jen prohodit (zviditelnit "tu lepsi").
Javascript/HTML/CSS mne nezivi, tak se chci zeptat zkusenejsich nez to cele budu programovat cestou vedouci do slepe ulicky.
PS: Nejaky takovy nastroj na STLka jako delam by se mi hodil, jestli nekdo neco znate klidne poslete odkaz; nicmene mym cilem je se naucit spis to co tady programuju pro jiny, slozitejsi projekt. Takze ten STL inspektor je jen takovy bonus na kterem se ucim, protoze to je docela jednoducha aplikace. Musi to chodit jak na pocitaci tak tabletech, tzn mysi klikani i ruzne touch operace, ale to neni jadro dotazu.
Moje otazka je zda to kresleni do dvou vrstev nedelam nejak blbe (neni na to nejaka lepsi metoda?), pripadne jak vyresit lepe kresleni toho 3D objektu ze STL souboru. Planuju preoptimalizovat facety z trojuhelniku na slozitejsi utvary (provede se pri loadu), principielne mi ale jde hlavne o to vykreslovani, zde je kod:
Kód: [Vybrat]
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
for (j=0;j<geometry.length;j++) {
ctx.beginPath();
ctx.moveTo((geometry[j][geometry[j].length-1][axisX]-min[axisX])*scale*mulX + addX,(geometry[j][geometry[j].length-1][axisY]-min[axisY])*scale*mulY + addY);
for (i=1;i<geometry[j].length;i++) {
ctx.lineTo((geometry[j][i][axisX]-min[axisX])*scale*mulX + addX,(geometry[j][i][axisY]-min[axisY])*scale*mulY + addY);
}
ctx.stroke();
promenne axisX/Y, mulX/Y, addX/Y, min[..], max[..] resi ruzna zobrazeni, nejaka dalsi rutina tyto promenne prednaplni.
Druha otazka je jak udelat dragovani + zoom, aby to bylo uzivatelsky privetive. Je nejaka lepsi cesta, nez ze transformuji puvodni canvas pres CSS canvas.style.xxx = ... (posun+zoom, u tabletu bude i rotace kdyz clovek zamatla dvema prsty) a kdyz uzivatel dokonci operaci nebo dobehne nejaky timer, tak vykreslim novou canvas? Pripadne uz pri nejakem timeoutu si muzu kreslit do schovane canvas a ty jen prohodit (zviditelnit "tu lepsi").
Javascript/HTML/CSS mne nezivi, tak se chci zeptat zkusenejsich nez to cele budu programovat cestou vedouci do slepe ulicky.
PS: Nejaky takovy nastroj na STLka jako delam by se mi hodil, jestli nekdo neco znate klidne poslete odkaz; nicmene mym cilem je se naucit spis to co tady programuju pro jiny, slozitejsi projekt. Takze ten STL inspektor je jen takovy bonus na kterem se ucim, protoze to je docela jednoducha aplikace. Musi to chodit jak na pocitaci tak tabletech, tzn mysi klikani i ruzne touch operace, ale to neni jadro dotazu.
. Nicmene chvili jsem se dival na cizi navrhy hlavne u tlacitkovych mobilu s podobnymi LCD a zjistil jsem, ze trivialni upravou se treba menu da upravit na temer Apple-like vzhled pouhym pridanim oddelovacu (Line), zmenou barev, velikosti fontu (8->10,12,14) a vytvorenim gradientnich mezer mezi polozkami (FillRect). Nejsem grafik, takze je to porad takove divne, hlavne asi diky extrapolaci fontu 8x5 ktery mam kvuli velikosti. Na velikost kodu a pracnost ale velmi zajimavy vysledek (syn prisel a rekl mi "je, ty jsi to udelal nejake hezke" :-)) ).
