0

First of all, let me quickly explain why I brought this up despite similar question here: Canvas rotate from bottom center image angle?

All the information I have seen so far is concerned with javascript embedded in html markup. I do not know whether this information would suffice for someone more experienced than I, but I know very little javascript and html. I do have a little experience in a lot of scripting languages however.

My problem is that I have a .js file that takes an object, i, and sets i.image to a png image from a url (say example.com/pic.png). I want to add a few lines of code that first rotates the image by x degrees or radians (I do not care which, I can always convert) first, then sets it to i.image. So: image="example.com/pic.png"; i.image=MagicRotateFunction(image,45);

I just have no idea what MagicRotateFunction would be.

Community
  • 1
  • 1
Alex Eftimiades
  • 2,527
  • 3
  • 24
  • 33
  • Where does your javascript run, if not on a HTML page in the browser? Do you use Node.js (serverside) or WSH? – Bergi Jul 19 '12 at 23:56
  • 1
    the easiest way is for you to checkout css transfomations, using the rotate function: check an example here http://davidwalsh.name/css-transform-rotate – Ricardo Garza V. Jul 19 '12 at 23:57
  • Node.js (serverside) I think. I am editing a .js file and uploading it up to the server. I really do not know from what file(s) the html markup is being generated. It is a file that makes a google maps map and I want to rotate the markers so I can display several markers on the same location. – Alex Eftimiades Jul 19 '12 at 23:59
  • As for the css transformations, how do I go about embedding this in a .js file? I am trying to limit the file I have to edit to that .js file because I think tracking down the mechanism of transforming an icon into a marker on a google map on a wiki site would be a lot more complex. – Alex Eftimiades Jul 20 '12 at 00:01

1 Answers1

0

If you're interested in doing CSS transformations in a .js file, try this:

i.src = "http://maps.google.com/mapfiles/marker.png";
i.style.WebkitTransform = "rotate(45deg)";
i.style.MozTransform = "rotate(45deg)";
i.style.OTransform = "rotate(45deg)";
i.style.msTransform = "rotate(45deg)";
i.style.transform = "rotate(45deg)";

Sources:

Community
  • 1
  • 1
Andrew
  • 2,770
  • 1
  • 22
  • 29