Running with Shoes – Transform
This tutorial describes some of the basic graphic capabilities of the Shoes Ruby-based mini-GUI toolkit.
Working with complicated graphics, it is often a good idea to work around a given point of origin and then move, rotate, or scale the image as required. Like many GUI toolkits, Shoes origin is located at the top left corner of the canvas.
Rotate
You can pass a integer degree to the rotate method to rotate the canvas that many degrees. The canvas will rotate counter clockwise around the the top left corner. Also note that the degrees it rotates increments with each call from its original position, meaning that if you call rotate one degree twice the canvas would be rotate 2 degrees. Basically, the rotate method rotates the canvas n degrees counter clockwise and calling rotate again will move the canvas a few degrees more.
Translate
The translate method moves the whole canvas to a xy coordinate. You can basically move the whole canvas up, down, right, or left. Again, the final location of the canvas is based on the sum of the translations. Each translation is based on the current position of the canvas.
Scale
If you want to increase the image by a factor of 2 you can use the scale method. The scale takes in a decimal value, for example 0.5 will shrink the image in half and 2.0 will double the size of the image. Again, much like rotate and translate, each time you scale an image it will do so from the current size, not the original size.
Skew
The skew method stretches the canvas in the x and y direction.
Example – Rotating Star
Putting what we have learned in an example, we can create a triangle, translate it to the center of the canvas, and have it rotate around that point.
[source:ruby]
Shoes.app :width => 600, :height => 500 do
# Move canvas to center of screen
translate width/2, height/2
animate(24) do
clear do
# Rotate one degree at each frame
rotate 1
# Scale the image up or down
scale((0.8..1.2).rand)
# draw triangle…
star 10, 10, 3
end
end
end
[/source]
There are more Shoes GUI tutorials and code samples here.
Technorati Tags: shoes, gui, tookit, ruby, ui, graphics, gradient, color