-1

I have been struggling to find the center of an image(rectangle). I have following data with me:

width: w,
height: h,
position: (x,y)

My image is an object on canvas. I am using KonvaJS framework. My concern is not specific to image it's with Rect, Square as well but cause images are actually rectangle or squares and I believe that solution will be common for all. What I want to do is I need to find the center of the shape so that I can perform the desired operation. eg. I want to place the connector between a circle and image. End point of the connectors should be at the center like the way I have displayed it in image. Please let me know what should I do to achieve this. I believe it will be done by Math.atan() and Math.atan2() but don't know how can I use them. I am new to this bizarre.

enter image description here

Underflow
  • 297
  • 2
  • 11
Hitesh Kumar
  • 117
  • 4

2 Answers2

2

If the (X,Y) is at the top-left corner of the rectangle as you have drawn in the picture in your question, then the center is simply:

(X + W*0.5 , Y - H*0.5 )

Note that it is always a good practice to multiply by 0.5 instead of dividing by 2, since multiplications are much less computationaly expensive than divisions.

MAnd
  • 4,887
  • 3
  • 22
  • 42
  • I think it should not be simply like this. What I want to achieve it something like this http://gamedev.stackexchange.com/questions/14602/what-are-atan-and-atan2-used-for-in-games so that I need not be worried about whether x and y are negative or positive. – Hitesh Kumar Aug 17 '16 at 11:34
  • @Hitesh Kumar Do you mean that the rectangles can be rotated? – MAnd Aug 17 '16 at 11:38
  • it draggable. So it can be at any position. I am not sure your approach will work or not. Cause ideally we should subtract the half of diagonal from x and y rather than of half of width and height – Hitesh Kumar Aug 17 '16 at 11:41
  • 2
    @HiteshKumar It does not matter if X or Y are positive or negative, nor if the rectangle can be dragged. If the rectangle does not rotate (and if X,Y is in the top-left), then the rectangle's center will always be given by that simple formula. If the rectangle can rotate, then you will need the diagonal through some trigonometry – MAnd Aug 17 '16 at 11:47
  • Gotcha. Thanks for clarification. Now the only confusion is regarding to diagonal and dimension. which one should I use? and also please edit your answer I think we need to do (y+H0.5) rather than (y- H0.5) – Hitesh Kumar Aug 17 '16 at 11:52
  • 1
    "Note that it is always a good practice to multiply by 0.5 instead of dividing by 2, since multiplications are much less computationaly expensive than divisions." That's premature optimization. :) – Vaillancourt Aug 17 '16 at 11:52
  • 1
    @HiteshKumar Seeing the amount of requests that you have, it's probably because your question is unclear. Please edit it and improve it. – Vaillancourt Aug 17 '16 at 11:53
  • @Alexandre Vaillancourt Oh come on! That's such a simple, irresistible good practice... :) – MAnd Aug 17 '16 at 11:55
  • I'm not saying you should not do it, it's just that the rationale behind it is no longer valid. It might have been true years ago, but now you'll have so many other things that will take more of the resources that these micro optimizations might not be worth the trouble :) – Vaillancourt Aug 17 '16 at 11:58
  • @HiteshKumar That's why I said "if X,Y is in the top-left" corner of the rectangle, as in your image. If that is the case, my answer is correct: you need Y-H*0.5. Now, if the image in your question is wrong and X,Y is actually at the bottom-left corner of the rectangle, then yes you will need Y+H*0.5. – MAnd Aug 17 '16 at 12:01
  • @AlexandreVaillancourt Just kidding! But you see, of course there are more important things. The issue is: there is no such a thing as premature optimization. There is only costly vs. not costly optimizations. The costly, difficult ones, should never be done before needed, indeed, at the risk of getting in the way of the programmer. However, other simple ones as that (or e.g. storing square root of 2 in a variable for re-use) are just so easy to do while coding, so not costly, that there just isn't a good reason why not to adopt them as good practices, IMHO. But we digress... :D – MAnd Aug 17 '16 at 12:08
  • @MAnd I agree :) – Vaillancourt Aug 17 '16 at 12:10
0

width: w, height: h, position: (x,y), centre: (x + w/2, y + h/2)

Hope it helps.

lozzajp
  • 780
  • 6
  • 14