mathefritz: Diagonale mit CSS + javascript ohne SVG

Beitrag lesen

SELF-Forum

Diagonale mit CSS + javascript ohne SVG

mathefritz
– Informationen zu den Bewertungsregeln

theoretisch 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&lt;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>
Beitrag melden
–
Informationen zu den Bewertungsregeln