Drawing

The canvas used by the mini-app framework supports exactly the same operations as the ImageCanvas described in the drawing section (with one exception: there is no done() method).

So we can easily translate our drawing example into a mini-app—it looks like this: (drawing.kt):

//
// Drawing and toast
//

import org.otfried.cs109.Context
import org.otfried.cs109.MiniApp

import org.otfried.cs109.Canvas
import org.otfried.cs109.Color
import org.otfried.cs109.DrawStyle

fun draw(g: Canvas) {
  // clear background
  g.clear(Color.WHITE)
  
  // draw two filled circles
  g.setColor(Color.RED)
  g.drawCircle(50.0, 50.0, 20.0)  // FILL is the default
  g.setColor(Color.ORANGE)
  g.drawCircle(250.0, 400.0, 20.0)
  
  // draw an unfilled circle with a pen of width 3
  g.setColor(Color.MAGENTA)
  g.setLineWidth(3.0)
  g.drawCircle(415.0, 50.0, 15.0, DrawStyle.STROKE)
    
  // draw a filled and an unfilled Rectangle
  g.setColor(Color.CYAN)
  g.drawRectangle(20.0, 400.0, 50.0, 20.0, DrawStyle.FILL)
  g.drawRectangle(400.0, 400.0, 50.0, 20.0, DrawStyle.STROKE)
  
  // draw a line
  g.setLineWidth(1.0)   // reset to default
  g.setColor(Color(0, 0, 255)) // same as Color.BLUE
  g.beginShape()
  g.moveTo(50.0, 50.0)
  g.lineTo(250.0, 400.0)
  g.drawShape(DrawStyle.STROKE)
  
  // draw a non-convex quadrilateral:
  g.save()              // save current coordinate system
  g.translate(360.0, 260.0) // move origin to here
  g.rotate(-30.0)           // rotate 30 degrees counter-clockwise
  g.beginShape()
  g.moveTo(0.0, 0.0)
  g.lineTo(30.0, -40.0)
  g.lineTo(60.0, 0.0)
  g.lineTo(30.0, -100.0)
  g.closePath()
  g.drawShape()
  g.restore()           // restore current coordinate system
  
  // draw some text
  g.setColor(Color(0, 128, 0)) // a darker green
  g.setFont(20.0, "Batang")
  g.drawText("Hello World!", 155.0, 225.0)
  g.drawText("안녕 하세요", 175.0, 245.0)
}
  
class Main(val ctx: Context) : MiniApp {
  init {
    ctx.setTitle("Drawing demo")
    ctx.onTap { x, y -> ctx.toast("You are tickling me!") }
  }

  override fun onDraw(canvas: Canvas) {
    draw(canvas)
  }
}

Compile it

$ ktc-dex drawing.kt

and try it, both with the emulator (using kt-emulator drawing.jar) and on your phone.

As a bonus, we have added a tap handler: When you tap on the screen on your phone (or click with the mouse in the emulator), a message will appear for a short time and then disappear again.

This kind of message is called a toast, it is generated by the toast method of the Context object. To react to the taps, we have installed a tap handler by calling onTap during the construction of our Main class: it tells the mini-app framework what to do when the user taps on the screen. The argument to onTap is a function object, it is called for every tap, with the x and y coordinates of the tap.