@RMate

Знает кто формулу увеличения масштаба под курсором мыши с помощью scale?

Всем привет.
Пытаюсь увеличить блок с помощью transform: scale();, есть нужда увеличивать в том месте, где стоит курсор. Для этого необходимо использовать transform-origin, однако я нифига не пойму по какому принципу мне надо высчитывать формулу... просто указывать проценты того места, где находится курсор - не сработало, что, собственно, логично. Дабы не придумывать велосипед, прошу подсказать всё, что нужно учесть. в идеале формулу)
  • Вопрос задан
  • 98 просмотров
Решения вопроса 1
Vlad_IT
@Vlad_IT Куратор тега CSS
Front-end разработчик
Кусок кода из моего проекта на react. Там используется svg, но не суть. Вам помимо scale, нужно делать еще и скролл - translate
/**
 * Зум холста, с центровкой в указанную точку
 * @param {Number} zoom величина увеличения
 * @param {Number} centerX x центра фокусировки увеличения
 * @param {Number} centerY y центра фокусировки увеличения
 */
zoomTo(zoom, centerX, centerY) {
	const oldZoom = this.state.zoom;
	// находим, насколько изменится размер блока. this.state.canvas.width это ширина блока, а height  высота.
	const canvWidth = this.state.canvas.width;
	const canvHeight = this.state.canvas.height;
	const moreWidth = canvWidth  * zoom - canvWidth  * oldZoom; 
	const moreHeight = canvHeight  * zoom -canvHeight  * oldZoom;
        // находим смещение translate
	const newScrollX = -moreWidth / (canvWidth  / centerX);
	const newScrollY = -moreHeight / (canvHeight / centerY);
	if (zoom > 0.05) {
		this.setState({
			scrollX: this.state.scrollX + newScrollX, // это translate x
			scrollY: this.state.scrollY + newScrollY, // это translate y
			zoom: Math.max(0.01, zoom) // это scale
		});
	}
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Max.Credit Санкт-Петербург
от 150 000 до 150 000 руб.
COSMOS Москва
от 100 000 до 120 000 руб.