clip-Problem...

**Fridolin93** · 05-04-2011, 16:50

Guten Tag,

ich habe ein kleines Problem und zwar:

möchte ich nur einen ausschnitt eines Bildes mit "clip" anzeigen lassen.
funktioniert alles super, aber wie bekomme ich es hin, dass der angezeigt ausschnitt in der linken oberen ecke beginnt?
im moment wird alles andere außer dem rechteck, das ich clipen will, ausgeblendet; steht also an der ursprünglichen stelle. es soll aber links oben stehen.
wie geht das?
bzw. was muss ich tun?

lG

**miniA4kuser** · 05-04-2011, 17:07

Code? Testlink? Sonst können wir nur raten...

**Fridolin93** · 05-04-2011, 17:09

oder besser gesagt:
ich möchte, dass mein geclipter bereicht dann größer ausgegeben wird.
sprich:
ich clipe einen 100x100px bereich eines bildes. dieser bereich, soll dann vergrößert werden auf 400x400px.
eine art "Lupe"...

**miniA4kuser** · 05-04-2011, 17:15

Hast du schon einen Ansatz? Hast du schon etwas ausprobiert? Wenn ja dann

Zitat von miniA4kuser

Code? Testlink? Sonst können wir nur raten...

ansonsten mal Herrn Google fragen

**Fridolin93** · 05-04-2011, 17:26

da gibts eig. nicht viel, was zu der frage interessiert..

HTML-Code:

var oben = (parseInt(kastenY)-abstandY)*zoomFaktor/100;
var links = (parseInt(kastenX)-abstandX)*zoomFaktor/100;
var unten = (parseInt(kastenY)-abstandY+kastenHoehe)*zoomFaktor/100;
var rechts = (parseInt(kastenX)-abstandX+kastenHoehe)*zoomFaktor/100;
	lupe.style.clip = "rect(" + oben + "px " + rechts + "px " + unten + "px " + links + "px)";

das hab ich. und das lass ich dynamisch immer ändern (folgt der mousposition).
mein problem ist jetzt:
wenn ich clip verwende ist das was ich damit ausschneide an seiner ursprünglichen stelle. also an der stelle an der es im bild auch war. und außenrum sind leere balken.
ich will die balken weg haben und dass der ausgeschnittene bereich, dann in der linken oberen ecke steht.

**kkapsner** · 05-04-2011, 21:58

Da musst du hald auch die position entsprechend anpassen:

Code:

lupe.style.top  = "-" + oben + "px";
lupe.style.left = "-" + links + "px";

- position: relative; vorausgesetzt.

**Fridolin93** · 06-04-2011, 16:42

ok, habs und läuft alles

aber: den "zoom" erzeug ich, indem ich das bild nochmals einfügen lasse und das dann mit "clip" bearbeite.
ein problem habe ich aber noch:
wenn ich an den rand komme, "hüpft" mein gezoomtes (in richtung des randes an den man kommt) um 1px*zoomfaktor...

hier mal mein gesammter quellcode:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Lupe2</title>
<meta name="author" content="Miran Mizani">

<style type="text/css">
body {
	width: 800px;
	border-left: 1px solid black;
	border-right: 1px solid black;
	text-align: center;
	margin: 0px auto 0px auto;
}
#bild {
	width: 400px;
	height: auto;
}
#bildRahmen {
	border: 3px double red;
	height: auto;
	width: 406px;
}
#lupe {
	width: 400px;
	height: 400px;
	border: 0px double black;
	background-color: white;
	position:absolute;
	display: none;
	overflow: hidden;
	background-color:transparent;
}
#kasten {
	width: 150px;
	height: 100px;
	position:absolute;
	border: 2px solid white;
	display:none;
	background-image: url(kastenBG.png);
	z-index: 10;
}
</style>

<script type="text/javascript">

function getStyleTHIS(el,styleProp)
{
var x = el;
if (x.currentStyle)
var y = x.currentStyle[styleProp];
else if (window.getComputedStyle)
var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
return y;
}


//-----------------------------------------------------------------------
var zoomFaktor = 300; //in %
var bild = "bild1.png";
//-----------------------------------------------------------------------



