How to draw an arc-shaped

Audio and Graphics
#1

How to draw an arc-shaped?
Thanks!

#2

Do you mean a segment of a curve or a segment of a circle?

#3

yes

use report figure image

thanks

#4

As far as I can tell, there is not a simple way to draw a curve other than creating a line with lots of points on it. The same would be true for a segment of a circle - you would have to generate a polygon for the outline of the segment. Creating a circle and subtracting from it is not really possible at present.

#5

I recently have been thinking about this and did come up with a simple, but complicated idea.

you need 2 circles ( or would be possible with one & stroke)

3 rectangles

The idea circle goes on bottom, then layer your big rectangle on top of the circle but so that only covers part of it

[lua]

local myCircle = display.newCircle( 340, 160, 80 )

myCircle:setFillColor( 0 )

myCircle.strokeWidth = 10

myCircle:setStrokeColor( 1, 0, 0 )

local cover = display.newRoundedRect( 0, 0, 360, 600, 0)

cover:setFillColor(0, 0, 0)-- Yellow

cover.x = display.contentWidth/ 2 + 250

cover.y = display.contentHeight/ 2

[/lua]

correction 1 rectangle.

Will it be useful - who knows depends on what you wanted to do with it - but i would think management of it could become quite complicated.

T.

#6

Here’s how to render a segment of a circle:

