Здравствуйте!
У меня задача сделать масштабирование при помощи колесика мыши на холсте SVG. Причем масштабирование делается через точку, которая в момент действия находится под курсором мыши. Ну, аналогично как это сделано в векторных редакторах.
Проблема в том, что работает это, но плохо. Сначала нормально, а потом точка масштабирования не совпадает с точкой курсора мыши.
Вот код:
// Единичная матрица
var matrixPrevious = Ext.create("Ext.draw.Matrix", 1, 0, 0, 1, 0, 0);
me.getEl().on("mousewheel", function(e) {
// Здесь по событию от колесика мыши выбирается коэффициент масштабирования
var scale = e.event.wheelDelta > 0 ? 1.2 : 0.8;
// Создаю матрицу масштабирования
var matrixScale = Ext.create("Ext.draw.Matrix", scale, 0, 0, scale, 0, 0);
// Вычисляю координаты курсора мыши относительно холста SVG
x = e.pageX - me.getX();
y = e.pageY - me.getY();
// Вычисляю смещение относительно мыши и необходимого положения масштабируемого изображения
var offsetX = x * (1 - scale);
var offsetY = y * (1 - scale);
// Создаю матрицу перемещения
var matrixTranslate = Ext.create("Ext.draw.Matrix", 1, 0, 0, 1, offsetX, offsetY);
// Беру предыдущую матрицу
var matrixResult = matrixPrevious;
// Все матрицы соединяю умножением
matrixResult.multiply(matrixTranslate);
matrixResult.multiply(matrixScale);
// Применяю матрицу к элементу SVG-холста
me.getSurface().matrix(matrixResult);
// Сохраняю матрицу как предыдущую, чтобы в следующей итерации ее использовать
// для относительных трансформаций
matrixPrevious = matrixResult;
});
У меня есть подозрения, что масштабирования я сделал относительное, а вот перемещение похоже не совсем относительное. Но как это исправить пока не знаю.
