Показать сообщение отдельно
  #2 (permalink)  
Старый 08.04.2015, 21:21
Аватар для khusamov
Соединяю Node.js и Ext JS
Отправить личное сообщение для khusamov Посмотреть профиль Найти все сообщения от khusamov
 
Регистрация: 25.06.2009
Сообщений: 1,033

Проблема решена. Оказывается точку, относительно которой производится масштабирование, нужно преобразовать следующим образом:

Берется текущая матрица, инвертируется и применяется к точке. Полученную точку и надо использовать.

Теперь все работает! Если кому будет нужен код, то он примерно такой:

function getmouseX(e) {
		return e.pageX - svg.getX();
	}
	
	function getmouseY(e) {
		return e.pageY - svg.getY();
	}
	
	svg.getEl().on("mousewheel", function(e) {
	
		scaleLevel += e.event.wheelDelta > 0 ? 1 : -1;
		if (scaleLevel < scaleLevelMin) scaleLevel = scaleLevelMin;
		if (scaleLevel > scaleLevelMax) scaleLevel = scaleLevelMax;
		
		var scaleResult = Math.exp(scaleLevel / 5);
		
		applyScale(scaleResult, getmouseX(e), getmouseY(e));
	});
	
	function applyScale(scale, x, y) {
		var matrixResult = matrixPrevious;
		var s = scale / scalePrevious;
		
		var point = matrixResult.inverse().transformPoint([x, y]);
		x = point[0]; y = point[1];
		
		matrixResult.translate(x, y);
		matrixResult.scale(s);
		matrixResult.translate(-x, -y);
		
		svg.getSurface().clearTransform();
		svg.getSurface().matrix(matrixResult);
		
		matrixPrevious = matrixResult;
		scalePrevious = scale;
	}
Ответить с цитированием