Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat | DONATE
path2d drawCircle() extension — Gideros Forum

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
  • 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)
  • 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
  • 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 :)
  • 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
  • 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
  • n1cken1cke Maintainer
    Nah, I also wanted to show complexity of `setPath` method, but was distracted by phone call :) Only `setSvgPath` was extended.
  • 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
Sign In or Register to comment.