Dalam tutorial ini, kita akan belajar tentang cara mengatur posisi objek Garis sehubungan dengan asal menggunakan FabricJS. Elemen Garis adalah salah satu elemen dasar yang disediakan di FabricJS. Digunakan untuk membuat garis lurus. Karena elemen garis secara geometris satu dimensi dan tidak mengandung interior, mereka tidak pernah terisi. Kita dapat membuat objek garis dengan membuat instance dari fabric. Garis, menentukan koordinat garis x dan y dan menambahkannya ke kanvas. Untuk mengatur posisi objek Garis sehubungan dengan asalnya, kami menggunakan metode setPositionByOrigin
Sintaksis
setPositionByOrigin(pos: fabric.Point, originX: String, originY: String): voidParameter
pos − Properti ini menerima kain. Nilai titik yang memungkinkan kita untuk mengatur posisi objek yang baru
originX − Properti ini menerima nilai String yang memungkinkan kita untuk mengatur asal horizontal. Nilai yang mungkin adalah "kiri", "tengah" atau "kanan"
originY − Properti ini menerima nilai String yang memungkinkan kita untuk mengatur asal vertikal. Nilai yang mungkin adalah "atas", "tengah" atau "bawah"
Posisi default tanpa menggunakan metode setPositionByOrigin
Contoh
Mari kita lihat contoh kode untuk melihat bagaimana tampilan objek Line ketika metode setPositionByOrigin digunakan. Dalam hal ini kita telah menentukan posisi objek yang baru dengan menginisialisasi objek Titik yang koordinat x dan y masing-masing adalah 500 dan 100. Posisi baru dari objek garis kita akan diatur sambil mempertimbangkan asal horizontalnya sebagai "tengah" dan asal vertikalnya sebagai "atas"
Keterangan. Dapatkan koordinat elemen pertama saat ini di kumpulan elemen yang cocok, relatif terhadap induk offset
versi ditambahkan. 1. 2
Metode ini tidak menerima argumen apa pun
Metode .position()_ memungkinkan kita untuk mengambil posisi elemen saat ini (khususnya kotak marginnya) relatif terhadap induk offset (khususnya kotak paddingnya, yang tidak termasuk margin dan batas). Bandingkan ini dengan .offset()_, yang mengambil posisi saat ini relatif terhadap dokumen. Saat memposisikan elemen baru di dekat elemen lain dan di dalam elemen DOM yang sama, .position() lebih berguna
Mengembalikan objek yang berisi properti top dan left
Catatan. jQuery tidak mendukung mendapatkan koordinat posisi elemen tersembunyi atau menghitung margin yang ditetapkan pada elemen dokumen <html>
var obj = {x. 45, b. {fungsi. function(){alert('a')}, nama. "b"}, a. "prueba" }; . log(nw, obj); . menetapkan({}, obj) var tobj;
Pindahkan properti objek ke posisi lain
Properti object-position CSS menentukan perataan konten elemen pengganti yang dipilih di dalam kotak elemen. Area kotak yang tidak tercakup oleh objek elemen yang diganti akan menampilkan latar belakang elemen
Anda dapat menyesuaikan bagaimana ukuran intrinsik objek elemen yang diganti (yaitu, ukuran aslinya) disesuaikan agar muat di dalam kotak elemen menggunakan properti object-fit
/* Keyword values */ object-position: top; object-position: bottom; object-position: left; object-position: right; object-position: center; /* <percentage> values */ object-position: 25% 75%; /* <length> values */ object-position: 0 0; object-position: 1cm 2cm; object-position: 10ch 8em; /* Edge offsets values */ object-position: bottom 10px right 20px; object-position: right 3em bottom 10px; object-position: top 0 right 10px; /* Global values */ object-position: inherit; object-position: initial; object-position: revert; object-position: revert-layer; object-position: unset; _
<position>
Dari satu hingga empat nilai yang menentukan posisi 2D elemen. Offset relatif atau absolut dapat digunakan
Catatan. Posisinya dapat diatur sehingga elemen yang diganti ditarik keluar dari kotaknya
Nilai awal50% 50%Berlaku untuk elemen yang digantiInheritedyesPersentasemengacu pada lebar dan tinggi elemen itu sendiriNilai yang dihitungsebagaimana ditentukanJenis animasidaftar berulang dari daftar sederhana panjang, persentase, atau kalk
object-position =
<position>
<position> =
[ left | center | right ] || [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]
<length-percentage> =
<length> |
<percentage>
HTML
Di sini kita melihat HTML yang menyertakan dua elemen <img>, masing-masing menampilkan logo MDN
<img id="object-position-1" src="mdn.svg" alt="MDN Logo" /> <img id="object-position-2" src="mdn.svg" alt="MDN Logo" />
CSS
CSS menyertakan gaya default untuk elemen <img> itu sendiri, serta gaya terpisah untuk masing-masing dari dua gambar
img { width: 300px; height: 250px; border: 1px solid black; background-color: silver; margin-right: 1em; object-fit: none; } #object-position-1 { object-position: 10px; } #object-position-2 { object-position: 100% 10%; } _
Gambar pertama diposisikan dengan inset tepi kirinya 10 piksel dari tepi kiri kotak elemen. Gambar kedua diposisikan dengan tepi kanan rata dengan tepi kanan kotak elemen dan terletak 10% dari ketinggian kotak elemen