Forum Discussion

crawfishmedia's avatar
crawfishmedia
Binge Watcher
12 years ago

Rotating image in ImageCanvas

Hi all, Can someone please tell me why rotating an image in Image Canvas is so difficult? Based on the documentation this should work. What am I missing? The image is a PNG. Thanks.
canvasItems = []
photo_x = 600
photo_y = 300
photo_h = 300
photo_w = 300
photo_w_t = photo_w / 2
photo_h_t = photo_h / 2
rotate = 90.0
canvasItems.Push({
url:URLtoImage
TargetRect:{ x:photo_x, y:photo_y, w:photo_w, h:photo_h }
TargetTranslation:{ x:photo_w_t, y:photo_h_t }
TargetRotation:rotate
})
canvas = CreateObject("roImageCanvas")
port = CreateObject("roMessagePort")
canvas.SetMessagePort(port)
canvas.AllowUpdates(true)
canvas.SetRequireAllImagesToDraw(false)
canvas.SetLayer(0, {Color:"#FF000000", CompositionMode:"Source"})
canvas.SetLayer(1, canvasItems)
canvas.Show()
Roku Developer Program

1 Reply

  • renojim's avatar
    renojim
    Community Streaming Expert
    12 years ago
    It's been a while since I did any rotations, but as I recall you generally want to rotate around the center point of the image and then translate it the position on the screen where you want it to appear. This means you have to shift the image down and left by half the height and width putting the 0,0 point at the center of the image. Here's the code I used for the Video Poker screensaver:
    x = rnd(dsize.w)
    y = rnd(dsize.h)
    r = rnd(180) - 90
    item = [{ url:url,TargetRect:{x:Int(-cardw/2), y:Int(-cardh/2), w:cardw, h:cardh},TargetRotation:r,TargetTranslation:{x:x,y:y}}]
    canvas.SetLayer(1,item)

    Hope this helps!
    -JT