Fórum Root.cz

Hlavní témata => Vývoj => Téma založeno: Opoidní Lopaťák 08. 01. 2016, 18:04:06

Název: Jak vykreslit winapi Arc pomocí javascriptu do SVG?
Přispěvatel: Opoidní Lopaťák 08. 01. 2016, 18:04:06
Zdarec programátoři,
potřeboval bych vykreslit winapi arc (https://msdn.microsoft.com/en-us/library/windows/desktop/dd183357%28v=vs.85%29.aspx) pomocí funkce javascriptu do SVG. Mezitím co Rectangle i Ellipse tam jsou přímo, Arc tak snadný není. Určitě to ale nějak půjde přes path (https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths), no ale nevím jak. V ideálním případě bych potřeboval naimplementovat v js funkci se stejnými parametry jako má ta ve Windows tak aby fungovala stejně. Zatím něco s path mám, ale oblouček se kreslí blbě, protože path chce odkud kam to jde a ve win je zas ten bounding rectangle.

No a tak se ptám jestli někdo víte jak na to, a jestli byste mi s tím tady pomohli ;).
Název: Re:Jak vykreslit winapi Arc pomocí javascriptu do SVG?
Přispěvatel: Ivan Nový 08. 01. 2016, 18:27:25
http://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circle
Název: Re:Jak vykreslit winapi Arc pomocí javascriptu do SVG?
Přispěvatel: Opoidní Lopaťák 08. 01. 2016, 18:42:47
Signatura té funkce tam neodpovídá tomu co je ve winapi, prostě nevím jak to přepočíst aby to sedělo do toho bounding rectu...
Název: Re:Jak vykreslit winapi Arc pomocí javascriptu do SVG?
Přispěvatel: Mirek Prýmek 08. 01. 2016, 18:55:04
prostě nevím jak to přepočíst aby to sedělo do toho bounding rectu...
Jakože neumíš spočítat souřadnice těžiště obdélníka? Nebo?
Název: Re:Jak vykreslit winapi Arc pomocí javascriptu do SVG?
Přispěvatel: Opoidní Lopaťák 10. 01. 2016, 21:23:41
Tak pokus se nezdařil, nikdo to nevyřešil... nejde o to že to neumím vypočítat, jde o to že to potřebuji do práce ale nechce se mi jebat se vzorečkama někde na papíře protože "context switching", namísto abych "lepil velkou mozajku" tak se najednou musím zabývat jedním dílkem. Doufal jsem že to zadám do fóra přes víkend a nějaký znuděný maník se najde a já v pondělí sklidím ovoce bez práce 8)

Ach jo, budu muset počítat, už ani neznám polární souřadnice dělal jsem to před lety na gymplu naposled...
Název: Re:Jak vykreslit winapi Arc pomocí javascriptu do SVG?
Přispěvatel: neruda 10. 01. 2016, 21:47:39
Tak pokus se nezdařil, nikdo to nevyřešil... nejde o to že to neumím vypočítat, jde o to že to potřebuji do práce ale nechce se mi jebat se vzorečkama někde na papíře protože "context switching", namísto abych "lepil velkou mozajku" tak se najednou musím zabývat jedním dílkem. Doufal jsem že to zadám do fóra přes víkend a nějaký znuděný maník se najde a já v pondělí sklidím ovoce bez práce 8)

Ach jo, budu muset počítat, už ani neznám polární souřadnice dělal jsem to před lety na gymplu naposled...

ach jo, budes si muset namahat mozek, misto toho aby to nejaka lopata poslala reseni a ty ses mohl zabyvat "lepenim velke mozaiky" ...
Název: Re:Jak vykreslit winapi Arc pomocí javascriptu do SVG?
Přispěvatel: ehmmm 10. 01. 2016, 22:08:03
Sorry za vulgarismy, ale ty vole, to je fakt vysoka matematika.  :)
Název: Re:Jak vykreslit winapi Arc pomocí javascriptu do SVG?
Přispěvatel: peter 10. 01. 2016, 22:10:59
Tunajší brigádnici sú dnes bez dozoru že tu spamujú takýmito blbosťami? Dúfam, že sa im zspoň zobrazuje reklama.
Název: Re:Jak vykreslit winapi Arc pomocí javascriptu do SVG?
Přispěvatel: Opoidní Lopaťák 11. 01. 2016, 11:56:42
Fajn, zabralo to půl dne. A pak že je to triviální. A to to ještě nemám pořádně otestované...
https://jsfiddle.net/6jpgvo58/ (https://jsfiddle.net/6jpgvo58/)
Název: Re:Jak vykreslit winapi Arc pomocí javascriptu do SVG?
Přispěvatel: Opoidní Lopaťák 12. 01. 2016, 06:48:30
Najdi alespoň 3 chyby či ošklivosti v níže uvedeném zdrojovém kódu:

Kód: [Vybrat]
function TCanvas_Arc(x1,y1, x2,y2, x3,y3, x4,y4) {
  try{
        function dist(x1, y1, x2, y2) {
              var dx = x2 - x1;
              var dy = y2 - y1;
              return Math.sqrt(dx * dx + dy * dy);
          }
         
        var rx = Math.floor(Math.abs((x2 - x1) / 2));
        var ry = Math.floor(Math.abs((y2 - y1) / 2));
         
            var cx = Math.floor((x1 + x2) / 2);
            var cy = Math.floor((y1 + y2) / 2);
         
            var ix1 = x3 - cx;
            var iy1 = y3 - cy;
            var c = (rx * ry) / Math.sqrt(rx * rx * iy1 * iy1 + ry * ry * ix1 * ix1);
                 
            var x1a = cx + c * ix1;
        var y1a = cy + c * iy1;
         
        var x1b = cx - c * ix1;
        var y1b = cy - c * iy1;
 
        var ax1 = x1a;
        var ay1 = y1a;
        if (dist(x1a, y1a, x3, y3) > dist(x1b, y1b, x3, y3)) {
          ax1 = x1b;
          ay1 = y1b;
        }
         
        var ix2 = x4 - cx;
        var iy2 = y4 - cy;
 
        var x2a = cx + c * ix2;
        var y2a = cy + c * iy2;
 
        var x2b = cx - c * ix2;
        var y2b = cy - c * iy2;
 
        var ax2 = x2a;
        var ay2 = y2a;
         
        if (dist(x2a, y2a, x4, y4) > dist(x2b, y2b, x4, y4)) {
          ax2 = x2b;
          ay2 = y2b;
        }
         
        var deg = Math.atan2(ay1 - cy, ax1 - cx) - Math.atan2(ay2 - cy, ax2 - cx);
        if (deg < 0)
          deg += 2 * Math.PI;
         
                var largeArcFlag = deg > Math.PI ? 1 : 0;
        var pathStr = 'M ' + ax1 + ' ' + ay1 + ' ' +
                      'A ' + rx + ' ' + ry + ' 0 ' + largeArcFlag + ' 0 ' + ax2 + ' ' + ay2;
 
           
        var xmlns = "http://www.w3.org/2000/svg";
        var path = document.createElementNS(xmlns, "path");
        path.setAttribute('d', pathStr);       
        path.setAttribute('stroke','black');
        path.setAttribute('fill','transparent');
         
        return path;
  } catch (e) {
    alert(e);
    return null;
  }
}