treeform / boxy

2D GPU rendering with a tiling atlas.
MIT License
102 stars 7 forks source link

use roundedRect with boxy drawImage #57

Closed viralpoetry closed 1 year ago

viralpoetry commented 1 year ago

Hi, please, is there a way to draw image in a rounded rect by using drawImage ?

I have seen ctx.fillRoundedRect used in the pixie, but I struggle to use it with boxy.

Thanks for a great library.

viralpoetry commented 1 year ago

I've made it work like this in a for loop for multiple images. Create mask for each image

let
        mask = newImage(mask_width.toInt, mask_height.toInt)
        paint = newPaint(SolidPaint)
        roundedRect = newPath()
paint.color = color(0.1, 0.1, 0.1, 1)
roundedRect.roundedRect(rect(0, 0, mask_width, mask_height), 10, 10, 10, 10)
mask.fillPath(roundedRect, paint)
bxy.addImage(p.filename & "-mask", mask)

display loop:

      # Apply round corners mask
      bxy.pushLayer()
      bxy.drawImage(
        grid.pictures[i].filename & "-mask",
        rect = grid.pictures[i].rect,
        tint = color(1, 0, 0, 1)
      )
      bxy.popLayer(blendMode = MaskBlend)

It's wasteful but I could not find how to scale a single mask for each picture as the rounded corners would differ.

treeform commented 1 year ago

That's about how we intended it be used.