function einstellungen() {
document.getElementById("bild").addEventListener('mousemove', bereich, false);
document.getElementById("bild").addEventListener('mouseover', bereich, false);
document.getElementById("bild").addEventListener('mouseover', innerhalb, false);
document.getElementById("kasten").addEventListener('mousemove', bereich, false);
document.getElementById("kasten").addEventListener('mouseout', ausserhalb, false);

document.getElementById("lupeZoom").value = "1";
document.getElementById("bild").src = bild;
document.getElementById("lupe").src = bild;
}
function lupeAn() {
	var bild = document.getElementById("bild");
	var lupe = document.getElementById("lupe");
	var abstandX = parseInt(bild.offsetLeft) + parseInt(getStyleTHIS(bild, "width")) + 30;
	var abstandY = parseInt(bild.offsetTop);
	var lupeZoom = document.getElementById("lupeZoom");
	var lupeBreite = parseInt(getStyleTHIS(bild, "width"));
	var lupeHoehe = parseInt(getStyleTHIS(bild, "height"));
	if (lupeZoom.value == "1") {
	lupe.style.width = lupeBreite*(zoomFaktor/100);
	lupe.style.height = lupeHoehe*(zoomFaktor/100);
	}
	lupeZoom.value = "0";
}
function innerhalb() {
document.getElementById("kasten").style.display = "inline";
document.getElementById("ausserhalb").value = "1";
lupeAn();
}
function ausserhalb() {
document.getElementById("kasten").style.display = "none";
document.getElementById("ausserhalb").value = "0";
document.getElementById("lupe").style.display = "none";
}
function bereich(ereignis) {
	var bild = document.getElementById("bild");
	var kasten = document.getElementById("kasten");
	var lupe = document.getElementById("lupe");
	var ausserhalb = document.getElementById("ausserhalb").value;
	var kastenBreite = parseInt(getStyleTHIS(kasten, "width")+4);//<- border
	var kastenHoehe = parseInt(getStyleTHIS(kasten, "height")+4);//<- border
	var bildBreite = parseInt(getStyleTHIS(bild, "width"));
	var bildHoehe = parseInt(getStyleTHIS(bild, "height"));
	var mausX = parseInt(ereignis.pageX);
	var mausY = parseInt(ereignis.pageY);
	var abstandX = parseInt(bild.offsetLeft);
	var abstandY = parseInt(bild.offsetTop);
	var kastenX = mausX-(kastenBreite/2);
	var kastenY = mausY-(kastenHoehe/2);
	var GrenzeRechts = abstandX + bildBreite - kastenBreite + 3;//<- border
	var GrenzeLinks = abstandX + 1;
	var GrenzeOben = abstandY;
	var GrenzeUnten = abstandY + bildHoehe - kastenHoehe - 4;//<- border
	if (kastenX >= GrenzeRechts) {kastenX = GrenzeRechts;}
	if (kastenX <= GrenzeLinks) {kastenX = GrenzeLinks;}
	if (kastenY <= GrenzeOben) {kastenY = GrenzeOben;}
	if (kastenY >= GrenzeUnten) {kastenY = GrenzeUnten;}
	kasten.style.left = kastenX;
	kasten.style.top = kastenY;
	if (ausserhalb == "1") {kasten.style.display = "inline";}
	else {kasten.style.display = "none";}

if ((mausX>=(GrenzeLinks+kastenBreite/2))&&(mausX<=(GrenzeRechts+kastenBreite/2))) {
lupe.style.left = (parseInt(bild.offsetLeft) + parseInt(getStyleTHIS(bild, "width"))+kastenBreite*2+ 30)-(mausX-abstandX)*zoomFaktor/100;
var X = "ok";
}
if ((mausY>=(GrenzeOben+kastenHoehe/2))&&(mausY<=(GrenzeUnten+kastenHoehe/2))) {
lupe.style.top = (abstandY+(bildHoehe)/2)-(mausY-abstandY)*zoomFaktor/100;
var Y = "ok";
}
if ((X=="ok")&&(Y=="ok")) {
lupe.style.display = "inline";}


var oben = (parseInt(kastenY)-abstandY)*zoomFaktor/100;
//if (kastenY==GrenzeOben) {oben = oben+2;}
var unten = (parseInt(kastenY)-abstandY+kastenHoehe)*zoomFaktor/100;
var links = (parseInt(kastenX)-abstandX)*zoomFaktor/100;
var rechts = (parseInt(kastenX)-abstandX+kastenBreite)*zoomFaktor/100;
	lupe.style.clip = "rect(" + oben + "px " + rechts + "px " + unten + "px " + links + "px)";
}

/* "Hüpft" manchmal, weil dann die scrollleisten erscheinen...bild ist dann einfach zu groß... iFrame?*/



//document.all["..."].style.clip="rect(obenpx rechtspx untenpx linkspx)";

</script>
</head>
<body onload="einstellungen()">
<h1 align="center">Lupe</h1>
<br>

<div id="alles" style="text-align:left;">
<div id="kasten"></div>
<div id="bildRahmen"><img id="bild" alt="" src="bild.png"></div>

<div id="lupeRahmen"><img id="lupe" alt="" src="bild.png"></div>
<input type="text" id="ausserhalb" value="1" readonly></input>
<input type="text" id="lupeZoom" value="1" readonly></input>

</div>


<p align="right">
<i><font size="-1">&copy; Miran Mizani</font></i>
</p>
</body>
</html>

es liegt anscheinend daran, dass mein "clip" einmal mehr ausgefüht, als meine verschiebung...
aber ich grig es nicht weg...

**kkapsner** · 06-04-2011, 23:38

Das Problem ist, dass du deine Mausposition am Rand nicht so anpasst, dass der Rahmen nicht aus dem Bild ragt. - nur beim "kasten" machst du da etwas dagegen.
Das kann man daran sehen, dass der Versatz des Ausschnitts von der Gewindigkeit, mit der die Maus auf den Rand triff, abhängig ist.

**miniA4kuser** · 07-04-2011, 09:30

Gewindigkeit

**Fridolin93** · 07-04-2011, 18:10

super, das könnte es sein!
aber wie kann ich das ändern?
ich habe ja bei meinen Grenzen schon den border addiert.
könntet ihr mir dabei nochmal bitte helfen...

**kkapsner** · 07-04-2011, 23:13

Du könntest darauf achten, dass links und oben einen gewissen Wert nicht unterschreiten und rechts und unten einen gewissen Wert nicht überschreiten. Wenn sie es doch tun, kannst du das Ganze einfach um den Fehlbetrag in die richtige Richtung schieben.

**Fridolin93** · 08-04-2011, 23:36

ich weis jetzt nicht ob es elegant gelöst ist, aber ich habe es hinbekommen :-)
und zwar dadurch, dass ich die clip-werte immer an globale variabeln über gebe und die dann auslesen lasse.
vorteil: wenn sich der neue clip-wert nicht berechnen lässt, bleibt so der alte.
und die clip-werte lassen sich nur dann nicht berechnen, wenn der kasten an den rand stößt :-)

HTML-Code:

var obenSich;
var untenSich;
var linksSich;
var rechtsSich;



function bereich() {
...
var oben = obenSich;
var unten = untenSich;
var links = linksSich;
var rechts = rechtsSich;

if ((mausY>=(GrenzeOben+kastenHoehe/2))&&(mausY<=(GrenzeUnten+kastenHoehe/2))) {
var oben = (parseInt(kastenY)-abstandY+2)*zoomFaktor/100;
obenSich = oben;
var unten = (parseInt(kastenY)-abstandY+kastenHoehe+2)*zoomFaktor/100;
untenSich = unten;
}
if ((mausX>=(GrenzeLinks+kastenBreite/2))&&(mausX<=(GrenzeRechts+kastenBreite/2))) {
var links = (parseInt(kastenX)-abstandX+2)*zoomFaktor/100;
linksSich = links;
var rechts = (parseInt(kastenX)-abstandX+kastenBreite+2)*zoomFaktor/100;
rechtsSich = rechts;
}
}

