CODEWITHSUNDEEP
javascripthtmlcanvasimage
Saturnix
Saturnix

Reputation: 10564

Resizing images and keep them in original position with javascript

I've been struggling the whole day trying to figure our how to resize image and compute proportions. I've mostly failed!

To describe my problem, sorry! But I can't find any words... So here's this fiddle: http://jsfiddle.net/Saturnix/TkPX5/

As you can see there's an image with a couch and a sheep (if you don't: try resizing the browser window).

Now, keep resizing your browser window: you should see both the sheep and the couch get resized. I just want the damn sheep to stay on the couch, in a fixed position, like if it was hardcoded in the couch image. No matter the window dimension, the sheep must stay on the couch.

No, I cannot use Photoshop and paste the sheep over it.

In the final project, instead of the couch I will have an interface and the sheep will be a knob or a button.

If you want to try yourself, scroll the javascript until you get to the bottom where you'll see a "TODO" comment.

There are two lines of code which change the sheep position: every other parameter you need to compute those are already in the code above (or at least I hope so!). I just miss the formula.

I've been able to resize the sheep dynamically and proportional to the couch: how can I do the same with its position? I've tried !EVERYTHING! but nothings seems to work :'(

Thank you very much in advance!

edit: seems like the fiddle link was wrong. Fixed!

Upvotes: 1

Views: 280

Answers (1)

gilly3
gilly3

Reputation: 91497

Rather than setting x and y to a fixed value, you need to adjust them relative to the new height and width of the the image.

x = masterX + (50 * w / imm1.width);
y = masterY + (235 * h / imm1.height);

http://jsfiddle.net/TkPX5/12/

Upvotes: 1

Related Questions