使用javascript调整图像大小并将其保持在原始位置

时间:2012-10-02 21:46:32

标签: javascript html5 canvas image

我一整天都在苦苦寻找如何调整图像大小和计算比例的方法。我大部分失败了!

描述我的问题,对不起!但我找不到任何文字......所以这就是这个小提琴: http://jsfiddle.net/Saturnix/TkPX5/

正如您所看到的那样,有一张沙发和一只绵羊的图像(如果您不这样做:尝试调整浏览器窗口的大小)。

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

不,我不能使用Photoshop并将羊粘贴在它上面。

在最后的项目中,我将有一个界面,而不是沙发,羊将是一个旋钮或按钮。

如果你想尝试自己,请滚动javascript,直到你到达底部,你会看到“TODO”评论。

有两行代码可以改变绵羊的位置:你需要计算的那些其他参数已经在上面的代码中了(或者至少我希望如此!)。我错过了这个公式。

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

非常感谢你!

编辑:似乎小提琴链接错了。固定!

1 个答案:

答案 0 :(得分:1)

您需要相对于图片的新高度和宽度调整它们,而不是将xy设置为固定值。

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

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