Cara mengubah posisi objek di javascript

Question

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

Table of Contents Show

Posisi default tanpa menggunakan metode setPositionByOrigin
Bagaimana cara mengubah posisi objek dalam JavaScript?
Bagaimana cara mengubah posisi teratas dalam JavaScript?
Bagaimana cara mendapatkan posisi objek di JavaScript?
Bagaimana cara mengatur posisi div di JavaScript?

Sintaksis

setPositionByOrigin(pos: fabric.Point, originX: String, originY: String): void

Parameter

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

Bagaimana cara mengubah posisi objek dalam JavaScript?

Untuk mengatur posisi elemen. .

Pilih elemen dan atur properti posisinya menjadi absolut

Gunakan properti top untuk mengatur posisi vertikal elemen, mis. g. kotak. gaya. atas = '150px'

Gunakan properti left untuk mengatur posisi horizontal elemen, mis. g. kotak. gaya. kiri = '150px'

Bagaimana cara mengubah posisi teratas dalam JavaScript?

Untuk menyetel posisi teratas suatu elemen, kita dapat menggunakan properti teratas Gaya DOM di JavaScript. Alternatifnya, kita bisa menggunakan metode DOM Style setProperty().

Bagaimana cara mendapatkan posisi objek di JavaScript?

jQuery. offset() akan mendapatkan koordinat elemen pertama saat ini, atau mengatur koordinat setiap elemen, dalam kumpulan elemen yang cocok, relatif terhadap dokumen.