调整图像大小并使用 javascript 将它们保持在原始位置答案

【问题标题】：Resizing images and keep them in original position with javascript调整图像大小并使用 javascript 将它们保持在原始位置
【发布时间】：2012-10-03 08:29:12
【问题描述】：

我整天都在苦苦思索如何调整图像大小和计算比例。我几乎都失败了！

描述我的问题，对不起！但我找不到任何词......所以这是这个小提琴： http://jsfiddle.net/Saturnix/TkPX5/

如您所见，有一张沙发和一只羊的图片（如果没有：请尝试调整浏览器窗口的大小）。

现在，继续调整浏览器窗口的大小：您应该会看到羊和沙发都调整了大小。我只想让那只该死的羊留在沙发上，固定位置，就像它在沙发图像中被硬编码一样。无论窗户尺寸如何，羊都必须呆在沙发上。

不，我不能使用 Photoshop 将羊粘贴到上面。

在最终项目中，我将有一个界面而不是沙发，而绵羊将是一个旋钮或按钮。

如果您想亲自尝试，请滚动 javascript，直到到达底部，您会看到“TODO”评论。

有两行代码可以改变羊的位置：您需要计算的所有其他参数都已经在上面的代码中（或者至少我希望如此！）。我只是想念公式。

我已经能够动态地调整羊的大小并与沙发成比例：我怎样才能对它的位置做同样的事情？我试过了！一切！但似乎没什么用:'(

非常感谢您！

编辑：似乎小提琴链接是错误的。已修复！

【问题讨论】：

对不起，伙计们！链接错误！
我想你的意思是链接：jsfiddle.net/Saturnix/TkPX5/3
是的，但在该链接中有一行未使用的代码可能会使某人感到困惑。我已经在原始问题的链接中删除了它:) 你必须重新加载页面吗？

标签： javascript html canvas image

【解决方案1】：

您需要将x 和y 设置为固定值，而不是相对于图像的新高度和宽度进行调整。

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

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

【讨论】：

您，先生，将是我的英雄和救星！谢谢！谢谢！谢谢！谢谢大佬！