2013-03-17 4 views
0

Я хотел бы знать, можно ли изменять размер содержимого из области, на которую я нажимаю, а не на верхний левый размер по умолчанию.Изменение размера области Я щелкаю

Например вот мой код http://jsfiddle.net/2drYk/29/

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++; 
}); 

, как вы можете видеть, что размер от верхнего левого угла в правый нижний, можно ли установить точку его начала, чтобы изменить размер в зависимости от того, где я CLIC?

+1

вам нужно указать местоположение клика. взгляните на это http://stackoverflow.com/questions/55677/how-do-i-get-the-coordinates-of-a-mouse-click-on-a-canvas-element – btevfik

+0

Кажется, что нет тривиальная вещь. – btevfik

+1

Использование [d3] (http://d3js.org/) было бы хорошей библиотекой для всего, что вы хотите сделать, и вам не нужно было бы кодировать все это поведение самостоятельно. –

ответ

1

Да, при изменении размера перемещайте изображение в правильном соотношении, чтобы точка большего изображения была той же относительной точкой, что и местоположение события щелчка. По существу, это означает, что перемещение его в отрицательном сверху и слева в соответствии с отношением Расчет для размещения изображения при нажатии является:

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

Вот jsfiddle пример

Этот пример использует равного соотношения ширины/высоты , но вы можете легко опираться на него, чтобы поддерживать любые коэффициенты, которые вам требуются.