Добавление масштаба к холсту image zoom

Question

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

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

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

Answer 1

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

initialImageWidth = initialImageWidth * 2; 

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

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

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

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

Answer 2

В вашем 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 значений. Вы должны их исправить :)