ภาพแรสเตอร์ไม่อยู่ตรงกลางหลังจากการซูมให้พอดีกับหน้าใน Paper.js

ฉันกำลังทำงานกับแอปพลิเคชัน Paper.js ที่ใส่ raster (รูปภาพ) ไว้ใน view จากนั้นจะซูมให้พอดีกับภาพเพื่อให้มองเห็นทั้งหมดได้ในคราวเดียว ส่วนใหญ่จะใช้งานได้ แต่รูปภาพกลับกลายเป็นการชดเชย เช่นนี้

เมื่อใดควรมีลักษณะเช่นนี้:

นี่คือโค้ดที่สร้าง view เพิ่มรูปภาพ และทำการเรียกให้ซูมให้พอดี:

// Set up HTMLImage
var image = new Image(this.props.image.width, this.props.image.height);
image.src = 'data:image/png;base64,' + this.props.image.imageData;

//var canvas = React.findDOMNode(this.refs.canvas); // React 0.13 +
var canvas = this.refs.canvas.getDOMNode();

// Scale width based on scaled height; canvas height has been set to the height of the document (this.props.height)
var scalingFactor = canvas.height/image.height;
canvas.width = image.width * scalingFactor;

// Initialize Paper.js on the canvas
paper.setup(canvas);

// Add image to Paper.js canvas
var raster = new paper.Raster(image, new paper.Point(0,0));

// Fit image to page so whole thing is displayed
var delta = scalingFactor < 1 ? -1 : 1; // Arbitrary delta (for determining zoom in/out) based on scaling factor
var returnedValues = panAndZoom.changeZoom(paper.view.zoom, delta, paper.view.center, paper.view.center, scalingFactor);
paper.view.zoom = returnedValues[0];

และนี่คือวิธี panAndZoom.changeZoom:

SimplePanAndZoom.prototype.changeZoom = function(oldZoom, delta, centerPoint, offsetPoint, zoomFactor) {
    var newZoom = oldZoom;
    if (delta < 0) {
        newZoom = oldZoom * zoomFactor;
    }
    if (delta > 0) {
        newZoom = oldZoom / zoomFactor;
    }

    var a = null;
    if(!centerPoint.equals(offsetPoint)) {
        var scalingFactor = oldZoom / newZoom;
        var difference = offsetPoint.subtract(centerPoint);
        a = offsetPoint.subtract(difference.multiply(scalingFactor)).subtract(centerPoint);
    }

    return [newZoom, a];
};

มีความคิดบ้างไหมว่าทำไมมันถึงซูมให้พอดีแต่เสียศูนย์กลางไป?