Absolute Koordinaten in einem Canvas mit Panning & Zoom berechnen

Question

Wie kann ich eine bestimmte Position des Canvas berechnen (z. B. Bottom Center), nachdem Sie die Position des Ansichtsfensters und die Zoomstufe geändert haben?

Momentan versuche ich so etwas. Aber es funktioniert nur für das Ansichtsfenster.

canvasPoint = { 
    left:(canvas.width/2)-canvas.viewportTransform[4], 
    top: canvas.height-canvas.viewportTransform[5] 
} 

Wenn ich oder Zoom Verkleinern In, bin ich nicht in der Lage, den neuen Mitte-Tiefpunkt für die Leinwand zu finden.

Answer 1

Sie müssen die Matrizen verwenden. Ihr Boden - Zentrum Ecke hat die Koordinaten:

var p = {x: canvas.width/2, y: canvas.height}; 

Ihre Zoom und Schwenk durch die viewportTransfom dargestellt wird:

var invertedMatrix = fabric.util.invertTransform(canvas.viewportTransform); 
var transformedP = fabric.util.transformPoint(p, invertedMatrix); 

Und Sie getan werden sollte. transformedP sollte die absoluten Koordinaten des Punkts haben, den Sie in einer gezoomten und/oder geschwenkten Ansicht als Mitte-unten sehen.