How to use object.fill properly? Why my image in a circle object is skewed?

Solar2D Advanced Graphics
#1

I am trying to fill a circle object by an image,

local circleObj = display.newCircle(x, y, w) circleObj.fill = { type="image", filename=params.filename, baseDir = params.baseDirectory }

Please take a look at the attached screenshot, you can see there are circles but the images inside them are skewed.

My questions are:

(1) Is there requirement for the image size? For example, if the circle has a radius 100, does the image need to have width/height = 100? 

(2) What if the image width/height is larger/smaller than 100?

(3) Can I control the filled image size by code?

(4) My images are downloaded from the Internet, the size is unknown. Does it mean it cannot be used here?

(5) Why the images are skewed (as the screenshot shows) ?

Thanks.

#2

I found out why they are skewed, it’s because I had a gradient fill earlier. If I remove the gradient, it’s ok now.

But I still have some more questions about object.fill,

(1) The image has to be 1:1 width/height ratio? If the image is not 1:1, the image filled is stretched. How to resolve this?

(2) Is it possible to control the image inside the circle? (scale, position, etc.)

(3) If there is a previous gradient, how to remove it before fill an image?

#3

As far as I know:

1a) Yes, if you want the image to maintain aspect ratio

1b) cannot be scaled

  1. No 

  2. I would’ve assumed that setting object.fill automatically removes the previous fill

(EDIT: You *can* scale and skew image fills. See post further down)

#4

It’s really bad if the aspect ratio cannot be changed, the images are all stretched.

I tried to use capture.save to save a container that has a 1:1 aspect ratio, but image saved is still not 1:1… does container has effect in capture.save()?

#5

I was just about to suggest using a container. I thought that it should work…

#6

I use display.captureBounds() and save it to a file to solve the aspect ratio problem for my case.

It’s too bad I can’t do further operations for the filled image…

I saw something in this document: http://docs.coronalabs.com/api/type/BitmapPaint/index.html

What do these things mean?

Properties (Inherits properties from Paint) [paint.rotation][api.type.Paint.rotation] [paint.scaleX][api.type.Paint.scaleX] [paint.scaleY][api.type.Paint.scaleY] [paint.x][api.type.Paint.x] [paint.y][api.type.Paint.y]
#7

I haven’t seen those before!

They do look worth investigating.

#8

OK. You can do things like this!

circleObj.fill = {type="image", filename="images/test/paper.jpg"}; circleObj.fill.rotation=10; circleObj.fill.scaleX=5; circleObj.fill.scaleY=5.5;
#9

@ingemar

Thanks for the code to show me how to do it. It works!

Do you think I can do the transitional distortion effect on this circle object like this tutorial shows:

http://www.coronalabs.com/blog/2013/10/31/tutorial-2-5d-perspective-in-graphics-2-0/

I tried a bit with the code, but I can’t.

#10

I found out why they are skewed, it’s because I had a gradient fill earlier. If I remove the gradient, it’s ok now.

But I still have some more questions about object.fill,

(1) The image has to be 1:1 width/height ratio? If the image is not 1:1, the image filled is stretched. How to resolve this?

(2) Is it possible to control the image inside the circle? (scale, position, etc.)

(3) If there is a previous gradient, how to remove it before fill an image?

#11

As far as I know:

1a) Yes, if you want the image to maintain aspect ratio

1b) cannot be scaled

  1. No 

  2. I would’ve assumed that setting object.fill automatically removes the previous fill

(EDIT: You *can* scale and skew image fills. See post further down)

#12

It’s really bad if the aspect ratio cannot be changed, the images are all stretched.

I tried to use capture.save to save a container that has a 1:1 aspect ratio, but image saved is still not 1:1… does container has effect in capture.save()?

#13

I was just about to suggest using a container. I thought that it should work…

#14

I use display.captureBounds() and save it to a file to solve the aspect ratio problem for my case.

It’s too bad I can’t do further operations for the filled image…

I saw something in this document: http://docs.coronalabs.com/api/type/BitmapPaint/index.html

What do these things mean?

Properties (Inherits properties from Paint) [paint.rotation][api.type.Paint.rotation] [paint.scaleX][api.type.Paint.scaleX] [paint.scaleY][api.type.Paint.scaleY] [paint.x][api.type.Paint.x] [paint.y][api.type.Paint.y]
#15

I haven’t seen those before!

They do look worth investigating.

#16

OK. You can do things like this!

circleObj.fill = {type="image", filename="images/test/paper.jpg"}; circleObj.fill.rotation=10; circleObj.fill.scaleX=5; circleObj.fill.scaleY=5.5;
#17

@ingemar

Thanks for the code to show me how to do it. It works!

Do you think I can do the transitional distortion effect on this circle object like this tutorial shows:

http://www.coronalabs.com/blog/2013/10/31/tutorial-2-5d-perspective-in-graphics-2-0/

I tried a bit with the code, but I can’t.

#18

Is there any way to fill a circle with an image without pro subscription?

#19

Wouldn’t you be able to do that with a circular mask?

#20

Is there any way to fill a circle with an image without pro subscription?