How to draw an arc?

Just starting out? Need help? Post your questions and find answers here.
Basicoid
Posts: 12
Joined: Thu Dec 08, 2016 4:57 pm

How to draw an arc?

Post by Basicoid »

I started to check how to transfer a small purebasic program for windows to android, but some things are more difficult than expected (alphablending is a hard puzzle for me)...

So I try simplier things now :)
How to transfer the following snippet to work in SpiderBasic?

Code: Select all

Procedure DrawClock(time)

	Protected dc,pen,fill
	Protected x,y
	
	dc=StartDrawing(CanvasOutput(0))

	DrawingMode(#PB_2DDrawing_Default)
	RoundBox(150-13,150-100-16,26,10,3,3,#Green)
	Circle(150,150,100,#Green)
	Circle(150,150,90,#White)
	
	pen=CreatePen_(#PS_SOLID,1,#Green)
	fill=CreateSolidBrush_(#Green)

	SelectObject_(DC,pen)
	SelectObject_(DC,fill)

	x=Sin(#PI/180*time)*80
	y=-Cos(#PI/180*time)*80
	Pie_(dc,70,70,230,230,x+150,y+150,150,70)

	DeleteObject_(pen)
	DeleteObject_(fill)

	StopDrawing()

EndProcedure

OpenWindow(0,0,0,300,300,"")
CanvasGadget(0,0,0,300,300,0)
AddWindowTimer(0,0,10)
Repeat
	Select WaitWindowEvent()
	Case #PB_Event_CloseWindow
		End
	Case #PB_Event_Timer
		t+1
		DrawClock(t)
	EndSelect
ForEver
tj1010
Posts: 201
Joined: Wed May 27, 2015 1:36 pm
Contact:

Re: How to draw an arc?

Post by tj1010 »

You could use Cos and Sin functions and just draw out pie slices of the circle or combine them with pi and x/360 for length of arc. I'm about to go out the door so don't have time to code and test a sample. It works on images too and drawing out in pixels is okay because modern computers are so fast(even a cheap android phone).

This is the best way to do loading animations. I actually need to do it for a currenct project also using alpha png or vector drawing or just use low FPS gif(easy way).
falsam
Posts: 280
Joined: Mon May 05, 2014 9:49 pm
Location: France
Contact:

Re: How to draw an arc?

Post by falsam »

Reference : http://www.w3schools.com/TAgs/canvas_arc.asp

Code: Select all

Enumeration
  #mf
  #mfCanvas0
  #mfCanvas1
EndEnumeration

OpenWindow(#mf, 0, 0, 0, 0, "", #PB_Window_Background)

CanvasGadget(#mfCanvas0, 0, 0, 300, 300)    ;First canvas
CanvasGadget(#mfCanvas1, 310, 0, 300, 300)  ;Second canvas

;Define angle
Angle.f = Radian(180)

;First canvas Draw arc
StartDrawing(CanvasOutput(#mfCanvas0))
  DrawingMode(#PB_2DDrawing_Transparent)
  DrawText(0, 0, "#mfCanvas0")
StopDrawing()

!var selector = document.getElementsByTagName("canvas")[0] 
!var ctx = selector.getContext("2d");

!ctx.beginPath();
!ctx.arc(100, 75, 50, 0, v_angle);
!ctx.stroke();

;Second canvas Draw color arc
StartDrawing(CanvasOutput(#mfCanvas1))
  DrawingMode(#PB_2DDrawing_Transparent)
  DrawText(0, 0, "#mfCanvas1")
StopDrawing()

!var selector = document.getElementsByTagName("canvas")[1] 
!var ctx = selector.getContext("2d");

!ctx.beginPath()
!ctx.arc(100, 75, 50, 0, v_angle, false)
!ctx.closePath()

;Filled in red
!ctx.fillStyle = 'rgb(255, 0, 0)'
!ctx.fill()

;Black outline
!ctx.lineWidth = 3
!ctx.strokeStyle = 'rgb(0, 0, 0)'
!ctx.stroke()

➽ Windows 11 - JDK 1.8 - SB 2.40 - Android 13
http://falsam.com

Sorry for my poor english
tj1010
Posts: 201
Joined: Wed May 27, 2015 1:36 pm
Contact:

Re: How to draw an arc?

Post by tj1010 »

All that does is draw a line-arc. To use a bitmap you need to actually solve the problem and draw pixels(just use variable radius) or use SVG which I seem to remember having easy functions for pie-charts..

Here is how that works though:

Code: Select all

<script>
var state=0.01;
function loading(){
	var c = document.getElementById("myCanvas");
	var ctx = c.getContext("2d");
	ctx.beginPath();
	state=state+0.05;
	ctx.arc(100, 75, 60,0, state*Math.PI);
	ctx.stroke();
    if(state>=2.0) clearTimeout(timer);
}
var timer=window.setInterval(loading,1000);
</script> 
falsam
Posts: 280
Joined: Mon May 05, 2014 9:49 pm
Location: France
Contact:

Re: How to draw an arc?

Post by falsam »

Draw Arc without JavaScript

Code: Select all

Declare Draw()

OpenWindow(0, 0, 0, 300, 300, "Draw Arc", #PB_Window_SystemMenu | #PB_Window_ScreenCentered) 
CanvasGadget(0, 0, 0, 300, 300)

AddWindowTimer(0, 0, 10)
BindEvent(#PB_Event_Timer, @Draw())

Procedure Draw()  
  Static EndAngle
  Protected Radius = 90
  
  ;BugFix
  If EndAngle = 360
    Radius = 95 
  Else
    Radius = 90
  EndIf
  ;End BugFix
  
  If StartVectorDrawing(CanvasVectorOutput(0))
    
    AddPathBox(135, 30, 26, 10)
    VectorSourceColor(RGBA(105, 105, 105, 255))
    FillPath()
    
    MovePathCursor(150, 150)
    AddPathCircle(150, 150, 100) 
    VectorSourceColor(RGBA(154, 205, 50, 255))
    StrokePath(3)
    
    MovePathCursor(150, 150)
    AddPathCircle(150, 150, Radius, 0, EndAngle, #PB_Path_Connected)
    
    If EndAngle <> 360 
      VectorSourceColor(RGBA(154, 205, 50, 255))
    Else
      EndAngle = 0
      VectorSourceColor(RGBA(255, 255, 255, 255))
    EndIf  
    FillPath()
    
    StopVectorDrawing()
  EndIf
  
  EndAngle + 1
EndProcedure

➽ Windows 11 - JDK 1.8 - SB 2.40 - Android 13
http://falsam.com

Sorry for my poor english
tj1010
Posts: 201
Joined: Wed May 27, 2015 1:36 pm
Contact:

Re: How to draw an arc?

Post by tj1010 »

I looked into this and you can't do pie style loaders using images because you can only get rectangles and squares from bitmaps. No pixel operations and you could only do aliased with squares and rectangles. It'd take inline SVG or canvas JS where you can do actual vector with bitmaps or pixel operations.

One old way to cheat is animated GIF(pretty good platform support) or just do the same thing GIF does and preload your frames and switch in order with a setinterval or windowtimer.


I like the GIF or frame way best, and the HTML5 canvas pixel one after those. GIF and frame-timer are surprisingly efficient with both development pipeline and the bytes and CPU.
Post Reply