SpiderBasic

Posted: **Thu Jan 05, 2017 2:49 pm**

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

Posted: **Wed Jan 11, 2017 5:35 pm**

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

Posted: **Wed Jan 11, 2017 7:06 pm**

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

Posted: **Wed Jan 11, 2017 9:48 pm**

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>

Posted: **Thu Jan 12, 2017 12:16 am**

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

Posted: **Sun Jan 15, 2017 8:31 am**

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.

SpiderBasic

How to draw an arc?

How to draw an arc?

Re: How to draw an arc?

Re: How to draw an arc?

Re: How to draw an arc?

Re: How to draw an arc?

Re: How to draw an arc?