从我单击的区域调整大小答案

【问题标题】：Resize from the area I click从我单击的区域调整大小
【发布时间】：2013-03-17 04:54:15
【问题描述】：

我想知道是否可以从我单击的区域调整内容的大小，而不是左上角的默认调整大小。

var $cont = $('.container .content'),
    init_size = $cont.width()*0.1,
    ratio = $cont.width() / $cont.height(),
    c =0,
    s = [400,init_size];

$cont.height( init_size );

$cont.click(function(){   
    $(this).stop().animate({height: s[c%2], width: s[c%2] * ratio });
    c++;
});

你可以看到它从左上角到右下角调整大小，是否可以根据我点击的位置设置它开始调整大小的点？

【问题讨论】：

你需要获取点击的位置。看看这个stackoverflow.com/questions/55677/…
这似乎不是一件小事。
使用 d3 将是一个很好的库，可以处理您想做的所有事情，而且您不必自己编写所有这些行为。
@btevfik 我对画布不是很熟悉，我想我应该用它来替换我的数字？
@Andrew Mao 谢谢！我要试一试。

标签： jquery css resize point area

【解决方案1】：

是的，当您调整大小时，请以适当的比例移动图像，以使较大图像中的点与点击事件的位置相同。本质上这意味着根据比例将其移动到负顶部和左侧点击时图像放置的计算是：

New position = Mouse click event position-New size/Old Size*Mouse click event position

这是一个jsfiddle 示例

此示例使用相等的宽度/高度比，但您可以轻松地在它的基础上支持您需要的任何比例

【讨论】：