Positioning Views
Every View has an x, y position (in pixels) relative to its parent. This is exactly where the View will be rendered--unless it (or an ancestor) also has a transform. Doodle ensures that there is never a disconnect between a View's position, transform and render coordinates.
You can set a View's x, y, or position directly to move it around. These are proxies to the View's bounds, which represents its rectangular boundary relative to its parent. By default a View's position is set to 0,0, and it will only change if set explicitly or via a Layout.
import io.nacular.doodle.core.Display
import io.nacular.doodle.core.view
import io.nacular.doodle.geometry.Point
fun positioning(display: Display) {
//sampleStart
val view = view {}
val panel = view {}
view.x = 10.0 // move to [10, 0]
view.position = Point(13, -2) // reposition to [13,-2]
display += panel // panel's position is 0,0
//sampleEnd
}
This demo shows how the pointer can be used to position Views easily. In this case, we use the Resizer utility to provide simple resize/move operations. The Resizer simply monitors the View for Pointer events and updates its bounds accordingly.
import io.nacular.doodle.core.View
import io.nacular.doodle.geometry.Rectangle
import io.nacular.doodle.utils.Resizer
fun resizer(view: View) {
//sampleStart
view.apply {
bounds = Rectangle(100, 100)
Resizer(this) // monitors the View and manages resize/move
}
//sampleEnd
}
Transform views
You can change the shape of a View using a linear transform. This will change the way the View is rendered to the screen, and can even change the size of the View. But a transformed View still retains the same bounds, while its boundingBox changes with the transform. This means layouts will continue to treat the View as though nothing about it changed.
Hit detection and other behavior also works as expected for Views that have been transformed.