Di bawah ini adalah pengantar fungsi gambar yang saya tulis sendiri:
Anda dapat menggunakan mouse untuk menyeret dan membuat kotak pemangkasan
Dapat mengubah ukuran kotak tanaman
Klik OK untuk kembali ke data tanaman
prinsip
Ada dua cara untuk menyelesaikan pemangkasan:
1. Tambahkan drop drag drag drag, dll. Menggunakan html5
2. Metode tradisional, menggunakan peristiwa tikus, mousedown, mousemove, dll.
Di sini kami mengadopsi metode 2.
Pembentukan area yang dipotong
Untuk memotong, pertama -tama kita harus membentuk area penanaman. Pembentukan area penanaman ini dapat dikaitkan dengan jarak gerakan tikus. Semakin jauh tikus bergerak, semakin besar area tanaman. Seperti yang ditunjukkan pada gambar di bawah ini:
Seperti yang ditunjukkan pada gambar di atas, jarak gerakan horizontal dari tikus dan jarak gerakan vertikal bersama -sama membentuk lebar dan tinggi area penanaman.
Dan bagaimana cara menghitung jarak antara gerakan horizontal dan vertikal? Saat kami mengklik mouse, kami dapat memperoleh posisi klik mouse melalui objek event , dan ketika kami memindahkan mouse, kami juga dapat memperoleh posisi mouse melalui event . Melalui dua perubahan pada posisi mouse, kita bisa mendapatkan jarak gerakan mouse.
Atribut untuk mendapatkan posisi mouse adalah klien dan klien
Formasi area yang teduh
Berikutnya adalah menggambar area bayangan. Bagian dari gambar yang dipotong kecuali area yang dipotong milik bagian bayangan, dan area tersebut juga tidak dapat ditarik. Area ini ditarik untuk memungkinkan pengguna melihat area yang dipotong lebih jelas.
Saya membagi area menjadi empat bagian: bagian atas, bawah, kiri dan kanan, lihat distribusi gambar di bawah ini:
Jadi bagaimana jika area ini dihitung? Pada saat ini, nilai offset elemen DOM perlu digunakan. Nilai offset kiri dari area kliping dikurangi dari nilai offset kiri gambar itu sendiri adalah lebar bayangan kiri. Nilai offset atas dari area kliping dikurangi dari nilai offset atas gambar sama dengan nilai ketinggian bayangan atas. Seperti yang ditunjukkan pada gambar di bawah ini:
Setelah mendapatkan nilai -nilai bayangan kiri dan bayangan atas, sifat -sifat bayangan lainnya dapat dihitung melalui keduanya.
Ada dua cara untuk mendapatkan nilai offset gambar
1. Kerugian menggunakan nilai offsetleft dan offsettop Jika elemen DOM memiliki nilai setara margin perbatasan, nilai -nilai ini akan dihitung dalam
2. Kerugian untuk mendapatkan atribut CSS dari DOM adalah CSS yang telah ditentukan terkait dengan CSS yang telah ditentukan sebelumnya jika bagian atas kiri tidak didefinisikan.
Kedua metode memiliki kelemahan sendiri dan digunakan sesuai dengan keadaan yang berbeda
Pangkas di luar batas
Perhitungan area tanaman dihitung dengan jarak bergerak dari tikus, sehingga area tanaman akan di luar batas, dan situasi ini dibagi menjadi dua jenis:
1. Melintasi batas selama proses pemotongan
2. Melampaui batas saat memindahkan area tanaman
Jadi mari kita bicara tentang bagaimana mencegah melewati batas.
Memangkas di atas garis
Apa itu lintas batas saat memotong? Area drag mouse melebihi gambar dan membentuk out-of-bounds, seperti yang ditunjukkan pada gambar berikut:
Untuk di luar batas seperti itu, perlu untuk menilai bahwa sisi kanan area tanaman relatif terhadap sisi kiri browser tidak dapat melebihi sisi kanan gambar dan posisi di sisi kiri browser; Pada saat yang sama, posisi di bagian bawah area tanaman relatif ke bagian atas browser tidak dapat melebihi posisi di bagian atas browser yang sesuai dengan bagian atas gambar. Atau untuk mengilustrasikan:
Saat TX >= PX , paksa nilai TX ke nilai tetap.
Metode perhitungan TX dan PX, dengan asumsi bahwa area penanaman adalah oTailor , area gambar oPicture :
Tx = otailor.offsetWidth + otailor.offsetleft; px = opicture.offsetWidth + opicture.offsetleft;
Demikian pula, metode di atas dapat digunakan untuk membatasi persimpangan sisi kiri, persimpangan sisi atas, dan persimpangan sisi bawah, jadi saya tidak akan masuk ke detail.
Bergerak melintasi batasan
Bergerak di luar batas berarti bahwa area penanaman telah dibentuk, tetapi lintas batas terjadi ketika memindahkan area penanaman melalui tikus. Pemahaman ini relatif sederhana, jadi saya tidak akan memperkenalkannya jika saya menggambar. Batas lintas batas semacam ini konsisten dengan batas drag-and-drop lintas batas, dan dinilai dengan menilai apakah tikus bergerak di luar area gambar.
Prinsip dan masalah telah diselesaikan, dan sekarang kita akan mulai menyelesaikan fungsi aktual.
Persiapan
Sebelum melakukannya, lakukan beberapa pekerjaan persiapan terlebih dahulu, pertajam pisau dan potong kayu tanpa menunda pekerjaan memotong kayu.
Persiapan Tata Letak Halaman Web
Kode kunci untuk tata letak halaman web adalah sebagai berikut:
<img src = "./ gambar/img_2.jpg"> <verv> <verv> </div> <vet> </div> <v div> </div> <v> </div> <Div ID = "Box_1"> </Div> <Div ID = "Box_2"> </Div> <Div ID = "Box_3"> </Div> Box_2 "> </Div> <Div ID =" Box_3 "> </Div> Box_2"> </Div> <Div ID = "Box_3"> </Div> id = "box_5"> </div> <div id = "box_6"> </div> <div id = "box_7"> </div> <div id = "box_8"> </div> <!-left-> <Div> </Div> <!-Top-> </Div> <!-kanan-kanan-> </Div> <!
Di mana img_box mewakili area tanaman, outer mewakili area bayangan, dan div di img_box adalah perbatasan area tanaman
Kontrol gaya adalah sebagai berikut:
* {padding: 0; margin: 0;} body {latar belakang: #454545; } .main {width: 500px; margin: 50px auto;}. Main img {width: 500px; Posisi: Absolute; Kiri: 450px; Atas: 50px;}. Img_box {overflow: tersembunyi; Posisi: Absolute; Atas: 0px; Kiri: 0px; z-index: 2;}. Outer {overflow: tersembunyi; Latar belakang: #000; Opacity: 0.4; Posisi: Absolute; Atas: 0px; Kiri: 0px; z-index: 0;}. Box_border1, .box_border2, .box_border3, .box_border4 {opacity: 0.5;}. box_border1 {latar belakang: url (./ gambar/border-anim-v.gif) ulangi-yound-y) bording-y) .box_border. top;}. box_border3 {background: url (./ gambar/border-anim-v.gif) ulangi kanan-y Top;} .box_border4 {latar belakang: url (./ gambar/border-anim-h.gif) Repeat-x kanan bawah;} .box_handle {latar belakang: #fff; Perbatasan: 1px Solid #000; opacity: 0.5;}. Confrim {width: 80px; Tinggi: 35px;}Efek tata letak adalah sebagai berikut:
Fungsi umum
Setelah menyelesaikan pemangkasan gambar, melalui prinsip di atas, kita dapat mengetahui bahwa kita perlu mendapatkan sejumlah besar objek tag dan atribut CSS tag, dll., Jadi kita dapat menulis fungsi umum untuk mendapatkan nilai -nilai ini dengan lebih baik. sebagai berikut:
Dom mendapatkan fungsinya
/ * Get */function $ (dom) {function getDom (dom) {var str = dom.charat (0); switch (str) {case '.' : this.ele = document.geteLementsByClassName (dom.substring (1)) || null; merusak; case '#': this.ele = document.geteLementById (dom.substring (1)) || batal; merusak; default: if (document.geteLementsByTagname (dom) .length) {this.ele = document.geteLementsByTagname (dom); } else if (document.geteLementsByName (dom) .length) {this.ele = document.geteLementsByName (dom); } else {this.ele = null; }} kembalikan ini; }; getDom.prototype.get = function (num) {return this.ele [num] || this.ele; } getDom.prototype.insert = function (value, num) {this.ele [num] .innerHtml = value; } return new getdom (dom);}Fungsi memperoleh atribut CSS
Akuisisi atribut CSS dibagi menjadi dua jenis. Salah satunya adalah IE, menggunakan currentStyle ; Yang lainnya adalah browser arus utama lainnya, menggunakan getComputedStyle , dan berikut ini adalah versi yang kompatibel:
/* Css get*/function getCss (o, key) {return o.currentstyle? o.currentstyle [key]: document.defaultview.getComputedstyle (o, false) [key]; };Fungsi penugasan
Saat menulis, saya sering menemukan penugasan DOM Styles. Untuk kenyamanan, saya secara khusus menulis fungsi untuk penugasan:
/** - Tetapkan fungsi - @param: obj Obj yang ditetapkan - @param: Operasi dilakukan oleh opsi - @parma: value as ditugaskan konten*/fungsi setassign (obj, opsi, nilai) {switch (opsi) {case 'width': obj.style.width = value; merusak; kasus 'tinggi': obj.style.height = value; merusak; kasus 'atas': obj.style.top = nilai; merusak; kasus 'kiri': obj.style.left = nilai; merusak; Kasus 'posisi': obj.style.position = nilai; merusak; kasus 'kursor': obj.style.cursor = nilai; }}Persiapan pada dasarnya telah selesai, dan sekarang tulisannya telah dimulai secara resmi.
Menggambar Area Tanaman Lengkap dengan mengklik dan memindahkan acara
Setel mousedown dan pemantauan acara mousemove untuk gambar, sebagai berikut:
// Mouse klik pada gambar untuk memicu opicture.onmousedown = function (ev) {// objek acara var oevent = ev || window.event; // posisi awal mouse var tempx = oevent.clientx; var temppy = oevent.clienty; // Sesuaikan posisi area tanaman otailor.style.left = oevent.clientx + 'px'; otailor.style.top = oevent.clienty + 'px'; // Mouse memindahkan area kliping untuk menggambar daerah crop Area Shadow Area Document.onMouseMove = function (ev) {// Mouse menggerakkan objek peristiwa var oevent = ev || window.event; // Posisi tikus saat ini dikurangi posisi mouse sebelum mouse sama dengan jarak gerakan mouse var sleft = oevent.clientx - tempx; var stop = oevent.clienty - Tempy; // Memangkas Batas di luar batas hanya membutuhkan membatasi sisi kanan dan bawah jika ((Otailor.Offsetleft+otailor.offsetWidth)> = (opicture.offsetleft+opicture.offsetwidth)) {sleft = opicture.offsetleft+opicture.offsetwidth-oFailor. } if ((otaailor.offsettop+otailor.offsetheight)> = (opicture.offsettop+opicture.offsetheight)) {stop = opicture.offsettop+opicture.offsetheight - otailor.offsettop; } // menggambar area tanaman otailor.style.width = sleft + 'px'; otailor.style.height = stop + 'px'; // Tampilan Area Tanaman Otailor.Style.Display = 'Block'; // tampilan area bayangan untuk (var i = 0; i <oshadow.length; i ++) {oshadow [i] .style.display = 'block'; } // Bayangan Bayangan Menggambar Bayangan (Opiktur, Otailor, Oshadow); // Tambahkan penjahit perbatasan tanaman (Odiv, Ohandle, Otailor); // blokir acara default oevent.preventdefault (); }; // Lepaskan mouse untuk membatalkan dokumen acara gerakan.onMouseUp = function (ev) {var oevent = ev || window.event; // pindahkan acara batal document.onmouseMove = null; // blokir acara default oevent.preventdefault (); }; // blokir acara default oevent.preventdefault ();}Menggambar area bayangan
/** * @param: oPicture picture dom object* @param: oTailor crop area dom object* @param: oShadow shadow area dom object*/ function shadow(oPicture , oTailor , oShadow) { // left shadow area setAssign(oShadow[0] , 'width' , (parseInt(getCss(oTailor , 'left')) - parseInt(getCss(oPicture , 'Kiri'))) + 'px'); setassign (oshadow [0], 'tinggi', parseint (getCss (opicture, 'left'))) + 'px'); setassign (oshadow [0], 'tinggi', parseint (getCss (opicture, 'height')) + 'px'); setAssign(oShadow[0] , 'left' , parseInt(getCss(oPicture, 'left')) + 'px') setAssign(oShadow[0] , 'top' , parseInt(getCss(oPicture, 'top')) + 'px') //The shadow area on the right is setAssign(oShadow[2] , 'width' , ; Setassign (Oshadow [2], 'Left', (parseInt (getCss (otailor, 'left'))) + parseInt (getCss (otailor, 'width'))) + 'px'); setassign (oshadow [2], 'top', parseint (getCss (opicture, 'top')) + 'px'); // Area Bayangan Atas Setassign (Oshadow [1], 'Width', ParseInt (getCSS (Otailor, 'width')) + 'px'); setassign (oshadow [1], 'height', (parseInt (getCss (otailor, 'top')) - parseInt (getCss (opicture, 'top'))) + 'px'); setassign (oshadow [1], 'kiri', (parseint (getCss (opicture, 'left'))) + parseInt (getCss (oshadow [0], 'width'))) + 'px'); setassign (oshadow [1], 'top', parseInt (getCss (opicture, 'top')) + 'px'); // Area Bayangan Bawah Setassign (Oshadow [3], 'Width', ParseInt (GetCSS (Otailor, 'Width')) + 'PX'); Setassign (Oshadow [3], 'Height', (parseint (getCss (opicture, 'height')) - parseInt (getCss (otailor, 'height')) - parseint (getCss (oshadow [1], 'height'))) + 'px'); setassign (oshadow [3], 'kiri', (parseint (getCss (opicture, 'left')) + parseInt (getCss (oshadow [0], 'width'))) + 'px'); setassign (oshadow [3], 'top', (parseInt (getCss (otailor, 'top')) + parseInt (getCss (otailor, 'height'))) + 'px');}Perhatikan bahwa dalam penggunaan halaman web yang sebenarnya, jika tidak ada atribut kiri atau atas dalam gambar CSS di tata letak, maka kode di atas akan menghasilkan kesalahan. Offsetleft dan offsettop harus digunakan sebagai gantinya.
Tambahkan perbatasan tanaman
Dalam diagram tata letak yang dilepaskan, Anda dapat melihat tepi tanaman, dan masing -masing dari empat sudut dan empat sisi memiliki bentuk persegi kecil. Penambahan ini tidak hanya untuk membedakan antara area pemotongan dan area non-potong, tetapi juga untuk memberikan kenyamanan untuk langkah selanjutnya untuk menambahkan area pemotongan yang diregangkan. Mari kita mulai menulis kode:
/** * Crop border drawing* @param : oDIv All border objects* @param : oHandle dotted edge* @param : oTailor crop object*/function tailorBorder(oDiv, oHandle, oTailor) { // Initialize the border for (var i = 0; i < oDiv.length; i++) { setAssign(oDiv[i] , 'position' , 'absolute'); setassign (odiv [i], 'top', '0px'); setassign (odiv [i], 'left', '0px'); setassign (odiv [i], 'left', '0px'); setassign (odiv [i], 'width', parseInt (getCss (otailor, 'width')) + 'px'); setassign (odiv [i], 'height', parseInt (getCss (otailor, 'height')) + 'px'); } /* Menggambar tepi seperti dot* / // menggambar tepi dot-like empat corner untuk (var i = 0; i <4; i ++) {// gambar-like menggambar setassign (ohandle [i], 'position', 'absolute'); setassign (ohandle [i], 'width', '5px'); setassign (ohandle [i], 'height', '5px'); // 0 2 berarti DOT-Like Left if (i % 2 == 0) {setassign (ohandle [i], 'left', '0px'); setassign (ohandle [i], 'top', (i == 0? '0px': (parseInt (getCss (otailor, 'height')) - 8) + 'px')); } else {// setassign seperti titik kanan (ohandle [i], 'left', (parseInt (getCss (otailor, 'width')) - 6) + 'px'); setassign (ohandle [i], 'top', (i == 1? '0px': parseInt (getCss (otailor, 'height')) - 8) + 'px'); }} // Perbatasan bertitik empat sisi untuk (var i = 4; i <ohandle.length; i ++) {setassign (ohandle [i], 'position', 'absolute'); setassign (ohandle [i], 'width', '5px'); setassign (ohandle [i], 'height', '5px'); // 4 6 menunjukkan batas putus -putus atas dan bawah jika (i % 2 == 0) {setassign (ohandle [i], 'kiri', parseInt (getCss (otailor, 'width')) / 2 + 'px'); setassign (ohandle [i], 'top', (i == 4? '0px': (parseInt (getCss (otailor, 'height')) - 8) + 'px')); } else {// titik kiri dan kanan setassign (ohandle [i], 'top', parseInt (getCss (otailor, 'height')) / 2 + 'px'); setassign (ohandle [i], 'top', parseint (getCSS (otailor, 'height')) / 2 + 'px'); setassign (ohandle [i], 'left', (i == 5? '0px': parseInt (getCss (otailor, 'width')) - 8) + 'px'); }}} Dalam tata letak, empat div pertama dengan nama kelas kliping nama box_handle mewakili titik -titik di empat sudut, dan empat terakhir mewakili titik -titik di tengah tepi, semuanya terdistribusi searah jarum jam. Setelah selesai, efeknya adalah sebagai berikut:
Monitor area yang dibayangi
Area tanaman dan area bayangan ditarik. Sekarang tambahkan fungsi kecil untuk membatalkan area tanaman saat mouse mengklik pada area yang tidak dipotong (mis., Area bayangan).
// Tetapkan waktu untuk pengaturan area bayangan, ketika area tanaman menghilang, area bayangan menghilang untuk (var i = 0; i <oshadow.length; i ++) {oshadow [i] .index = i; oshadow [i] .onmousedown = function () {otaailor.style.display = 'none'; otailor.style.width = '0px'; otailor.style.hegiht = '0px'; untuk (var i = 0; i <oshadow.length; i ++) {oshadow [i] .style.display = 'none'; oshadow [i] .style.left = '0px'; oshadow [i] .style.top = '0px'; }}}Pantau Posisi Gerakan Mouse
Selanjutnya, tambahkan fungsi peregangan area penanaman, yang memberikan efek berbeda ketika tikus bergerak ke batas berbentuk titik di tepi.
Tambahkan efek tampilan mouse
// Pengaturan Pemantauan Perbatasan Runcing Operasi yang sesuai otaailor.onMouseMove = function (ev) {var otarget = oevent.target; switch (otarget.id) {case 'box_1': // setassign kiri atas (otailor, 'kursor', 'nw-resize'); merusak; case 'box_2': // setassign kanan atas (otailor, 'kursor', 'ne-resize'); merusak; case 'box_3': // lower left setassign (otailor, 'kursor', 'sw-resize'); merusak; case 'box_4': // Bawah setassign kanan (otailor, 'kursor', 'se-resize'); merusak; case 'box_5': // setasign atas (otailor, 'kursor', 'n-resize'); merusak; case 'box_6': // meninggalkan setassign (otailor, 'kursor', 'w-resize'); merusak; case 'box_7': // lower left setassign (otailor, 'kursor', 's-resize'); merusak; case 'box_8': // tepat setassign (otailor, 'kursor', 's-resize'); merusak; case 'box_8': // tepat setassign (otailor, 'kursor', 'e-resize'); merusak; Default: // Area tanaman menampilkan setassign prompt yang dapat dipindahkan (otailor, 'kursor', 'move'); merusak; }}Karena ada banyak div untuk dipantau, itu ditambahkan oleh delegasi acara, yang tidak nyaman untuk demonstrasi. Siswa yang tertarik dapat mengujinya sendiri.
Tambahkan efek peregangan
Kode
// pindahkan acara di area tanaman otailor.onmousedown = function (ev) {// acara acara var oevent = ev || window.event; // Dapatkan status kursor var ocur = getCSS (otailor, 'kursor'); // posisi mouse awal var stmpx = oevent.clientx; var stmpy = oevent.clienty; // Dapatkan atribut area tanaman untuk menyelamatkan mereka dengan objek untuk memfasilitasi memanggil oattrs. oattrs.top = getCSS (otailor, 'top'); oattrs.width = getCSS (otailor, 'width'); oattrs.height = getCSS (otailor, 'height'); document.onmouseMove = function (ev) {// pindahkan objek acara var oevent = ev || window.event; // Posisi mouse saat ini dikurangi posisi mouse awal sama dengan jarak gerakan mouse var sleft = oevent.clientx - stmpx; var stopt = oevent.clienty - stmpy; // menunjukkan jarak gerakan mouse var otmpheight = ''; var otmptop = ''; var otmpwidth = ''; var otmpleft = ''; switch (ocur) {case 'nw -resize': // bagian kiri atas otmpwidth = parseInt (oattrs.width) - sleftt; otmpheight = parseInt (oattrs.height) - stopt; OTMPLEFT = ParseInt (oattrs.Left) + SLEFTT; OTMPTOP = parseInt (oattrs.top) + stopt; merusak; Case 'Ne-resize': // Atas kanan // Pada saat ini, lebar tidak dapat mengurangi jarak gerakan mouse karena jarak gerakan pada saat ini adalah nilai positif otmpwidth = parseInt (oattrs.width) + SLEFTT; otmpheight = parseInt (oattrs.height) - stopt; // Tidak ada nilai kiri yang diperlukan untuk memindahkan sudut kanan atas karena suara default dipindahkan otmptop = parseInt (oattrs.top) + stopt; merusak; case 'SW -resize': // Bawah kiri // Sama seperti ketinggian kanan atas harus ditambahkan ke jarak gerakan mouse otmpwidth = parseInt (oattrs.width) - sleft; otmpheight = parseInt (oattrs.height) + stopt; OTMPLEFT = ParseInt (oattrs.Left) + SLEFTT; merusak; case 'se-resize': // bawah kanan // Kombinasi kiri bawah dan kanan atas pada saat yang sama lepaskan otmpwidth kiri dan atas = parseInt (oattrs.width) + SLEFTT; otmpheight = parseInt (oattrs.height) + stopt; merusak; case 'n -resize': // top otmpheight = parseInt (oattrs.height) - stopt; OTMPTOP = parseInt (oattrs.top) + stopt; merusak; case 'w -resize': // meninggalkan otmpwidth = parseInt (oattrs.width) - sleftt; OTMPLEFT = ParseInt (oattrs.Left) + SLEFTT; merusak; case 'S-resize': // di bawah otmpheight = parseInt (oattrs.height) + stopt; merusak; case 'e-resize': // right var otmpwidth = parseInt (oattrs.width) + SLEFTT; merusak; Default: // Kalau tidak, itu adalah area tanaman yang bergerak tailormove (oevent, otailor, opicture, oshadow); merusak; } // Tarik ke batas jika (parseInt (getCSS (otailor, 'top')) <= opicture.offsettop) {otmpheight = parseInt (getCss (opicture, 'height')) - (opicture.offsettop+parseInt (getCSS (opicture, 'height')))-parseInt (getCSS (otailor, 'top'))))); OTMPTOP = opicture.offsettop; } lain jika (opicture.offsettop+parseInt (getCss (opicture, 'height')) <= (parseInt (getCss (otailor, 'top'))))+parseInt (getCss (otailor, 'height'))) {// Tarik ke bawah ke batas otailor = opicture.offsettop+parseInt (getCSS (opicture, 'height'))) - parseInt (getCss (otailor, 'top')); } // Tarik kiri ke batas if ((parseInt (getCss (otailor, 'left'))) <= opicture.offsetleft) {otmpwidth = parseInt (getCSS (opicture, 'width')) - (opicture.offsetleft+parseInt (getCSS (opicture), 'width')-parseInt (getCSS (otailor, 'left'))) otmpleft = opicture.offsetleft; } lain jika (parseInt (getCss (otailor, 'left'))+parseInt (getCss (otailor, 'left'))> = (opicture.offsetleft+opicture.offsetwidth)) {// Tarik kanan ke batas otmpwidth = opicture.offsetlefse.offsetlefet. parseint (getCSS (otailor, 'left')); } // Tetapkan if (otmpwidth) {setassign (otailor, 'width', otmpwidth + 'px'); } if (otmpheight) {setassign (otailor, 'height', otmpheight + 'px'); } if (otpleft) {setassign (otailor, 'left', otpleft + 'px'); } if (otmptop) {setassign (otailor, 'top', otmptop + 'px'); } // Bayangan Bayangan Menggambar Bayangan (Opiktur, Otailor, Oshadow); // Tambahkan penjahit perbatasan tanaman (Odiv, Ohandle, Otailor); }; // Saat merilis mouse, harap dicatat bahwa Anda membatalkan dokumen acara gerakan.onMouseUp = function (ev) {// acara acara var oevent = ev || window.event; document.onmouseMove = null; oevent.preventdefault (); } oevent.preventdefault (); };Perhatikan perhitungan jarak bergerak saat peregangan, terutama saat bergerak ke atas dan ke kiri. Perhatikan mengubah nilai kiri dan atas dari area yang dipotong secara bersamaan, jika tidak, ia hanya akan meningkat ke bawah dan ke kanan. Mari kita bicara tentang cara menghitung secara detail:
prinsip
Mengambil mouse yang membentang ke sudut kiri atas sebagai contoh, jarak bergerak mouse konsisten dengan apa yang disebutkan di atas, tetapi pada saat ini, harap dicatat bahwa nilai yang dihitung adalah angka negatif. Oleh karena itu, ketika menghitung nilai tambah area tanaman, nilainya harus dikurangi dengan lebar atau tinggi area tanaman asli. Pada saat yang sama, sebanyak lebar meningkat, nilai offset kiri dari area tanaman harus dikurangi. Kalau tidak, efek yang ditampilkan adalah bahwa area tanaman meningkat ke kanan, seperti yang ditunjukkan pada gambar di bawah ini:
Pada gambar di atas, area hijau adalah area penanaman setelah lebar dan tinggi ditambahkan saat diregangkan. Jika penyesuaian offset tidak dilakukan, area kuning adalah area penanaman setelah lompatan offset, dan dua area yang ditumpangkan adalah area penanaman asli.
Ini membentang di sudut kiri atas, dan peregangan di sudut kiri bawah mirip dengan hal -hal lain. Anda dapat meletakkannya ke arah atas sesuai dengan arah atas.
Dan kunci lainnya adalah peregangan dan melintasi batas telah disebutkan di atas, jadi saya tidak akan menggambarkannya lagi.
Pergerakan daerah yang dipotong
Sekarang mari kita bicara tentang fungsi terakhir, pergerakan area tanaman. Ketika tikus bergerak di dalam area tanaman, peristiwa gerakan akan dipicu. Pada saat ini, area tanaman dapat dipindahkan. Kodenya adalah sebagai berikut:
/* Gerakan area tanaman*/fungsi tailormove (EV, Otailor, Opicture, Oshadow) {var oevent = ev || window.event; var otmpx = oevent.clientx - otailor.offsetleft; var otmpy = oevent.clienty - otailor.offsettop; document.onmouseMove = function (ev) {var oevent = ev || window.event; oleft = oevent.clientx - otmpx; otop = oevent.clienty - otmpy; if (oleft <opicture.offsetleft) {oleft = opicture.offsetleft; } lain jika (oleft> (opicture.offsetleft + opicture.offsetWidth - otailor.offsetWidth)) {oleft = opicture.offsetleft + opicture.offsetWidth - otailor.offsetwidth; } if (otop <opicture.offsettop) {otop = opicture.offsettop; } lain jika (otop> (opicture.offsettop + opicture.offsetheight - otailor.offsetheight)) {otop = opicture.offsettop + opicture.offsetheight - otailor.offsetheight; } otailor.style.left = (oleft)+ 'px'; otailor.style.top = (otop) + 'px'; bayangan (opicture, otailor, oshadow); }}Dapatkan posisi tanaman
Fungsi efek tanam pada dasarnya selesai, jadi Anda perlu mendapatkan posisi tanaman. Pertama -tama, Anda perlu mengetahui properti mana yang perlu Anda peroleh. Menurut operasi perpustakaan GD PHP , Anda perlu mengetahui koordinat titik awal tanaman dan lebar dan tinggi tanaman. Saya menggunakan fungsi untuk mendapatkan data ini dan merangkumnya dan mengembalikan:
fungsi getele () {var opicture = $ ('img'). get (0); var otailor = $ ('. img_box'). get (0); oattrs.leftx = (parseInt (getCSS (otailor, 'left'))) - opicture.offsetleft); oattrs.lefty = (parseInt (getCSS (otailor, 'top'))) - opicture.offsettop); oattrs.twidth = (parseInt (getCSS (otailor, 'width')))); oattrs.theight = (parseInt (getCSS (otailor, 'height'))); mengembalikan oattrs;}Ada masalah lain. Jika gambar di halaman web dikompresi menggunakan CSS, posisi yang diperoleh di sini akan berbeda dari ukuran tanaman dari yang Anda bayangkan. Kisaran gambar yang dipangkas dapat menjadi lebih besar (gambar aslinya lebih besar), atau mungkin menjadi lebih kecil (gambar aslinya lebih kecil).
Jika ukuran gambar asli dapat diperoleh, Anda dapat memotong sesuai dengan rasio gambar terkompresi dengan gambar asli, sehingga gambar penanaman yang benar dapat diperoleh.
OK, fungsi penanaman gambar sederhana selesai, dan Anda dapat menggunakan AJAX untuk meneruskannya ke latar belakang untuk diproses.
Isi artikel ini berakhir di sini. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan untuk didiskusikan. Saya harap artikel ini akan membantu semua orang dalam mempelajari JavaScript.