Добавление масштабирования для масштабирования изображения холста

74
5

Я использую код из https://github.com/dimxasnewfrozen/Panning-Zooming-Canvas-Demos/blob/master/demo12/main.js (демонстрационный пример на http://dayobject.me/canvas/demo12/), чтобы увеличить изображение с помощью элемента Canvas.

Однако при масштабировании перехода между одним уровнем масштабирования и рядом слишком большим, поэтому мне нужно добавить параметр масштаба.

Как мне это сделать?

спросил(а) 2016-05-25T12:47:00+03:00 4 года, 9 месяцев назад
1
Решение
128

В вашем main.js вы можете изменить свой ZoomLevel здесь,

mouseWheel: function (e) {
e.preventDefault() // Please add this, coz the scroll event bubbles up to document.
var zoomLevel = 2;

...

if (delta > 0)
{
// ZOOMING IN
var zoomedX = canvasPos.deltaX - (canvasZoomX - canvasPos.deltaX);
var zoomedY = canvasPos.deltaY - (canvasZoomY - canvasPos.deltaY);

// scale the image up by 2
initialImageWidth = initialImageWidth * zoomLevel;
}
else
{
// ZOOMING OUT
var zoomedX = (canvasPos.deltaX + canvasZoomX);
var zoomedY = (canvasPos.deltaY + canvasZoomY);

// scale the image down by 2
initialImageWidth = initialImageWidth / zoomLevel;

}
}

Отказ от ответственности: это разрушает значения zoomedX и zoomedY. Вы должны их исправить :)

ответил(а) 2016-05-25T13:26:00+03:00 4 года, 9 месяцев назад
43

Мне кажется, что алгоритм всегда занимает половину измерения для увеличения. В конце вам код, который вы видите его в main.js функции MouseWheel:

initialImageWidth = initialImageWidth * 2;

ширина делится на 2, поэтому просто измените используемое значение.


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

Поэтому я предлагаю вам создать новое значение, используя размеры изображения, которое вы хотите увеличить. Например, вы принимаете процент от самого большого размера текущего изображения.

Это то, как вы можете реализовать функцию масштабирования, которая масштабируется в соответствии с размерами изображения

ответил(а) 2016-05-25T13:02:00+03:00 4 года, 9 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема