Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
path2d drawCircle() extension — Gideros Forum
  • Home
    • ›

    path2d drawCircle() extension

    piepie Member
    edited October 2016 in Code snippets
    Hi,
    I made some use of the code from @mertocan (http://giderosmobile.com/forum/discussion/6374/path2d-circle-indicator/p1) and extracted the drawCircle function to easily extend Path2d:

    place this function somewhere:
    function Path2D:drawCircle( r, lineThickness, LineColor, FillColor, fillAlpha )
	self:setSvgPath(("M %s 0 a %s %s 0 0 0 %s 0 a %s %s 0 0 0 %s 0 Z"):format(-r, r, r, 2*r, r, r, -2*r))
	self:setLineThickness(lineThickness) -- Outline width
	self:setFillColor(FillColor,fillAlpha) --Fill color
	self:setLineColor(LineColor) --Line color
end
    then you can draw any path2d circle you want:
    local circle = Path2d.new()
circle:drawCircle(radius, lineThickness, LineColor, FillColor, fillAlpha )
stage:addChild(circle)
    [edit: updated circle path with n1cke suggestion]

    Likes: mertocan

    +1 -1 (+1 / -0 )Share on Facebook

    Comments

    • hgy29hgy29 Maintainer
      Hmm, doesn't look right to me: if your two arcs 'edges' are radius,radius and radius,-radius, then those edges are located at radius*sqrt(2) from the center, so the circle shall look odd!

      Likes: pie

      +1 -1 (+1 / -0 )Share on Facebook
    • n1cken1cke Maintainer
      circle anchored to it's center:
      r = 256 -- radius
path2d:setSvgPath(("M %s 0 a %s %s 0 0 0 %s 0 a %s %s 0 0 0 %s 0 Z"):format(-r, r, r, 2*r, r, r, -2*r))

      Likes: pie

      +1 -1 (+1 / -0 )Share on Facebook
    • piepie Member
      edited October 2016
      Thank you guys,
      you're always a lot ahead eh.. :)
      It looked like a circle to me, but the one from @n1cke is much better. Mine was definitely odd :P
      Where does the :format part come from? Couldn't find it in the docs: it's svg stuff?

      Thank you again
      +1 -1Share on Facebook
    • n1cken1cke Maintainer
      'format' is a method of string type so you can call it with ':'-syntax on any string.
      ("%s"):format(v) is equal to string.format("%s", v)
      +1 -1Share on Facebook
    • piepie Member
      Ah, I thought I understood what you did but I did not: may I ask you a little bit more of explanation about this path? :) how did you do it?
      Thank you
      +1 -1Share on Facebook
    • n1cken1cke Maintainer
      edited October 2016
      `setSvgPath` method accepts a string with vector shape description in SVG format. Tutorial with list of commands (at bottom of the page): http://tutorials.jenkov.com/svg/path-element.html
      Note that lower case letters in SVG are used for relative positioning while upper case letters are for absolute one.
      `string.format` is part of Lua language: http://docs.giderosmobile.com/reference/lua/string/format#string.format
      It accepts formatting string and list of arguments for each `%`-prefixed element in formatting string and outputs formatted string where each `%`-prefixed element is replaced with some argument from that list.
      More about it: https://www.lua.org/pil/20.html

      I use "M %s 0 a %s %s 0 0 0 %s 0 a %s %s 0 0 0 %s 0 Z" to describe a circle:
      M %s 0 -- move pen without drawing to (%s,0)
      a %s %s 0 0 0 %s 0 -- draw relatively positioned elliptical arc (half of circle)
      a %s %s 0 0 0 %s 0 -- draw another relatively positioned elliptical arc (half of circle)
      Z -- close path i.e. draw a line from last described point to first one
      And then I replace `%s`-elements in this string with calculated numbers:
      (-r, r, r, 2*r, r, r, -2*r)
      `string.format` is faster than " M "..(-r).." 0 ".." a "..(r) ... etc. and more readable for my taste.

      Some other programming languages have much more readable interpolated strings support for this case:
      greet = "Hello"
      whom = "world"
      print("$greet, $whom.")
      And it outputs "Hello, world.".
      I should say it is also possible to implement interpolated strings in Gideros Lua via macro.

      Likes: pie

      +1 -1 (+1 / -0 )Share on Facebook
    • piepie Member
      edited October 2016
      Thank you heaps! This is much better than a lot of docs on svg path I found googling :)
      +1 -1Share on Facebook
    • n1cken1cke Maintainer
      @pie: I have extended Path2D:setSvgPath(...) for next Gideros release so instead of (for example) `path2d:setSvgPath(string.format("M %s %s L %s %s", x1, y1, x2, y2))` you can write `path2d:setSvgPath("M", x1, y1, "L", x2, y2)`

      Likes: pie

      +1 -1 (+1 / -0 )Share on Facebook
    • SinisterSoftSinisterSoft Maintainer
      Nice extension. :)

      In the github update text you also mention the normal setPath, have you changed that too?
      Coder, video game industry veteran (since the '80s, ❤'s assembler), arrested - never convicted hacker (in the '90s), dad of five, he/him (if that even matters!).
      https://deluxepixel.com
      +1 -1Share on Facebook
    • n1cken1cke Maintainer
      Nah, I also wanted to show complexity of `setPath` method, but was distracted by phone call :) Only `setSvgPath` was extended.
      +1 -1Share on Facebook
    • SinisterSoftSinisterSoft Maintainer
      I kinda like setPath - but I'm crazy!
      Coder, video game industry veteran (since the '80s, ❤'s assembler), arrested - never convicted hacker (in the '90s), dad of five, he/him (if that even matters!).
      https://deluxepixel.com
      +1 -1Share on Facebook
    Sign In or Register to comment.