swanrnd
@swanrnd
Издатель HTML5 игр

Как программно увеличить SVG по клику?

Использую SVGPan. Все отлично масштабируется по скроллу мыши.
Однако, оказалось, что не у всех есть колесико мыши.
Я захотел сделать 2 кнопки для приближения и уменьшения, но документации нету. Ответа в гугле не нашел.

Может кто-то имел дело с подобным.
  • Вопрос задан
  • 2667 просмотров
Пригласить эксперта
Ответы на вопрос 1
@uaSaint
С библиотекой не знаком, но на сколько вижу из демо( www.cyberz.org/projects/SVGPan/tiger.svg ) значение имеют:
1. onmouseup="handleMouseUp(evt)"
2. onmousedown="handleMouseDown(evt)"
3. handleMouseMove(evt)

Похоже достаточно вызвать их при клике на кнопке либо использовать как пример для расширения кода.
Нужный код в этом месте:
/**
 * Handle mouse move event.
 */
function handleMouseMove(evt) {
	if(evt.preventDefault)
		evt.preventDefault();

	evt.returnValue = false;

	var svgDoc = evt.target.ownerDocument;

	var g = getRoot(svgDoc);

	if(state == 'pan' && enablePan) {
		// Pan mode
		var p = getEventPoint(evt).matrixTransform(stateTf);

		setCTM(g, stateTf.inverse().translate(p.x - stateOrigin.x, p.y - stateOrigin.y));
	} else if(state == 'drag' && enableDrag) {
		// Drag mode
		var p = getEventPoint(evt).matrixTransform(g.getCTM().inverse());

		setCTM(stateTarget, root.createSVGMatrix().translate(p.x - stateOrigin.x, p.y - stateOrigin.y).multiply(g.getCTM().inverse()).multiply(stateTarget.getCTM()));

		stateOrigin = p;
	}
}
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы