Draw a letter within a viewbox



  • I have the feeling this should be easy, but I can't find a way to do this:

    Draw a letter to fill up a certain viewbox (which I can change).

    What I've tried:

    • Load a SVG, place it as an image (you can't load an SVG)
    • Load a PDF, place it as an image (you can't resize an image?)
    • Draw the letter as a path (you can't resize the path?)

    Any ideas? Thanks in advance!



  • if you know the size of the box, and the size of the letter, you can calculate a scaling factor between the two:

    # get lettershape as bezier
    B = BezierPath()
    B.text('a', (0, 0), fontSize=1000, font='Georgia')
    
    # get lettershape bounding box
    left, bottom, right, top = B.bounds()
    
    # calculate lettershape width & height 
    letterWidth  = right - left
    letterHeight = top - bottom
    
    # define box width & height
    boxWidth, boxHeight = 800, 400
    
    # calculate scaling factors
    factorHeight = boxHeight / letterHeight
    factorWidth  = boxWidth  / letterWidth
    
    # draw box
    fill(1, 1, 0)
    rect(0, 0, boxWidth, boxHeight)
    
    # apply scaling factors
    scale(factorWidth, factorHeight)
    
    # shift shape to origin position
    translate(-left, -bottom)
    
    # draw scaled lettershape
    fill(1, 0, 0)
    drawPath(B)
    


  • Perfect, exactly what I need.

    Didn't know about the 'bounds' function.

    Thanks! Also for the code-excerpt. Works perfectly.


  • admin

    @gferreira solution also works for images (and also where the source is a pdf)

    use w, h = imageSize(pathToSource) to calculate the size of a given image. see imageSize docs

    good luck



  • @frederik Thanks. Will have a look which type gives the best result. To use the actual font sounds like a good choice though. In Processing (where I made this animation first) I used SVG, but mainly because it's almost impossible to work with type in Processing. Curious which one is faster also.