Jump to content

HTML5 Wrong Mouse Coordinate with transform rotation DIV


aminux
 Share

Recommended Posts

I want to make a game, when you click on target, the DIV append an image in it,


When i click on the face, you can see that the DIV append a bullet image, which is good. but when you click on the right arm, the position of the bullet is wrong. it's because the arm is transform: rotate(25deg); with CSS3.


this is my screenshot http://i.imgur.com/oZ5VnD6.png


How can i determine the right position of the bullets when i click on the arm ?


thank you


Link to comment
Share on other sites

Thank you for your help.

 

My real question is not how to put the bullet, i put them with append jquery, but the position left and top are wrong.

so, if i use a div for bullets what will be the good positions left and top

 

as you can see in my example, when you click on the face, it works perfectly, but when you click on the right arm, it make the bullet in wrong position.

because i put the bullet in a rotating Div. this is my screenshot http://i.imgur.com/oZ5VnD6.png

 

 

is there something that i have to calculate, for getting the good positions, like sinus or cosinus things ?

 

Thank you 

Link to comment
Share on other sites

  • 2 weeks later...

 Here is a modified version of what I do in my engine.

var rotatedXY = function(obj) {	var x = obj.x;	var y = obj.y;	var sin = Math.sin(obj._parent.angle);	var cos = Math.cos(obj._parent.angle);	obj._orbitX = (x * cos) - (y * sin);	obj._orbitY = (x * sin) + (y * cos);}

Something like the  obj._orbitX, obj._orbitY values are what your looking for.

Link to comment
Share on other sites

  • 1 month later...
	obj._orbitX = (x * cos) - (y * sin);	obj._orbitY = (x * sin) + (y * cos);

Just to add to this, if you're wondering where this formula came from, look up 2D rotation matrices. If you want to be able to deal with arbitrary transforms (taking scale, skew, etc. into consideration) it might be instructive to look at the source code for the globalToLocal method of the DisplayObject class of EaselJS.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...