| AlexLucas |
27.01.2014 17:42 |
Проблема с функционалом zoom in
Доброго времени суток.
Я пытаюсь добавить функционал зума.
У меня есть скроллер (s:Scroller), в котором есть канва - can типа s:Group, на которой лежат некоторые элементы.
При клике по канве мне нужно приблизить канву так чтобы точка в которую кликнули находилась в центре экрана, или как можно ближе к центру, насколько это позволяет скроллер.
Код AS3:
<s:Scroller id="scroll">
<s:Group id="can">
......
</s:Group>
</s:Scroller>
<s:Group id="zoomCover" click="zoomIn()" >
......
</s:Group>
Над скролером висит другой s:Group равный по размерам и позиции скроллу который ловит клик.
Вот так вычисляю точку в которую в итоге нужно скролить
Код AS3:
//та самая точка, zoomFactor - это насколько мы увеличим канву для зума
//в моём случае увеличение происходит в 2 раза при каждом клике, т.е. zoomFactor будет равняться 2, 4, 8 итд.
public function zoomIn(e:MouseEvent):void
{
var scrollPoint:Point = new Point((scroll.horizontalScrollBar.value + e.localX) * zoomFactor / can.scaleX - scroll.width / 2,
(scroll.verticalScrollBar.value + e.localY) * zoomFactor / can.scaleY - scroll.height / 2);
can.scaleY = can.scaleX = zoomFactor;
var scrollX:Number = scrollPoint.x
var scrollY:Number = scrollPoint.y
//после чего нужно обновить скроллер
scroll.validateNow();
//и, собственно, скролить скроллер
if (scrollX > scroll.horizontalScrollBar.maximum)
scroll.horizontalScrollBar.value = scroll.horizontalScrollBar.maximum;
else if (scrollX < scroll.horizontalScrollBar.minimum)
scroll.horizontalScrollBar.value = scroll.horizontalScrollBar.minimum;
else
scroll.horizontalScrollBar.value = scrollX;
if (scrollY > scroll.verticalScrollBar.maximum)
scroll.verticalScrollBar.value = scroll.verticalScrollBar.maximum;
else if (scrollY < scroll.verticalScrollBar.minimum)
scroll.verticalScrollBar.value = scroll.verticalScrollBar.minimum;
else
scroll.verticalScrollBar.value = scrollY;
}
Но в итоге всё равно зумится криво, нормально получается только при первом зуме, когда scale у канвы = 1. Видимо где-то в расчётах ошибаюсь, но не могу понять где.
Флексовый Zoom не сдвигает скроллер, то есть просто увеличивает канву с origin в (0,0).
UPD.:
Оказывается если задать скроллБару value = 100, она не прокрутит контент на 100 пикселей, а переместит свой скроллбар на 100 пикселей. А если у контента скейл > 1 , то контент прокрутится на 100*scale пихелей.
Странно это как-то, и в хелпе это не обозначено вообще.
И когда свойство maximum приближается к значению длины (или ширины) самого скроллера, контент тупо исчезает.
Поэтому правильный ответ
Код AS3:
scroll.horizontalScrollBar.value + e.localX / zoomFactor // то же самое с verticalBar
Не центрирует точку, но эффект вполне сносный.
|