nicht angemeldet
Diagonale mit CSS + javascript ohne SVG
Matthias Apsel
Gunnar Bittersmanntheoretisch sollte es eigentlich einfach sein, in einer (vorallem einzeiligen) Box die Diagonale zu Zeichen:
aus width und height des BoundingClientRect ergeben sich Länge- und DrehWinkel der als
HR creirten Diagonale, die nur noch in die Box hineingezogen werden muß.
Da
für die Drehung der HR ihr Mittelpunkt auf dem der Box liegen muß.
Das
erreicht man mit dem Eintrag posititon: absolute; left: xtrxax;
wobei
xtrax = - (BoxDiagonalLänge - Boxbreit) / 2
gilt,
und DAS funktioniert auch, die Diagonalendpunkte liegen immer sehr genau inerhalb der verlängert gedachten vertikalen Borderlinien.
LEIDER
gelingt es mir aber nicht auch für postition: absolute; top den / die Formel für den y-Verschiebunswert zu finden: eigentlich sollte er 0 sein, ist aber für einzeilige Boxen bestmögliche Näherung, Boxhöhe / 16 , für zweizeilige Boxhöhe / 3.5 und für 3zeilige Boxhöhe / 2.9 .
Von der Boxbteite hängt es offenbar nicht ab.
Die
Reihenfolge von Verschiebung und Drehung und Dimensionierung der HR hat offenbar keinen Eifluß .
Die
folgenden Codestücke erlaufen das zu testen.
Die Zahleneingabe z zu 'Teiler:' resultiert in top: Boxhöhe / z
Die Texteigabe in 'Text' wird Inhalt der Box .
innerHTML brauchte ich damit '<br>' interpretiert wird und damit Mehrzeiligkeit ermöglicht.
Datei schrägNotSlow1stRotVarTeiler.js Parmeter dst ist die Ref. auf die gewünschte Box.
function Diagonale(dst,teiler){
var D = document;
with(dst . getBoundingClientRect()
){
var winkel = -180*Math.atan(height/width)/Math.PI,
xtrax = -( (diagonalLng = Math.sqrt(height*height + width*width) ) - width )/2 ,
xtray = height/teiler; /* ?? */
dst . appendChild( D.createElement('hr'))
.
setAttribute('style',
"transform: rotateZ(" + winkel + "deg);"
+ "width: "+ diagonalLng + 'px; height: 0px;'
+ "position: absolute;"
+ "left: " + xtrax + 'px;'
+ "top: " + xtray + 'px;'
);
} // with
}
Testaufrufe
<!DOCTYPE HTML><html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TstSchrägJsVariirbar</title>
<script src="schrägNotSlow1stRotVarTeiler.js"></script>
<style>
.schräg{position: relative; display: inline-block;
border:1px solid black; font-size:8em;
}
</style>
</head>
<!-- ===================================================================== -->
<body>
davor davor<br> <div class="schräg" id='t1'>A<br>B</div>danach<br><br>
<script>
t1 = document.getElementById('t1');
</script>
Teiler: <input type="number" id='tlr' value=3.5 onchange='TlrChg();'><br>
<br>
Text: <input id='txt' value="A<br>B" onchange='txtChg();'>
<script>
tlr = document.getElementById('tlr');
txt = document.getElementById('txt');
Diagonale(t1,1*3.5);
function TlrChg(){t1.innerHTML=txt.value; Diagonale(t1, 1*tlr.value);
}
function txtChg(){ t1.innerHTML = txt.value;
Diagonale(t1, 1*tlr.value)
}
</script>
-
Hallo mathefritz,
hr ist ein Element, das einen thematischen Bruch darstellt. linear-gradient könnte etwas für dich sein.
Bis demnächst
Matthias--
Rosen sind rot.-
Danke Matthieas,
leider
sehe ich nicht - bzw. fehlt mir der Durchblick - wie ich mittels linear-gradient präzise plazierte und orienierte linien erzeugen könnte .-
Hallo mathefritz,
leider
sehe ich nicht - bzw. fehlt mir der Durchblick - wie ich mittels linear-gradient präzise plazierte und orienierte linien erzeugen könnte .Schau dir das zweite Beispiel an und füge weitere colorstops hinzu.
Bis demnächst
Matthias--
Rosen sind rot.
-
-
@@Matthias Apsel
linear-gradient könnte etwas für dich sein.
Eric Meyer schrieb kürzlich drüber: Generating Wireframe Boxes with CSS and HTML5.
Wie ich dort gerade in meinem Kommentar (
der zur Zeit noch freigeschaltet werden muss, deshalbam Ende angefügt) schrieb, sind Gradienten aber dafür nicht gedacht. Browser machen beim Rendern kein Anti-Aliasing; schräge Linien sehen demzufolge pixelig aus.Die Lösung ist SVG; siehe Codepen Wireframe box with SVG.
Dass hier im Titel „+ javascript ohne SVG“ steht, habe ich geflissentlich überlesen. Es ist schlich und einfach unsinnig, das brauchbare Werkzeug aus dem Werkzeugkasten zu werfen und stattdessen JavaScript dort hineinzulegen, wo es überhaupt gar nichts zu suchen hat.
LLAP 🖖
Mein Kommentar zu Eric Meyers Artikel:
Browsers don’t apply anti-aliasing to gradients. (Don’t blame them. Gradients are intended for smooth color transitions, not for edges.) Hence the diagonal lines will look pixelated.
Instead of linear-gradients, you might want to use SVG as background image. You would need to set
preserveAspectRatio="none"on thesvgelement andvector-effect="non-scaling-stroke"on thelineelement (orpathin case you would want to use that instead). See codepen Wireframe box with SVG.(According to the spec, the data URL needs to be percent-encoded. Some browsers would display the SVG background even when not percent-encoded, but not all browsers.)
The downside is that you can’t use the custom property
--wirefor the stroke color of the SVG background. Or is there a way, other than using JavaScript?--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
-