ABMCanvas is a HTML5 Canvas with Dragging possibilities. All drawing is done with ABMVCanvasObjects and supports almost all methods described in W3Schools.
// load images we will need in the canvases page.AddCanvasImage("background", "../images/background.jpg") page.AddCanvasImage("kyle", "../images/kyle.png") page.AddCanvasImage("kenny", "../images/kenny.png") // create canvas Dim canvas1 As ABMCanvas canvas1.Initialize(page, "canvas1", ABM.COLOR_BLACK, ABM.INTENSITY_NORMAL,1024,569, True) // create background Dim bg As ABMCanvasObject bg.InitializeAsRectangle(page, "bg",0,0,1024,569,False) bg.drawImage("background", 0,0) canvas1.AddObject(bg)
Sub btn_Clicked(Target As String) Dim canvas1 As ABMCanvas = page.Component("canvas1") Dim Kyle As ABMCanvasObject Dim x As Int = Rnd(0,1024-109) Dim y As Int = Rnd(0,569-136) kyleTeller=kyleTeller+1 Kyle.InitializeAsRectangle(page, "kyle" & kyleTeller, x, y, 109,136, True) Kyle.drawImage("kyle", 0,0) canvas1.AddObject(Kyle) canvas1.refresh // IMPORTANT End Sub Sub canvas1_ObjectUp(objectId As String) myToastId = myToastId + 1 Dim ChangedTo As String Dim canvas1 As ABMCanvas = page.Component("canvas1") Dim Kyle As ABMCanvasObject = canvas1.GetObject(objectId) If Kyle.Width = 109 Then //changing the size to the new picture Kyle.SetSize(98,129) Kyle.Clear Kyle.drawImage("kenny",0,0) Kyle.Refresh // IMPORTANT ChangedTo = "Kenny" Else // changing the size to the new picture Kyle.SetSize(109,136) Kyle.Clear Kyle.drawImage("kyle",0,0) Kyle.Refresh // IMPORTANT ChangedTo = "Kyle" End If canvas1.Refresh // IMPORTANT! page.ShowToast("toast" & myToastId, "toastred", objectId & " changed to " & ChangedTo & "!", 5000) End Sub
An example of the basic drawing functionalities on the ABMCanvas.
// the clock canvas Dim canvas2 As ABMCanvas canvas2.Initialize(page, "canvas2", ABM.COLOR_BLACK, ABM.INTENSITY_NORMAL, 300,300, False) Dim clock As ABMCanvasObject = BuildClock canvas2.AddObject(clock) page.Cell(6,1).AddComponent(canvas2)
// check out the tutorial on W3Schools.com: http://www.w3schools.com/canvas/canvas_clock.asp Sub BuildClock() As ABMCanvasObject Dim clock As ABMCanvasObject Dim Radius As Double = 150 clock.InitializeAsRectangle(page, "clock", 0,0,300,300, True) Radius = Radius * 0.9 // draw face clock.translate(150,150) clock.beginPath clock.arc(0,0,Radius, 0, 2*cPI) clock.fillStyleColor("#FFFFFF") clock.fill clock.strokeStyleRadialGradient(0,0,Radius*0.95,0,0,Radius*1.05, Array As Double(0,0.5,1), Array As String("#333", "white", "#333")) clock.lineWidth(Radius*0.1) clock.stroke() clock.beginPath clock.arc(0, 0, Radius*0.1, 0, 2*cPI) clock.fillStyleColor("#333") clock.fill //draw numbers clock.font("arial", Radius*0.15) clock.textBaseline(ABM.CANVAS_TEXTBASELINE_MIDDLE) clock.textAlign(ABM.CANVAS_TEXTALIGN_CENTER) Dim ang As Double For num = 1 To 12 ang = num * cPI / 6 clock.rotate(ang) clock.translate(0, -Radius*0.85) clock.rotate(-ang) clock.fillText("" & num, 0, 0) clock.rotate(ang) clock.translate(0, Radius*0.85) clock.rotate(-ang) Next // draw time Dim hour As Double = DateTime.GetHour(DateTime.Now) Dim minute As Double = DateTime.GetMinute(DateTime.Now) Dim second As Double = DateTime.GetSecond(DateTime.Now) hour = hour mod 12 hour = (hour*cPI/6)+(minute*cPI/(6*60))+(second*cPI/(360*60)) BuildHand(clock, hour, Radius*0.5, Radius*0.07) minute=(minute*cPI/30)+(second*cPI/(30*60)) BuildHand(clock, minute, Radius*0.8, Radius*0.07) second=(second*cPI/30) BuildHand(clock, second, Radius*0.9, Radius*0.02) Return clock End Sub Sub BuildHand(clock As ABMCanvasObject, pos As Int, length As Double, width As Double) clock.beginPath clock.lineWidth(width) clock.lineCap(ABM.CANVAS_LINECAP_ROUND) clock.moveTo(0,0) clock.rotate(pos) clock.lineTo(0, -length) clock.stroke clock.rotate(-pos) End Sub
ABMCanvas can be used to build your own controls.
// the control canvas Dim canvas3 As ABMCanvas canvas3.Initialize(page, "canvas3", ABM.COLOR_TRANSPARENT, ABM.INTENSITY_NORMAL, 1024,100, True) Dim controlBar As ABMCanvasObject = BuildControlBar canvas3.AddObject(controlBar) Dim controlCircle As ABMCanvasObject = BuildControlCircle canvas3.AddObject(controlCircle)
// the control canvas Sub BuildControlBar() As ABMCanvasObject Dim cont As ABMCanvasObject cont.InitializeAsRectangle(page, "contbar", 0,0,1024,100,False) cont.beginPath cont.lineWidth(5) cont.lineCap(ABM.CANVAS_LINECAP_ROUND) cont.strokeStyleColor("#888888") cont.moveTo(20,47) cont.lineTo(1004,47) cont.stroke Return cont End Sub Sub BuildControlCircle() As ABMCanvasObject Dim cont As ABMCanvasObject cont.InitializeAsCircle(page, "contcirc", 50,48,40, True) // here we restrict the movement of the control so it only can me moved on the X-Axis cont.SetDragZone(50,48,924,1) cont.beginPath cont.arc(0,0,40, 0, 2*cPI) cont.fillStyleColor("#000000") cont.fill cont.save cont.translate(-40,-40) cont.drawImage3("eric", 0,0,147,135,5,5, 70,64) cont.closePath cont.restore Return cont End Sub Sub canvas3_ObjectUp(objectId As String) // calculate value from position Dim canvas1 As ABMCanvas = page.Component("canvas3") Dim Eric As ABMCanvasObject = canvas1.GetObject(objectId) Dim Pos As ABMPoint = Eric.GetPosition If Pos <> Null Then // map to 0 to 100: (our position - the dragzone left)/(dragzone width)*100 Dim value As Int = (Pos.x-50)/924*100 myToastId = myToastId + 1 page.ShowToast("toast" & myToastId, "toastred", "Eric is at value " & value, 5000) End If End Sub