Hinzufügen einer Skala zu Leinwand Bild zoomen

Question

Ich verwende einen Code aus https://github.com/dimxasnewfrozen/Panning-Zooming-Canvas-Demos/blob/master/demo12/main.js (Demo bei http://dayobject.me/canvas/demo12/), um ein Bild mit dem Canvas-Element zu vergrößern.

Beim Zoomen ist der Sprung zwischen einer Zoomstufe und der nächsten jedoch zu groß, daher muss ich einen Skalierungsparameter hinzufügen.

Wie würde ich das machen?

Answer 1

Es scheint mir, als ob der Algorithmus immer die Hälfte der Dimension vor dem Zoom nimmt. Am Ende Sie codieren Sie sehen es in main.js die mousewheel Funktion:

initialImageWidth = initialImageWidth * 2; 

die Breite durch 2 geteilt wird, um lediglich den verwendeten Wert zu ändern.

Sie sagten, dass der Schritt zum Vergrößern und Verkleinern zu groß ist.

Also ich schlage vor, dass Sie den neuen Wert generieren, indem Sie die Abmessungen des Bildes verwenden, das Sie vergrößern möchten. Zum Beispiel nehmen Sie einen Prozentsatz der größten Dimension des aktuellen Bildes.

Das ist, wie Sie eine Zoom-Funktion implementieren können, die

Answer 2

In Ihrem main.js können Sie Ihr zoomlevel ändern, auf die Abmessungen des Bildes

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; 

    } 
} 

Haftungsausschluss zoomt nach: Das ruiniert die zoomedX und zoomedY Werte. Sie müssen sie beheben :)