How to get the center of an image

Getting Started Newbie Questions
#1

I want to draw some text on each image, all images are the same size, problem is even if I could adjust 1 text to be so close to the center of the image, other texts won’t look in the center because of their width, height…

so I want a way to get the center of an image depending on the width, height of the text…

EDIT: Images widht, height = 200, 200

#2

As long as you use default anchor points, the  <x,y> position of all display objects (circles, rects, images, imageRects) is their center. 

Try this:

local tmp = display.newCircle( 200, 200, 100 ) tmp:setFillColor(1,0,0) local tmp2 = display.newText("This is already centered.", tmp.x, tmp.y, native.systemFont, 16 )
#3

This tutorial talks about anchor points in case you’re not using default anchors:

https://coronalabs.com/blog/2013/10/15/tutorial-anchor-points-in-graphics-2-0/

#4

Yes the example you provided works, but I forgot to mention that the images are all in a scrollView…

so setting the text x,y at the same x,y of the image doesn’t work…

here is my code…

 rowTable[imageText] = {text, image} -- rowTable[imageText].image = display.newImageRect( imagePath, 200, 200 ) rowTable[imageText].image.anchorX = 0 rowTable[imageText].image.anchorY = 0 rowTable[imageText].image.x = 45 rowTable[imageText].image.y = yOffset -- rowTable[imageText].text = display.newText(imageText, 45, yOffset, native.systemFontBold, 20) rowTable[imageText].text.anchorX = 0 rowTable[imageText].text.anchorY = 0 rowTable[imageText].text.x = 45 rowTable[imageText].text.y = yOffset -- scrollView:insert(rowTable[imageText].image) scrollView:insert(rowTable[imageText].text)
#5

As long as the image and the text are in the same group (a scroll view uses a group as the container), the code I provided will work. 

Set the text <x, y>  to the image <x, y> after you insert them both into the scrollview and you should be good to go.

scrollView:insert(rowTable[imageText].image) scrollView:insert(rowTable[imageText].text) rowTable[imageText].text.x = rowTable[imageText].image.x rowTable[imageText].text.y = rowTable[imageText].image.y
#6

Actually the above code won’t quite solve your problem because you’re settings anchors for the text and the image…

I did mention that if you’re NOT using default anchors, you need to account for it.  In your case, that would work like this.

scrollView:insert(rowTable[imageText].image) scrollView:insert(rowTable[imageText].text) -- I'm way to efficient (lazy) to type this all long hand so... local img = rowTable[imageText].image local txt = rowTable[imageText].text txt.x = img.x + img.contentWidth/2 - txt.contentWidth/2 txt.y = img.y + img.contentHeight/2 - txt.contentHeight/2

Tip: Read these docs (see properties) and familiarize yourself with anchors, content width/height, etc.  This will be all clear then.

https://docs.coronalabs.com/daily/api/type/DisplayObject/index.html

#7

Yes thats working perfectly, I will read these docs you provided :), Thanks again

#8

As long as you use default anchor points, the  <x,y> position of all display objects (circles, rects, images, imageRects) is their center. 

Try this:

local tmp = display.newCircle( 200, 200, 100 ) tmp:setFillColor(1,0,0) local tmp2 = display.newText("This is already centered.", tmp.x, tmp.y, native.systemFont, 16 )
#9

This tutorial talks about anchor points in case you’re not using default anchors:

https://coronalabs.com/blog/2013/10/15/tutorial-anchor-points-in-graphics-2-0/

#10

Yes the example you provided works, but I forgot to mention that the images are all in a scrollView…

so setting the text x,y at the same x,y of the image doesn’t work…

here is my code…

 rowTable[imageText] = {text, image} -- rowTable[imageText].image = display.newImageRect( imagePath, 200, 200 ) rowTable[imageText].image.anchorX = 0 rowTable[imageText].image.anchorY = 0 rowTable[imageText].image.x = 45 rowTable[imageText].image.y = yOffset -- rowTable[imageText].text = display.newText(imageText, 45, yOffset, native.systemFontBold, 20) rowTable[imageText].text.anchorX = 0 rowTable[imageText].text.anchorY = 0 rowTable[imageText].text.x = 45 rowTable[imageText].text.y = yOffset -- scrollView:insert(rowTable[imageText].image) scrollView:insert(rowTable[imageText].text)
#11

As long as the image and the text are in the same group (a scroll view uses a group as the container), the code I provided will work. 

Set the text <x, y>  to the image <x, y> after you insert them both into the scrollview and you should be good to go.

scrollView:insert(rowTable[imageText].image) scrollView:insert(rowTable[imageText].text) rowTable[imageText].text.x = rowTable[imageText].image.x rowTable[imageText].text.y = rowTable[imageText].image.y
#12

Actually the above code won’t quite solve your problem because you’re settings anchors for the text and the image…

I did mention that if you’re NOT using default anchors, you need to account for it.  In your case, that would work like this.

scrollView:insert(rowTable[imageText].image) scrollView:insert(rowTable[imageText].text) -- I'm way to efficient (lazy) to type this all long hand so... local img = rowTable[imageText].image local txt = rowTable[imageText].text txt.x = img.x + img.contentWidth/2 - txt.contentWidth/2 txt.y = img.y + img.contentHeight/2 - txt.contentHeight/2

Tip: Read these docs (see properties) and familiarize yourself with anchors, content width/height, etc.  This will be all clear then.

https://docs.coronalabs.com/daily/api/type/DisplayObject/index.html

#13

Yes thats working perfectly, I will read these docs you provided :), Thanks again