Tortendiagramm mit GM:HTML5

  • GM 8

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Tortendiagramm mit GM:HTML5

    Hallo,

    ich stehe gerade vor dem Problem, dass ich ein Tortendiagramm mit Gamemaker erstellen möchte und einfach keine Idee habe, wie ich anfangen soll.

    Das Tortendiagramm soll ein normaler Kreis sein, in dem 5 Bereiche durch eine 2px breite grau/schwarze Linien unterteilt sind. Diese Bereiche müssen alle einen leichten Farbverlauf haben.

    Hat jemand eine Idee, wie ich das am besten umsetzen könnte?

    Gruß

  • Ich hab mich mal hingesetzt und ein Script geschrieben, weils mich interessiert hat. Das Script verwendet die draw_primitve Funktion. Hier zur Freien Verwendung ;)

    GML-Quellcode

    1. // draw_piechart(x, y, radius, steps, num, col1, amount1, col2, amount2, ...)
    2. // Zeichnet ein Tortendiagramm mithilfe der übergebenen Argumente
    3. // x, y ...... Position, des Diagramms
    4. // radius .... Radius
    5. // steps ..... Detailgrad (Hohe Zahlen = niedriger Detailgrad)
    6. // num ....... Anzahl der Teile
    7. // col1 ...... Farbe des ersten Teils usw.
    8. // amount1 ... Anteil des ersten Teils in %
    10. var xp, yp, radius, step, num, i, j, amount, col, outcol;
    12. xp = argument0;
    13. yp = argument1;
    14. radius = argument2;
    15. step = argument3;
    16. num = argument4;
    18. // Diagrammteile
    19. amount = 0;
    20. for (i = 0; i < num; i += 1)
    21. {
    22. col = argument[6 + 2 * i];
    23. outcol = make_color_rgb(max(0, color_get_red(col) - 70), max(0, color_get_green(col) - 70), max(0, color_get_blue(col) - 70));
    24. draw_primitive_begin(pr_trianglestrip);
    25. for (j = 0; j <= 360/100 * argument[5 + i * 2]; j += step)
    26. {
    27. draw_vertex_color(xp, yp, col, 1);
    28. draw_vertex_color(xp + lengthdir_x(radius, amount + j), yp + lengthdir_y(radius, amount + j), outcol, 1);
    29. }
    30. if (j > 360/100 * argument[5 + i * 2])
    31. draw_vertex_color(xp + lengthdir_x(radius, amount + 360/100 * argument[5 + i * 2]), yp + lengthdir_y(radius, amount + 360/100 * argument[5 + i * 2]), outcol, 1);
    32. draw_primitive_end();
    33. amount += 360/100 * argument[5 + i * 2];
    34. }
    36. // Trennlinien
    37. amount = 0;
    38. for (i = 0; i < num; i += 1)
    39. {
    40. amount += 360/100 * argument[5 + i * 2];
    41. draw_line_width_color(xp, yp, xp + lengthdir_x(radius, amount), yp + lengthdir_y(radius, amount), 4, c_dkgray, c_black);
    42. }
    Alles anzeigen

    © 2008 by Teamgrill Productions

  • Hi MasterXY,

    vielen Dank, dass du dir die Mühe gemacht hast. ^^

    Ich habe dein Script mit 'piechart(320, 240, 100, 10, 3, 80, c_aqua, 30, c_fuchsia, 10, c_lime);' aufgerufen. Ist dir echt gut gelungen, nur leider unterstützt HTML5 die Befehle draw_primitive_begin, draw_vertex_color und draw_primitiv_end nicht.

    Somit kann ich das leider nicht verwenden.




    Kann ich nicht einfach 5 vorgezeichnete Torten übereinander legen und von jedem nur einen Teil einblenden?

    Gruß

  • Das geht in dem Fall nur kompliziert über Surfaces, da man zwar nur Teile eines Sprites zeichnen kann, die Funktion dafür arbeitet aber nur mit Breite u. Höhe, d.h. es lässt sich nicht einfach ein Kreissktor herausnehmen. Du müsstest also Surfaces verwenden, um richtige Teile zu bekommen, was nicht ganz einfach ist.

    © 2008 by Teamgrill Productions