Вот это место. Вы вычисляете смещение С ТЕКУЩИМ scale'ом. А масштабирующий scale может отличаться, поскольку является суммой нескольких предыдущих.

// Вычисляю смещение относительно мыши и необходимого положения масштабируемого изображения
    var offsetX = x - x * scale;
    var offsetY = y - y * scale;

Выложил код тут https://fiddle.sencha.com/#fiddle/kr9
Если не запустится автоматом, то нужно зеленую кнопку жать.
Появится звезда.
Ее можно масштабировать колесиком мыши. Сразу будет видна проблема масштабирования - курсор не совпадает с точкой на фигуре во время масштабирования.

Требуемый код находится в файле app.js на строке 119

Я туда уже вставлял сумму предыдущих.

var offsetX = x - x * matrixPrevious.getScaleX();

Ничего путного не выходит.

На языке матриц попробую изложить свою проблему.

У меня есть фигура. Нужно ее масштабировать относительно центра.

У меня есть готовая матрица для масштабирования относительно центра, обозначу ее буквой М1

Фигуру обозначу буквой Ф1

Итого, чтобы масштабировать фигуру мне нужно сделать следующее:

Ф2 = Ф1 * М1

Я получаю новые координаты Ф2

Дело в том, что я эти координаты не сохраняю. Движок отображения работает так: в фигуре хранятся координаты Ф1 и сама матрица М1.

Чтобы мне масштабировать фируру дальше, нужно создать вторую матрицу М2 и сделать следующую операцию

М3 = М1 * М2

Ф3 = Ф1 * М2

Ф3 это координаты фигуры уже послу двух операций масштабирования.

Внимание, проблема. Матрицу масштабирования я без ошибок создаю с учетом, что масштабирование делается относительно определенного центра.

Если я выше описанный цикл операций масштабирования произвожу без смены центра, то все в порядке.

Но если на какой-либо итерации меняется центр, то происходят проблемы (по условиям задачи это требуется). В итоге, получается я неправильно создаю матрицу когда центр меняется.

Тема временно закрыта. Оказывается проблема не в моем коде, а в работе SVG.

Дело в том, что если на плоскости есть квадрат, и сделать сначала перенос его таким образом, чтобы ближайший к началу координат угол совпал с началом координат, а затем повернуть, то:

а) в учебниках по матрицам квадрат должен развернуться вокруг начала координат

б) а в SVG он вращается вокруг точки -x, -y (где x, y та точка квадрата что совпала с началом координат после перемещения). То есть точка вращения тоже переместилась!!! Вот отсюда все мои проблемы и исходят. А код похоже верный.

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

Продолжение тут http://javascript.ru/forum/showthrea...595#post365595

имхо 1 проблема в логике (т.е. непонимании)
имхо 2 всем будет лень разбираться в чужой логике
не совсем понятно зачем использовать матрицу трансформации для простого маштабирования

Я решил проблему. Описание тут http://javascript.ru/forum/offtopic/...tml#post365595

Кому надо будет - тот разберется.