rescale Bilder in Leinwand nach dem Zurücksetzen es Verhältnis

Question

ich eine einfache Leinwand auf meiner Seite haben, die wie folgt aussieht:

Die Leinwand reagiert, so dass die Größe auf dem Bildschirm kann zu- und abnehmen, je Sie sind anschauen. Was gleich bleibt, ist die Auflösung des Ergebnisses. Dies wird immer auf einen voreingestellten Standardwert von 1000x1000px skaliert.

Dies funktioniert mit einem Skalierungsverhältnis.

Beispiel: Die Leinwand hat eine Größe von 500x500 Pixel auf dem Bildschirm. Dies bedeutet, dass das Skalierungsverhältnis 0,5 ist, wenn Ihr Bildschirm groß genug ist, um die Leinwand 1000x1000 zu verwenden. Das Verhältnis wird 1,0 und so weiter.

Die Arbeitsfläche hat auch die Option, ein Bild hinzuzufügen. Diese Bilder müssen ebenfalls entsprechend Ihrer Bildschirmgröße angepasst werden und genau wie die gesamte Leinwand wird sie vor dem Speichern auf die richtige Größe angepasst (1000x1000).

Wenn Sie ein Bild hochladen, es in der Regel ganz auf der Leinwand wie so groß ist:

Im Augenblick ist die Größe des Bildes zu groß ist vollständig auf der Leinwand zu zeigen, und an diesem Punkt ist es Das individuelle Skalierungsverhältnis beträgt 1,0, während das Skalierungsverhältnis der Leinwand bei 0,5 bleibt.

Wenn ich das Bild, um die Größe wollen so schön in der Leinwand passt ich folgendes erhalten:

Um die Größe des Bildes stellen Sie sicher nicht, um es wieder die Standard-Skala von 1,0 wie wenn ich es hochgeladen fügte ich den folgenden Code:

canvas.on('object:modified', function (options) { 

    options.target.set({ 
     width: options.target.getWidth(), 
     height: options.target.getHeight(), 
     scaleX: 1, scaleY: 1, 
    }); 

}); 

Dies wird die X und Y-Maßstab zu 1 nach Skalieren/modifizierende eingestellt. Auf diese Weise wird jedes Mal, wenn Sie die Größe ändern, dieser Punkt die neue 1.0-Skala sein.

alles, was ich meine Objekte zu skalieren schrieb die folgende Funktion:

function scaleObjects() 
{ 
    // page has been resized therefore we recalculate the aspect ratio for the canvas. 
    $windowWidth = $(window).width(); 
    $windowHeight = $(window).height(); 

    //currentCanvasWidth = $windowWidth; 

    var PrevHeightRatio = canvas.getHeight()/canvasHeightDefault; 
    var PrevWidthRatio = canvas.getWidth()/canvasWidthDefault; 

    resizeCanvas(); 

    var HeightRatio = canvas.getHeight()/canvasHeightDefault; 
    var WidthRatio = canvas.getWidth()/canvasWidthDefault; 
    var objects = canvas.getObjects(); 


    for (var i = 0; i < objects.length; i++) { 
     objects[i].scaleX = WidthRatio; 
     objects[i].scaleY = HeightRatio; 

     var multiplierW = 1/PrevWidthRatio; 
     var multiplierH = 1/PrevHeightRatio; 

     var originalStartX = objects[i].left * multiplierW; 
     var originalStartY = objects[i].top * multiplierH; 

     objects[i].left = originalStartX * WidthRatio; 
     objects[i].top = originalStartY * HeightRatio; 
     objects[i].setCoords(); 
    } 

    canvas.renderAll(); 
} 

Dies wird jedes Mal eine Größe ändern oder eine Leinwand laufen speichern auftritt.

Das Problem ist, dass immer wenn ich meine Leinwand speichern oder die Größe ändern die aktuelle Größe der Leinwand auf meine Bilder/Objekte angewendet wird. In diesem Fall hat mein Bild einen Maßstab von 1,0 und meine Leinwand bei 0,5, Speichern oder Ändern der Größe wird den Maßstab 0,5 auf das Objekt anwenden und seine Größe verringern. Ich würde es jedoch gerne genau so skalieren wie den Rest meiner Leinwand, damit nichts übertrieben wird.

Wie kann ich das erreichen? Hier

ist ein Bild von der Leinwand „After“ einmal die Seite Ändern der Größe:

Hier ist ein jsfiddle: https://jsfiddle.net/L6hob1e4/2/

Answer 1

Nach einigen Recherchen und einigen Tests ich die folgende Lösung gefunden. Ich änderte die for-Schleife, die die Objekte auf diese Skalen:

for (var i = 0; i < objects.length; i++) { 
     var previousH = (((objects[i].getHeight()/canvas.getHeight()) * canvasHeightDefault) * PrevHeightRatio); 
     var previousW = (((objects[i].getWidth()/canvas.getWidth()) * canvasWidthDefault) * PrevWidthRatio); 

     console.log(previousH + " - " + previousW); 

     var multiplierSizeH = 1/PrevHeightRatio; 
     var multiplierSizeW = 1/PrevWidthRatio; 

     var onMaxH = objects[i].getHeight() * multiplierSizeH; 
     var onMaxW = objects[i].getWidth() * multiplierSizeW; 

     objects[i].height = onMaxH * HeightRatio; 
     objects[i].width = onMaxW * WidthRatio; 

     var multiplierW = 1/PrevWidthRatio; 
     var multiplierH = 1/PrevHeightRatio; 

     var originalStartX = objects[i].left * multiplierW; 
     var originalStartY = objects[i].top * multiplierH; 

     objects[i].left = originalStartX * WidthRatio; 
     objects[i].top = originalStartY * HeightRatio; 
     objects[i].setCoords(); 
    } 

Dieser Track von der Größe halten wird vor und nach der Skalierung, die das Problem behebt.