Fill a primitive object with a bitmap

Solar2D Daily Builds and Public Releases
#1

I would like to be able to fill a background out in the same way that css does using background repeat.

A use case I have at the moment is a scroll view that is dynamic in height according to it’s contents. The contents sit on a background rectangle that also adjusts with the content. This rectangle is just a newRect that is white, I would like to fill it with a repeating background of a paper texture.

I am trying to write my own function that does this but it would just be easier for it to be included by you guys :wink:

I imagine it could be done with a new addition to newRect like this:

display.newRect( [parentGroup,] left, top, width, height, bitmapFillImageLink )

Also would be nice to work with dynamic resolution.

Cheers! [import]uid: 69160 topic_id: 14022 reply_id: 314022[/import]

#2

Great idea, +1. [import]uid: 8692 topic_id: 14022 reply_id: 51665[/import]

#3

The function I wrote to achieve this is below.

Please note that I only needed it to fill out vertically but I am sure it could be adapted easily to work any other way.

[lua]–[[Make sure to define a rectangle the height of the content above this function. in my case it is called detailBG

there is also a displayGroup called detailScreenScroll defined above this.

And finally there is an image called detailBgTop at the top of the content group defined above this]]–

local function tileBG()

local paper = display.newImageRect(“bg-repeat.png”, 320, 73)
paper:setReferencePoint(display.TopCenterReferencePoint)
paper.x = (display.contentWidth / 2)
paper.y = detailBgTop.height
detailScreenScroll:insert(2, paper)

local maxHeight = math.ceil(detailBG.height / paper.height)-- getting the total amount of images we need to fill the background using the total height divided by the height of each background image

paper:removeSelf()–removing the original image as we have the height details we need from it.

bgInstance = {}–setting up table

maxBg = math.ceil(maxHeight)–setting the max background height

for i = 1, maxBg do
print(i)–printing us how many images we need to fill the background
bgInstance[i] = display.newImageRect(“bg-repeat.png”, 320, 73)
–bgInstance[i]:setReferencePoint(display.TopCenterReferencePoint)
detailScreenScroll:insert(1, bgInstance[i])–inserting at the back of the displayGroup (because it’s a background duh!)
bgInstance[i].x = display.contentWidth / 2
bgInstance[i].y = bgInstance[i].height * i
– the following if statement was because there was a bottom image I was using at the end of the repeated background if you dont need this then comment it out
if (i == maxBg) then
bgInstance[maxBg]:setReferencePoint(display.TopCenterReferencePoint)
bgInstance[maxBg].y = (detailBgBot.y - bgInstance[maxBg].height)
end
end
end

tileBG()[/lua]

I just had a few drinks at the local pub… so if you are having trouble getting this to work, even after defining extras described at the start comments let me know :wink:

Hope this helps someone needing a simple way to do this, and it works for retina displays too :slight_smile: [import]uid: 69160 topic_id: 14022 reply_id: 51681[/import]