@schurin
Люблю катать с гор, особенно на санках

Как добится корректного масштабирования SVG при скроле?

Доброго Дня!
Мне надо добится того, чтобы картинка расходилась от курсора мыши при прокрутке и масштабировалась, а у меня этого не происходит, в большинстве случаев идет смешение, то вниз то вправо, всё зависит от SVG которую я в данный момент масштбирую и как она вписывается в экран.
как сделано у меня:

var svgBounds = _getSvgBounds();
var point = _svg[0].createSVGPoint();

point.x = (mousePosition.x - svgBounds.left) * _pixelRate;
point.y = (mousePosition.y - svgBounds.top) * _pixelRate;

var rootMatrix = _svg[0].createSVGMatrix();
rootMatrix.a = _scale.x;
rootMatrix.b = 0;
rootMatrix.c = 0;
rootMatrix.d = _scale.y;
rootMatrix.e = _translate.x;
rootMatrix.f = _translate.y;

var compute = _svg[0].createSVGMatrix().translate(point.x, point.y).scale(zoom).translate(-point.x, -point.y);
var result = rootMatrix.multiply(compute);

_translate.x = result.e;
_translate.y = result.f;
_scale.x = result.a;
_scale.y = result.d;

затем применение трансформаций, с ним проблем нет

_pixelRate - расчитывается при инициализации зума, отношение реальной ширины SVG, к ширине с которой SVG всписалась в эран.
_svg[0] - сама SVG она 1 у меня на странице и находится контейнере
svgBounds - нужен, ибо SVG лежит в контейнере, который где то как то спозиционирован,
_translate, _scale - текущие значения translate у самого верхнего контейнера группы в SVG

находил, мол rootMatrix надо считать как getScreeтCTM() у самого верхнего контейнера группы в SVG, только я еще a,d,e,f умножал на _pixelRate и получал почти свои _translate и _scale
и мол трансформация считается по другому
compute = _svg[0].createSVGMatrix().translate(-point.x*(zoom-1), -point.y*(zoom-1)).scale(zoom);

но ничего из этого хороших результатов не дало, самое честное масштабирование получается когда используется исходный вариант расчётов, который я написал вначале
  • Вопрос задан
  • 305 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы