Teisingos vilkimo padėties apskaičiavimas naudojant „JavaScript“ vertimą ir mastelį

Nuvilkite ir numeskite naudodami mastelio keitimą „JavaScript“.

Sukurti sklandų ir greitą nuvilkimo patirtį gali būti sudėtinga, ypač kai reikia keisti, pvz., mastelio keitimą. Jei naudojate transformuoti: translate () elementų judėjimo savybė, pridėjus mastelį prie elemento, bus paveiktas jo dydis ir padėtis, todėl skaičiavimai nutrūks.

Pagal šį scenarijų paprasčiausiai pakoregavus padėtį naudojant pelės judėjimo koordinates, laukiamas rezultatas neduos, nes pakeistas elementas nebejuda taip, kaip būtų pradinio dydžio. Dėl to kyla problemų apskaičiuojant teisinga elemento padėtis tempimo metu.

Nesvarbu, ar kuriate pasirinktinę nuvilkimo biblioteką, ar integruojate šią funkciją į savo projektą, labai svarbu suprasti, kaip teisingai apskaičiuoti pozicijas, kai taikomas mastelio keitimas. Turite pakoreguoti kodą, kad atsižvelgtumėte į skalės vertę, kad užtikrintumėte tikslią elementų vietą.

Šiame straipsnyje bus paaiškinta, kaip apskaičiuoti teisingą elemento padėtį vilkimo metu naudojant išversti metodas „JavaScript“, naudojant mastelio keitimą. Taip pat atliksime veiksmus ir formules, kurias reikia pritaikyti prie elemento mastelio ir užtikrinti sklandų tempimą.

Supratimas, kaip tvarkyti elemento padėtį naudojant vertimą ir mastelį

Pateiktais scenarijais siekiama išspręsti dažnai pasitaikančias problemas, susijusias su vilkimo funkcija naudojant išversti metodas „JavaScript“, ypač kai elementui taikoma mastelio transformacija. Pirmasis scenarijus klausosi žymeklio įvykių, kad galėtų sekti vartotojo vilkimo sąveiką. Naudodami getBoundingClientRect() metodu, jis apskaičiuoja pradinę elemento padėtį ekrane. Tai būtina norint nustatyti, kur elementas yra peržiūros srities atžvilgiu, ypač kai skalė nėra 1, todėl elementas elgiasi kitaip nei pradinis dydis.

Pagrindinės funkcijos tvarkomos viduje dragElement funkcija, kuri apskaičiuoja judėjimo delta. Vilkimo judesys reguliuojamas padalijus žymeklio judėjimą iš mastelio koeficiento, kad atstumas būtų tiksliai pažymėtas net tada, kai elementas yra padidintas arba sumažintas. Šis metodas padeda išvengti elemento „šokinėjimo“ arba netinkamos vietos vilkimo metu. Tada scenarijus taiko šiuos koregavimus naudodamas transformavimo ypatybę, kartu naudodamas ir vertimo, ir mastelio funkcijas. Tai užtikrina, kad elementas judėtų sklandžiai, išlaikant transformuotą dydį.

Papildomas iššūkis, sprendžiamas scenarijuje, yra užtikrinti, kad vilkimo įvykis būtų tinkamai išvalytas. Atlikus vilkimo veiksmą, įvykių klausytojai pašalinami naudojant PašalintiEventListener kad išvengtumėte atminties nutekėjimo ir netyčinio elgesio. Tai garantuoja, kad scenarijus reaguos tik tada, kai reikia, užtikrindamas geresnį našumą ir patogumą. Be to, naudojant setProperty() Metodas leidžia dinamiškai koreguoti CSS kintamuosius, didinant lankstumą, kaip vilkimo sąveikos gali būti stilizuojamos arba tinkinamos neįkoduojant verčių į JavaScript.

Alternatyvaus sprendimo atveju naudojami vienetiniai bandymai su console.assert() prideda papildomą diegimo patvirtinimo sluoksnį. Tai padeda užtikrinti, kad skaičiavimai veiktų taip, kaip tikėtasi, ypač mastelio aplinkoje. Išbandydamas vilkimo operacijos rezultatą pagal iš anksto nustatytas sąlygas, scenarijus užtikrina, kad jis tvarko kraštutinius atvejus, pvz., nevienodą mastelio keitimą arba skirtingus iš anksto nustatytus poslinkius. Šis metodas ne tik pagerina vilkimo ir numetimo funkcijos patikimumą, bet ir daro kodą labiau moduliuotą ir galimą pakartotinai naudoti įvairiuose kontekstuose.

