path2d drawCircle() extension

pie

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]

hgy29

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!

n1cke

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))

pie

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

n1cke

'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)

pie

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

n1cke

`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.

pie

Thank you heaps! This is much better than a lot of docs on svg path I found googling

n1cke

@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)`

SinisterSoft

Nice extension.

In the github update text you also mention the normal setPath, have you changed that too?

n1cke

Nah, I also wanted to show complexity of `setPath` method, but was distracted by phone call Only `setSvgPath` was extended.

SinisterSoft

I kinda like setPath - but I'm crazy!