Gambar raster tidak berada di tengah setelah pembesaran sesuai halaman di Paper.js

Saya sedang mengerjakan aplikasi Paper.js yang menempatkan raster (gambar) di view. Kemudian diperbesar agar sesuai dengan gambar sehingga semuanya terlihat sekaligus. Ini sebagian besar berfungsi, tetapi gambarnya akhirnya diimbangi, seperti ini:

mengimbangi

Kapan seharusnya terlihat lebih seperti ini:

masukkan deskripsi gambar di sini

Berikut kode yang membuat view, menambahkan gambar, dan melakukan panggilan untuk memperbesar agar sesuai:

// 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];

Dan inilah metode 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];
};

Adakah yang tahu mengapa ia memperbesar agar pas tetapi kehilangan titik tengahnya?


javascript image zooming raster paperjs
person Scotty H    schedule 07.10.2015    source sumber

Jawaban (1)


arrow_upward
4
arrow_downward

TL;DR

Gunakan salah satu, tapi jangan keduanya:

  • Setelah pembesaran:

      paper.view.setCenter(0,0);

  • Saat menempelkan gambar:

      var raster = new paper.Raster(image, new paper.Point(canvas.width/2, canvas.height/2));

Jawaban panjangnya

Sebagai penafian, saya harus menunjukkan bahwa saya tidak memiliki pengetahuan tentang paper.js dan dokumentasinya tampak buruk. Jawaban ini lahir dari mengutak-atik.

Saya kurang lebih mereplikasi kode Anda dan setelah mengutak-atik, saya berhasil memperbaiki masalah dengan menggunakan ini:

paper.view.zoom = returnedValues[0];
paper.view.setCenter(0,0);

Jika Anda bertanya-tanya mengapa saya tidak menunjukkan dokumentasi untuk setCenter, itu karena saya tidak dapat menemukannya. Saya menemukan metode itu dengan memeriksa paper.view.center.

Meskipun saya tidak puas karena saya tidak mengerti mengapa ini bisa berhasil. Karena itu, saya terus melihat kode Anda dan memperhatikan ini:

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

Dokumentasi untuk raster memberi tahu kita hal berikut:

Raster

Membuat item raster baru dari argumen yang diteruskan, dan menempatkannya di lapisan aktif. Objek dapat berupa Gambar DOM, Kanvas, atau string yang menjelaskan URL tempat memuat gambar, atau ID elemen DOM tempat mendapatkan gambar (Gambar DOM atau Kanvas).

Parameter:

sumber: HTMLImageElement / HTMLCanvasElement / String — sumber raster — opsional

posisi: Titik — posisi tengah penempatan item raster — opsional

Pemahaman saya adalah bahwa gambar ditempel di kanvas dengan posisi tengah di 0,0, disebut juga pojok kiri atas. Kemudian isi kanvas diubah ukurannya, namun berdasarkan posisi tengahnya sendiri. Ini menarik gambar lebih dekat ke tengah kanvas, namun masih ada perbedaan.

Menyetel bagian tengah ke 0,0 cukup menyinkronkan titik tengah gambar dan kanvas.

Ada juga cara alternatif, yaitu menempelkan gambar di tengah kanvas saat ini, yang tampaknya lebih tepat:

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

Inilah JSFiddle dasar untuk bereksperimen.

person spenibus    schedule 13.10.2015