-- circle segment renderer -- rotates point around the centre by degrees -- rounds the returned coordinates using math.round() if round == true -- returns new coordinates object local function rotateAboutPoint( point, degrees, centre ) local pt = { x=point.x - centre.x, y=point.y - centre.y } pt = math.rotateTo( pt, degrees ) pt.x, pt.y = pt.x + centre.x, pt.y + centre.y return pt end math.rotateAboutPoint = rotateAboutPoint -- rotates a point around the (0,0) point by degrees -- returns new point object -- center: optional local function rotateTo( point, degrees, center ) if (center ~= nil) then return rotateAboutPoint( point, degrees, center ) else local x, y = point.x, point.y local theta = math.rad( degrees ) local pt = { x = x \* math.cos(theta) - y \* math.sin(theta), y = x \* math.sin(theta) + y \* math.cos(theta) } return pt end end math.rotateTo = rotateTo local center, first, angle = {x=display.contentCenterX,y=display.contentCenterY}, {x=display.contentCenterX,y=display.contentCenterY-200}, math.random( 10, 300 ) local points = {} points[#points+1] = center.x points[#points+1] = center.y points[#points+1] = first.x points[#points+1] = first.y local point = {x=first.x,y=first.y} for i=1, angle do point = math.rotateTo( point, 1, center ) points[#points+1] = point.x points[#points+1] = point.y end local poly = display.newPolygon( display.contentCenterX, display.contentCenterY, points )
#7

ToeKnee
   Thanks! Your suggestion!
   But I do not understand!

horacebury

    Thanks! Your demo!!
     I read a long time to understand! 

     Too professional!!!

I study way

centerX, centerY = display.contentCenterX, display.contentCenterY;

local function fun_drawArc( x, y, radius, startAngle, endAngle )

    local g_ = display.newGroup();

    if startAngle < endAngle then

    elseif startAngle > endAngle then

        local temp_ = endAngle;

        endAngle = startAngle;

        startAngle = temp_;

    else

        startAngle, endAngle = 0, 360;

    end

    print( "startAngle = " … startAngle, "endAngle = " … endAngle  );

    local aperture = radius / 100 * 2;

    for angle = startAngle, endAngle do

        local rect_ = display.newRect( x, y, radius, aperture );

        g_:insert( rect_ );

        rect_.anchorX = 0;

        rect_:setFillColor( 1, 0, 0 );

        rect_.rotation = angle;

    end

    return g_;

end

local arc_ = fun_drawArc( 

                                centerX,

                                centerY,

                                100, 

                                math.random( 0, 360 ), 

                                math.random( 0, 360 ) );

May I ask how your code so neat stickers

Thanks

#8

Ok 

You create a circle in one colour different to the background.

next you create another shape (rect) same colour as background - and place on top of your circle - but positioned so that you can still see part of your circle - a half circle perhaps.

next create another smaller circle (background colour) and place that on top - same position of original circle.

Now the end result will be an arc shape - use rotate to change orientation add extra cover shapes to tailor it to your desires.

It’s simple , yet complicated - and the usefulness really depends on what you what to do with the arc. the code above showed a simple end result.

Now with horcebury’s code which creates a white whole segment - if you wanted an arc as a line then just create a black circle and locate it at the centre but make it smaller  - end result will be a white line in an arc.

T.

#9

Do you mean a segment of a curve or a segment of a circle?

#10

yes

use report figure image

thanks

#11

As far as I can tell, there is not a simple way to draw a curve other than creating a line with lots of points on it. The same would be true for a segment of a circle - you would have to generate a polygon for the outline of the segment. Creating a circle and subtracting from it is not really possible at present.

#12

I recently have been thinking about this and did come up with a simple, but complicated idea.

you need 2 circles ( or would be possible with one & stroke)

3 rectangles

The idea circle goes on bottom, then layer your big rectangle on top of the circle but so that only covers part of it

[lua]

local myCircle = display.newCircle( 340, 160, 80 )

myCircle:setFillColor( 0 )

myCircle.strokeWidth = 10

myCircle:setStrokeColor( 1, 0, 0 )

local cover = display.newRoundedRect( 0, 0, 360, 600, 0)

cover:setFillColor(0, 0, 0)-- Yellow

cover.x = display.contentWidth/ 2 + 250

cover.y = display.contentHeight/ 2

[/lua]

correction 1 rectangle.

Will it be useful - who knows depends on what you wanted to do with it - but i would think management of it could become quite complicated.

T.

#13

Here’s how to render a segment of a circle:

-- circle segment renderer -- rotates point around the centre by degrees -- rounds the returned coordinates using math.round() if round == true -- returns new coordinates object local function rotateAboutPoint( point, degrees, centre ) local pt = { x=point.x - centre.x, y=point.y - centre.y } pt = math.rotateTo( pt, degrees ) pt.x, pt.y = pt.x + centre.x, pt.y + centre.y return pt end math.rotateAboutPoint = rotateAboutPoint -- rotates a point around the (0,0) point by degrees -- returns new point object -- center: optional local function rotateTo( point, degrees, center ) if (center ~= nil) then return rotateAboutPoint( point, degrees, center ) else local x, y = point.x, point.y local theta = math.rad( degrees ) local pt = { x = x \* math.cos(theta) - y \* math.sin(theta), y = x \* math.sin(theta) + y \* math.cos(theta) } return pt end end math.rotateTo = rotateTo local center, first, angle = {x=display.contentCenterX,y=display.contentCenterY}, {x=display.contentCenterX,y=display.contentCenterY-200}, math.random( 10, 300 ) local points = {} points[#points+1] = center.x points[#points+1] = center.y points[#points+1] = first.x points[#points+1] = first.y local point = {x=first.x,y=first.y} for i=1, angle do point = math.rotateTo( point, 1, center ) points[#points+1] = point.x points[#points+1] = point.y end local poly = display.newPolygon( display.contentCenterX, display.contentCenterY, points )
#14

ToeKnee
   Thanks! Your suggestion!
   But I do not understand!

horacebury

    Thanks! Your demo!!
     I read a long time to understand! 

     Too professional!!!

I study way

centerX, centerY = display.contentCenterX, display.contentCenterY;

local function fun_drawArc( x, y, radius, startAngle, endAngle )

    local g_ = display.newGroup();

    if startAngle < endAngle then

    elseif startAngle > endAngle then

        local temp_ = endAngle;

        endAngle = startAngle;

        startAngle = temp_;

    else

        startAngle, endAngle = 0, 360;

    end

    print( "startAngle = " … startAngle, "endAngle = " … endAngle  );

    local aperture = radius / 100 * 2;

    for angle = startAngle, endAngle do

        local rect_ = display.newRect( x, y, radius, aperture );

        g_:insert( rect_ );

        rect_.anchorX = 0;

        rect_:setFillColor( 1, 0, 0 );

        rect_.rotation = angle;

    end

    return g_;

end

local arc_ = fun_drawArc( 

                                centerX,

                                centerY,

                                100, 

                                math.random( 0, 360 ), 

                                math.random( 0, 360 ) );

May I ask how your code so neat stickers

Thanks

#15

Ok 

You create a circle in one colour different to the background.

next you create another shape (rect) same colour as background - and place on top of your circle - but positioned so that you can still see part of your circle - a half circle perhaps.

next create another smaller circle (background colour) and place that on top - same position of original circle.

Now the end result will be an arc shape - use rotate to change orientation add extra cover shapes to tailor it to your desires.

It’s simple , yet complicated - and the usefulness really depends on what you what to do with the arc. the code above showed a simple end result.

Now with horcebury’s code which creates a white whole segment - if you wanted an arc as a line then just create a black circle and locate it at the centre but make it smaller  - end result will be a white line in an arc.

T.