let startX, startY, initialX, initialY, scale = 1;
const draggable = document.getElementById('draggable');
draggable.addEventListener('pointerdown', startDrag);

function startDrag(e) {
  startX = e.clientX;
  startY = e.clientY;
  const rect = draggable.getBoundingClientRect();
  initialX = rect.left;
  initialY = rect.top;
  document.addEventListener('pointermove', dragElement);
  document.addEventListener('pointerup', stopDrag);
}

function dragElement(e) {
  const deltaX = (e.clientX - startX) / scale;
  const deltaY = (e.clientY - startY) / scale;
  draggable.style.transform = `translate(${initialX + deltaX}px, ${initialY + deltaY}px) scale(${scale})`;
}

function stopDrag() {
  document.removeEventListener('pointermove', dragElement);
  document.removeEventListener('pointerup', stopDrag);
}

let startX, startY, initialX, initialY, scale = 1;
const draggable = document.getElementById('draggable');
draggable.addEventListener('pointerdown', startDrag);

function startDrag(e) {
  startX = e.clientX;
  startY = e.clientY;
  const rect = draggable.getBoundingClientRect();
  initialX = rect.left / scale;
  initialY = rect.top / scale;
  document.addEventListener('pointermove', dragElement);
  document.addEventListener('pointerup', stopDrag);
}

function dragElement(e) {
  const deltaX = (e.clientX - startX) / scale;
  const deltaY = (e.clientY - startY) / scale;
  draggable.style.setProperty('--x', initialX + deltaX + 'px');
  draggable.style.setProperty('--y', initialY + deltaY + 'px');
}

function stopDrag() {
  document.removeEventListener('pointermove', dragElement);
  document.removeEventListener('pointerup', stopDrag);
}

function testDragWithScale() {
  const element = document.createElement('div');
  element.style.width = '100px';
  element.style.height = '100px';
  element.style.transform = 'scale(2)';
  document.body.appendChild(element);
  startDrag({clientX: 100, clientY: 100});
  dragElement({clientX: 200, clientY: 200});
  const computedTransform = getComputedStyle(element).transform;
  console.assert(computedTransform.includes('translate(50px, 50px)'), 'Position adjusted correctly with scale');
}

testDragWithScale();

Elementų mastelio keitimas naudojant vilkimo ir numetimo funkciją

Kuriant tvirtą nuvilkimo sąsają, labai svarbu suprasti, kaip elgtis su transformacijomis, pvz., mastelio keitimu. Paprastai, kai elementas tempiamas naudojant išversti funkcija JavaScript, ją galima perkelti pagal pelės koordinates. Tačiau kai elemento mastelis keičiamas naudojant transformuoti: skalė () savybės, jos dydis ir judėjimas keičiasi, palyginti su pradiniais matmenimis. Norint apskaičiuoti teisingą padėtį, svarbiausia yra užtikrinti, kad padėtis būtų pritaikyta mastelio koeficientui. Jei nepaisysite mastelio, bus neteisinga padėtis ir elgsis nepastovus.

Norėdami tinkamai valdyti mastelio keitimą, atstumą, kurį elementas juda, turite padalyti iš skalės vertės. Tai užtikrina, kad elementas judėtų proporcingai su žymekliu, net kai jo dydis padidinamas arba sumažinamas. Naudojant getBoundingClientRect() padeda išmatuoti esamus elemento matmenis ir apskaičiuoti poslinkius pagal peržiūros srities padėtį. Šie poslinkiai yra labai svarbūs norint tiksliai nustatyti elemento padėtį vilkimo metu. Be to, koreguodami judėjimo deltas, kad būtų atsižvelgta į mastelį, išvengsite problemų, pvz., elemento judėjimo per greitai arba lėtai, palyginti su žymekliu.

Be to, nuvilkimo funkcijos moduliavimas leidžia pakartotinai naudoti įvairiuose kontekstuose. Šis modulinis metodas gali būti išplėstas, kad būtų galima apdoroti kelis elementus, skirtingus mastelius ir net vartotojo nustatytus poslinkius. Įvykių klausytojų naudojimas patinka addEventListener() užtikrina, kad vilkimas būtų nuoseklus naudojant skirtingus įvesties tipus, pvz., pelę, lietimą ar rašiklį. Tiksliai tvarkydami mastelį ir padėties nustatymą, užtikrinate, kad vilkimo sąsaja išliks intuityvi ir sklandi, nepaisant to, kaip elementas transformuojamas.