ein problem gibt es allerdings noch:
beim ersten aufrufen der funktion schlägt die fehlerkonsole an, weil zu dem zeitpunkt noch keine konkreten werte für die globaleb variablen zur verfügung stehen...
aber auch bei seiten wie facebook oder der jswelt meldet sie sich^^
macht das was aus?

**kkapsner** · 09-04-2011, 15:06

Fehler sind nie gut. Auch globale Variablen sind nicht das Gelbe vom Ei.

Hab' mal auf die Schnelle was zusammengeschustert:

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<script type="text/javascript" src="http://kkjs.kkapsner.de/modules/kkjs.load.js"></script>
<script type="text/javascript">
kkjs.event.onWindowLoad(function(){
	var config = {
		img: kkjs.$("big"),
		zoomContainer: kkjs.$("zoom"),
		zoomSize: {w: 80, h: 60},
		zoom: 3
	};
	
	var zoomBorder = kkjs.node.create({
		tag: "div",
		style: {
			position: "absolute",
			top: config.img.offsetTop + "px",
			left: config.img.offsetLeft + "px",
			margin: "-2px",
			border: "2px solid white",
			width: config.zoomSize.w + "px",
			height: config.zoomSize.h + "px",
			cursor: "-moz-zoom-in"
		},
		parentNode: config.img.offsetParent
	});
	
	kkjs.css.set(config.zoomContainer, {
		overflow: "hidden",
		width: config.zoomSize.w * config.zoom + "px",
		height: config.zoomSize.h * config.zoom + "px",
		border: "1px solid black"
	});
	var zoomImg = kkjs.node.create({
		tag: "img",
		src: config.img.src,
		width: config.img.width * config.zoom,
		height: config.img.height * config.zoom,
		parentNode: config.zoomContainer,
		style: {position: "relative"}
	})
	
	kkjs.koordAdd(config.img);
	kkjs.event.add(document, "mousemove", function(ev){
		var mousePos = kkjs.event.getMousePosition(ev);
		if (
			mousePos.left.isInRange(config.img.getX(), config.img.getX() + config.img.offsetWidth) &&
			mousePos.top.isInRange(config.img.getY(), config.img.getY() + config.img.offsetHeight)
		){
			mousePos.left -= config.img.getX() + Math.floor(config.zoomSize.w / 2);
			mousePos.top -= config.img.getY() + Math.floor(config.zoomSize.h / 2);
			mousePos.left = mousePos.left.setInRange(0, config.img.width - config.zoomSize.w);
			mousePos.top = mousePos.top.setInRange(0, config.img.height - config.zoomSize.h);
			kkjs.css.set(zoomImg, {
				left: "-" + (mousePos.left * config.zoom) + "px",
				top: "-" + (mousePos.top * config.zoom) + "px"
			});
			kkjs.css.set(zoomBorder, {
				top: config.img.offsetTop + mousePos.top + "px",
				left: config.img.offsetLeft + mousePos.left + "px",
			});
		}
	});
});
</script>
<style type="text/css"></style>
</head>
<body>
<img src="http://l.yimg.com/g/images/home_photo_jam343.jpg" id="big">
<div id="zoom"></div>
</body>
</html>

- ist hald mit meinem Framework gelöst... sollte aber kein Problem sein, das herauszulösen.

Thema: clip-Problem...

LinkBack

Themen-Optionen

Anzeige

clip-Problem...

AW: clip-Problem...

AW: clip-Problem...

AW: clip-Problem...

AW: clip-Problem...

AW: clip-Problem...

AW: clip-Problem...

AW: clip-Problem...

AW: clip-Problem...

AW: clip-Problem...

AW: clip-Problem...

AW: clip-Problem...

AW: clip-Problem...

Ähnliche Themen

Neue Communityseite your-clip.com

clip:rect Probleme...

clip dynamisch

[Clip] Nice Dog

[Clip] Der Kellner

Stichworte

Lesezeichen

Lesezeichen

Berechtigungen

Value in Auswahlliste einer...

Bootstrap Offcanvas

php WebSocket

Value in Auswahlliste einer...

Value in Auswahlliste einer...

Account löschen

Account löschen

Bootstrap Offcanvas