raphael js, ubah ukuran kanvas lalu setViewBox untuk menampilkan semua elemen

Saya punya masalah dengan kanvas saya.

Kanvas saya dengan lebar pertama = 1300, tinggi = 500

Lalu saya ubah ukurannya menjadi lebar = 800px, tinggi = 500

Saya mencoba setViewBox untuk memperbesarnya. Tetapi mouse tidak memperbaiki elemen ketika saya menyeretnya.

@canvas.resize(800, 500)
@canvas.setViewBox(0,0, ??, ??)

bagaimana cara menghitungnya???

Terima kasih atas bantuanmu. :)


svg raphael
person Peter89    schedule 27.12.2012    source sumber

Jawaban (1)


arrow_upward
3
arrow_downward

Anda dapat menghitung dimensi yang diperlukan menggunakan pendekatan seperti ini:

function recalculateViewBox( canvas )
{
    var max_x = 0, max_y = 0;
    canvas.forEach( function( el )
        {
            var box = el.getBBox();
            max_x = Math.max( max_x, box.x2 );
            max_y = Math.max( max_y, box.y2 );
        } );
    if ( max_x && max_y )
        canvas.setViewBox( 0, 0, max_x, max_y );
}

Pada dasarnya, Anda cukup menelusuri konten kanvas dan membuat kotak pembatas meta, lalu menyesuaikan viewBox ke dalamnya.

Jika Anda ingin sedikit lebih mewah, Anda selalu dapat menganimasikan kotak tampilan sehingga dapat bertransisi dengan lancar ke ukuran barunya. Secara fungsional tidak penting, tetapi cukup seksi...

person Kevin Nielsen    schedule 27.12.2012
comment
Ops, jika elemen saya tidak ditempatkan pada posisi yang tepat karena kanvas saya memiliki lebar dan tinggi maksimal. Zoom hanya memperbaiki semua elemen. Saya perlu memperbesar dan memperbaiki jendela :) stackoverflow.com/questions/14064402/ - person Peter89; 28.12.2012