Text/image on roImagecanvas

Archived
1

Hey All,

Got couple of questions regarding drawing text/image on top of roImagecanvas.

  1. How to adjust the line height of a text element?
    For example, my text wraps when it exceeds the targetRect width, but seems like the lines are too close to each other. Couldn’t find a lineHeight attribute on TextAttrs on Content-Metadata

  2. How to set the width and height of an image dynamically based on its actual dimension?
    When I hard code those values, some images stretch to fill the specified area. Im trying to maintain the width:height ratio.

Thanks!

2

I’m not sure about the first question.

This should handle the second question:

Sub Main ()

    imageDimensions = getImageDimensions ("pkg:/images/image.jpg")
    Print imageDimensions

    scaledDimensions = getScaledDimensions (200, 300, imageDimensions.w, imageDimensions.h)
    Print scaledDimensions

End Sub

' Image must be a local file
Function getImageDimensions (imageUrl As String) As Object
    dimensions = {w: 0, h: 0}
    bitmap = CreateObject ("roBitmap", imageUrl)
    If Type (bitmap) = "roBitmap"
        dimensions.w = bitmap.GetWidth ()
        dimensions.h = bitmap.GetHeight ()
    EndIf
    Return dimensions
End Function

' Fit within destination area, preserving source image aspect ratio
Function getScaledDimensions (destW As Integer, destH As Integer, srcW As Integer, srcH As Integer) As Object
    w = destW
    h = destH
    If srcW > 0 And srcH > 0 And destW > 0 And destH > 0
        ' Get the original image's aspect ratio
        aspectRatio = srcW / srcH
        ' Scale width first
        w = Int (destH * aspectRatio)
        ' If scaled width exceeds destination width then scale height
        If w > destW
            w = destW
            h = Int (w / aspectRatio)
        Else
            h = destH
        EndIf       
    EndIf
    Return {w: w, h: h}
End Function
3

One thing I noticed is that roImageCanvas will download the images automatically with a remote url. In this solution you provided, we need to manually download the images and create a bitmap out of it, and then get the width and height.

May be, this is the only solution to this?

4

“sonnykr” wrote:
One thing I noticed is that roImageCanvas will download the images automatically with a remote url. In this solution you provided, we need to manually download the images and create a bitmap out of it, and then get the width and height.

May be, this is the only solution to this?
If you need to check the dimensions of the image, you’ll have to download it first. There’s no way around that, unless you specify the exact dimensions in whatever feed/API that’s providing the URLs. You could use the roTextureManager to download and create the bitmap without needing to use roUrlTransfer, if you didn’t want to manage the download yourself, but I don’t think that’ll save you much in this instance. There is no built-in “maintain aspect ratio” function of the image canvas, though it would be a handy feature to have.

To answer your first question, there’s also no (documented?) way to adjust the line height on the image canvas. I think your only option there would be to programmatically wrap the text yourself.

5

Gotcha! Thanks Belltown and TheEndless

6

If your text lines are too close together when they wrap, make sure the TargetRect that contains them is big enough or use a smaller font size. You could also try experimenting with the VAlign TextAttrs property, e.g. VAlign: “Top”. I was able to get my text lines to wrap and space effectively without manually wrapping the lines in the TV grid listings in the What’s On Channel. It’s been a long while since I wrote the code, but I do remember running into a similar problem and fixing it with VAlign.