Diskuze: posouvání stránky myší
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Člen

Zobrazeno 9 zpráv z 9.
//= Settings::TRACKING_CODE_B ?> //= Settings::TRACKING_CODE ?>
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Ahoj,
zkoušel jsi celou stránku naprogramovat jako jedno velké
SVG?
Pak bys mohl použít sémantický nebo geometrický zoom,
případně drag behavior.
Trochu jsem s tím experimentoval zde:
odkaz
Při najetí kurzorem na prázdné místo v síti se celá síť posune nebo při použití kolečka sémanticky zazoomuje.
Třeba ale existuje jiný, úplně jednoduchý způsob jak posouvat celou stránku a ne jen SVG.
Zkus dát do vyhledávače slova zoom, pan, drag
zkus google = js drag drop
(V css se da orezavat pomoci clip.)
<div style="position:relative; background-image:url();" onmousedown="startMove(event)" onmousedown="stopMove(event)"></div>
A stacilo by jen ulozit si pozici mysi z eventu a do nejake promenne provest zmenu pozice obrazku a nastavit podle toho background-position.
<style>
.mapa {
position:relative;
background-image:url(https://www.google.com/logos/doodles/2018/80th-anniversary-of-the-rapid-arrows-6214742761799680-l.png);
width:200px;
height:200px;
background-position:0 0;
background-repeat:no-repeat;
border:1px solid #888;
top:200px;
left:300px;
cursor:move;
}
</style>
<div id="mapa" class="mapa" onmousedown="rrr.startMove(event)" onmousemove="rrr.move(event)" onmouseup="rrr.stopMove(event)" onmouseout="rrr.stopMove(event)"></div>
<script>
var rrr;
rrr = {};
rrr.started = false;
rrr.img = {};
rrr.img.el = document.getElementById('mapa');
rrr.img.pos = {x:0, y:0};
rrr.mouse = {};
rrr.mouse.start = {x:0, y:0};
rrr.mouse.move = {x:0, y:0};
rrr.mouse.end = {x:0, y:0};
rrr.diffStop = function (index)
{
return rrr.mouse.end[index] - rrr.mouse.start[index];
}
rrr.getMouse = function (event)
{
var target, x, y;
event = event || window.event; // IE-ism
target = event.target ? event.target : event.srcElement ? event.srcElement : null;
x = event.x ? event.x : event.clientX;
y = event.y ? event.y : event.clientY; // var cursorX = e.pageX; // var cursorY = e.pageY;
return {x: x, y: y};
}
rrr.startMove = function (event)
{
rrr.started = true;
rrr.mouse.start = rrr.getMouse(event)
}
rrr.move = function (event)
{
var pos, start, move;
if (rrr.started==false)
{return;}
pos = {};
pos.x = rrr.img.pos.x; // kopie pos
pos.y = rrr.img.pos.y;
start = rrr.mouse.start;
move = rrr.getMouse(event);
pos.x = pos.x - (move.x - start.x);
pos.y = pos.y - (move.y - start.y);
rrr.img.el.style.backgroundPosition = (-pos.x)+"px "+(-pos.y)+"px";
}
rrr.stopMove = function (event)
{
var pos, start, end;
if (rrr.started==false)
{return;}
rrr.started = false;
pos = rrr.img.pos; // pointer na pos
start = rrr.mouse.start;
end = rrr.getMouse(event)
pos.x = pos.x - (end.x - start.x);
pos.y = pos.y - (end.y - start.y);
rrr.img.pos = pos;
rrr.img.el.style.backgroundPosition = (-pos.x)+"px "+(-pos.y)+"px";
}
</script>
Díky za nápady! O SVG jsem, přiznám se, nikdy neslyšel. Je to ale
víceméně to, co bych potřeboval. Jak moc je složité se naučit udělat
něco takového v SVG?
To, co vytvořil Peter Milch, je super. Takhle to potřebuju. Jen tady to
funguje na bázi obrázku na pozadí, ale když tam chci obsah (jakožto spoustu
obrázků a nějaký text), tak to nepůjde ne? Musel bych mít celou stránku
jako jeden velký obrázek, nebo se mýlím?
Já pro práci s SVG používám knihovnu d3.js
Tady je odkaz na jeden příklad drag včetně zdrojového
kódu:
bl.ocks.org
Těžké to není, ale bude tam pár drobných problémů, např. s
připojováním divů nebo spanů k SVG - viz diskuze:
ZDE
Celkově bych doporučil tento přístup použít jen v případě, že je
stránka generována/řízena nějakými daty.
Pujde, to zvladnes i sam.
Jsou to zaklady css, js. css: position:relative/absolute, top, left.
rrr.img.el.style.left = cislo + 'px' // rrr.img.el.style.right = cislo + 'px'
https://www.jakpsatweb.cz/…icovani.html
To svg je lepsi v tom, ze je to vektorova grafika slozena z objektu. Kdyz
potrebujes nejaky objekt 10x, tak si ho snadno naklonujes. (to se da u pixel
obrazku taky). Ale, kdyz potrebujes zoom out/in, tak image se ti rozpixeluje,
vektorova grafika nee. Tez je to lepsi pro tisk stranky. (to se da u pixel
obrazku vyresit 2-3x vetsi velikosti, aby bylo dost pixelu pro tisk, na stranku
ho pak zmensujes. Nevyhoda je, ze zabira potom 4x tolik mista, obvykle 2x takova
velikost v kb)
Takovy priklad pouziti svg https://mlich.zam.slu.cz/…js-tanks.htm
Díky, mám hotovo!
Teď si říkám, proč jsem došel hned k závěru, že to nejde, když na tom
není vůbec nic složitého . Kdybych se trochu zamyslel, hned by mě to napadlo. Dodělal jsem to
takhle:
v rrr.move a rrr.stopMove jsem místo
rrr.img.el.style.backgroundPosition = (-pos.x)+"px "+(-pos.y)+"px";
napsal
rrr.img.el.style.left = (-pos.x)+ 'px';
rrr.img.el.style.top = (-pos.y)+ 'px';
A do divu mapa jsem ještě přidal nový div a ten jsem místo mapy
definoval jako rrr.img.el a dal jsem mu stejné atributy. Kdybych tohle
neudělal, posouvalo by se mi jediné místo, ve kterém se dá posouvat, takže
po posunutí by se nedalo posouvat v místě, kde neleží. Takhle mi div mapa
zůstává furt na jednom místě a posouvá se jen vnitřní div.
Vše teď funguje jak má.
Ono se da take vyuzit css vlastnosti clip. Nemusi se nic posouvat.
Zobrazeno 9 zpráv z 9.