Kreisbogen interaktiv

Zur Navigation springen Zur Suche springen
Ein SVG-Bild kann skaliert werden, indem die Angabe der Höhe und Breite im SVG-Statement geändert wird, width="..." height="...". Die Angabe viewBox="..." bleibt unverändert. Mit dem Attribut preserveAspectRatio kann gesteuert werden, ob das Seitenverhältnis angepasst wird, indem der Inhalt verzerrt dargestellt wird.

Ziffernblatt mit Minuten/Sekunden erzeugen (derzeit noch keine Speichermöglichkeit als PNG)

Uhrblatt interaktiv erstellen, Erstversion ohne Speichermöglichkeit als PNG

Ziffernblatt mit Minuten/Sekunden erzeugen aktuelle Version auf orgfree

Ziffernblatt mit gerader Beschriftung

<svg width="540" height="540"
viewBox="-120 -120 240 276"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
xml:lang="de">

Textbereich 

<text font-size="40" text-anchor="middle" font-weight="bold" font-family="Arial, Helvetica, sans-serif"
 y="155" ><tspan fill="red" >51</tspan>
 <tspan fill="#333" >Minuten</tspan>
 </text>

Gebogene Beschriftung

Die Beschriftung wird nicht von allen Vorschau-Programmen angezeigt. Bei geeigneter Wahl des Kreisbogens wird der Text automatisch zentriert.

Funktioniert anscheinend nicht mit allen Varianten von Firefox.
<path id="p" d="M0,125 A125,125 0 1 1 1,125" fill="none" stroke-width="5" stroke="#00f" />
<text font-size="35" text-anchor="middle" font-weight="bold" font-family="Arial, Helvetica, sans-serif"
  y="150" >
  <textPath xlink:href="#p" startOffset="50%">
  <tspan fill="red" >51</tspan>
  <tspan fill="#333" >Minuten</tspan>
  </textPath>
</text>

Beispielbilder

<div style="display: flex; flex-wrap: wrap; text-align: center;">
<div style="width: 200px;"><img src="purpur.png" alt="" width="200" height="200">mit Ziffernblatt,<br>mit Hintergrundkreis</div>
<div style="width: 200px"><img src="petrol.png" alt="" width="200" height="200">mit Ziffernblatt,<br>ohne Hintergrundkreis</div>
<div style="width: 200px"><img src="marine.png" alt="" width="200" height="200">ohne Ziffernblatt,<br>mit Hintergrundkreis</div>
<div style="width: 200px"><img src="cyan.png" alt="" width="200" height="200">ohne Ziffernblatt,<br>ohne Hintergrundkreis</div></div>
<p><input type="checkbox" name="unten" value="1" checked class="box">Beschriftung unten</p>
<p><input type="checkbox" name="oben" value="1" class="box">Beschriftung oben (gebogen)</p>
mit Ziffernblatt,
mit Hintergrundkreis
mit Ziffernblatt,
ohne Hintergrundkreis
ohne Ziffernblatt,
mit Hintergrundkreis
ohne Ziffernblatt,
ohne Hintergrundkreis

Quellcode Formular

<!DOCTYPE html><html><head><meta charset="utf-8">
    <style>
      .box {
      width: 120px;
      border: 1px solid #999;
      color: #1c87c9;
      background-color: #eee;
      border-radius: 1px;
      box-shadow: 2px 2px 4px #ccc;
      }
    </style>
</head>
<body>
<h1>Timer</h1>
Hier kannst du interaktiv ein Ziffernblatt einer Uhr erzeugen,
bei dem eine Zeitspanne farbig markiert ist.
<p>Gib die Minuten und Sekunden ein, wähle die Farbe aus
und sende das Formular ab:</p>
<form action = "ziffernblatt.php" method = "post" target="_blank">
  <p><input name="mins" class="box"> Minuten (max. 59)</p>
  <p><input name="seks" class="box"> Sekunden (max. 59)</p>
  <p><input name="breite" value="480" class="box"> Bildbreite (max. 4000 Pixel)</p>
  <p><select name="mycolor" class="box">
    <option value="#f00" selected="selected">rot</option>
    <option value="#0f0">neongrün</option>
    <option value="#00f">blau</option>
    <option value="#f0f">magenta</option>
    <option value="#0ff">himmelblau</option>
    <option value="#ff0">gelb</option>
    <option value="#c0c0c0">silber</option>
    <option value="#808080">grau</option>
    <option value="#800000">braun</option>
    <option value="#800080">purpur</option>
    <option value="#008000">grün</option>
    <option value="#808000">oliv</option>
    <option value="#008080">petrol</option>
    <option value="#000080">marine</option>
    <option value="#fff">weiß</option>
    <option value="#000">schwarz</option>
  </select> Farbe</p>
  <p><input name="farbwert" class="box"> Farbwert (gem. <a href="https://www.w3schools.com/colors/default.asp" target="_blank">CSS Farbspezifikation)</a></p>
  <p><input type="checkbox" name="cth" value="1" checked class="box">mit Hintergrundkreis<br>
  <p><input type="checkbox" name="back" value="1" checked class="box">mit Ziffernblatt<br>
  <p><input type="submit" value="Ziffernblatt generieren" > <input type="reset" value="Eingabe zurücksetzen"></p>
</form>
<p>
Ein eingegebener Farbwert überschreibt einen Wert aus der Liste.<br>
Farbwerte- und Namen findest du hier: <a href="https://www.w3schools.com/colors/colors_names.asp" target="_blank">HTML Color Names</a>
<p></p>
<img src="cyan.png" alt="" width="200" height="200"><img src="petrol.png" alt="" width="200" height="200">
<img src="purpur.png" alt="" width="200" height="200"><img src="marine.png" alt="" width="200" height="200">
</body></html>

Quellcode PHP

<!DOCTYPE html><html><head><meta charset="utf-8"></head>
<body>
<?php
  $farbe = ""; $grad=45; $opac=0; $faktor=1; $breite=0;
  $mins=30; $seks=0; $plus=""; $fwert=""; $mitgrad="";
  if (isset($_POST['mycolor'])) $myfarbe = $_POST["mycolor"];
  if (isset($_POST['farbwert'])) $fwert = $_POST["farbwert"];
  if (isset($_POST['mins']))   $mins  = $_POST["mins"];
  if (isset($_POST['seks']))   $seks  = $_POST["seks"];
  if (isset($_POST["cth"]))    $opac = "0.3";
  if (isset($_POST["breite"])) $breite = $_POST["breite"];
  if (isset($_POST["back"]))   $mitgrad='<circle r="120" fill="url(#g1)" opacity="0.7" />';
  if (!is_numeric($mins)) $mins=30;
  if (!is_numeric($seks)) $seks=0;
  if (!is_numeric($breite)) $breite=0;
  if ($breite>4000) $breite=4000; # PNG Datei in der Größe beschränken
  $faktor = $breite /240;

  $mins = $mins % 60;
  $seks = $seks % 60;
  if ($seks > 0) $plus = ":" . $seks;

  $farbe = (empty($fwert)) ? $myfarbe : $fwert;
  $grad = 6*$mins + $seks/10;
  $rad  = deg2rad($grad);
  $x    = round(100 * sin($rad),5);
  $y    = -round(100 * cos($rad),5);
  if ($grad > 180) $pfad = " 0 1 1"; else $pfad = " 0 0 1 ";

$svg = '<svg width="240" height="240"
viewBox="-120 -120 240 240"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
xml:lang="de">
  <defs>
    <linearGradient id="g1" x2="100" y1="0" y2="150"
      gradientUnits="userSpaceOnUse" spreadMethod="reflect">
      <stop stop-color="#e3e3e3" offset="0"/>
      <stop stop-color="#f6f6f6" offset=".1215"/>
      <stop stop-color="#b8b8b8" offset=".2158"/>
      <stop stop-color="#bdbdbd" offset=".4971"/>
      <stop stop-color="#424242" offset=".8714"/>
      <stop stop-color="#8f8f8f" offset=".9382"/>
      <stop stop-color="#d1d1d1" offset="1" />
    </linearGradient>
    <line id="li" y1="98" y2="116" stroke="#888" stroke-width="5" />
    <line id="t" y1="103" y2="116" stroke="#aaa" stroke-width="3" />
    <g id="m">
      <use xlink:href="#li" />
      <use xlink:href="#t" transform="rotate(6)" />
      <use xlink:href="#t" transform="rotate(12)" />
      <use xlink:href="#t" transform="rotate(18)" />
      <use xlink:href="#t" transform="rotate(24)" />
    </g>
    <g id="n">
      <use xlink:href="#m" />
      <use xlink:href="#m" transform="rotate(30)" />
      <use xlink:href="#m" transform="rotate(60)" />
    </g>
    <g id="tix">
      <use xlink:href="#n" />
      <use xlink:href="#n" transform="rotate(90)" />
      <use xlink:href="#n" transform="rotate(180)" />
      <use xlink:href="#n" transform="rotate(270)" />
    </g>
  </defs>
  <g transform="scale(1)" >
  ' . $mitgrad . '
    <g transform="scale(0.93)" >
    <path d="m0 0 v-100A100,100 ' . $pfad . ' ' . $x . ' ' . $y . 'z" fill="' . $farbe . '" />
    <circle r="100" fill="' . $farbe . '" opacity="' . $opac . '" />
  </g>
  <use xlink:href="#tix" />
  </g>
</svg>';
$svg1 = $svg;
# hier wird die Größe der PNG-Datei eingestellt
# muss im SVG-Code geändert werden, da imagemagick eine inakzeptable Qualität liefert
if ($breite>0)
  {
  $svg1 = str_replace('transform="scale(1)"', 'transform="scale(' . $faktor . ')"', $svg);
  $hbreite = ($breite % 2 + $breite)/2; # halbe Breite evtl aufrunden
  $ebreite = $hbreite * 2; # gerader Zahlenwert
  $dimensionen = 'width="' . $ebreite . '" height="' . $ebreite . '"';
  $svg1 = str_replace('width="240" height="240"', $dimensionen, $svg1);
  $viewbox = '"-' . $hbreite  . ' -' . $hbreite . ' ' . $ebreite . ' ' . $ebreite . '"';
  $svg1 = str_replace('"-120 -120 240 240"', $viewbox, $svg1);

  }
$im = new Imagick();
$im->readImageBlob($svg1);
$im->setImageBackgroundColor(new ImagickPixel('transparent'));
$im->setImageFormat("png24");
#echo '<img src="data:image/png;base64,'.base64_encode($im->getImageBlob()).'" alt="" />';
?>
<h1>Zeitspanne <?php echo $mins;?><?php echo $plus;?> Minuten</h1>
<?php echo $svg;?>
<h2>PNG Grafik (downloadbar)</h2>
<?php echo '<img width="480" height="480" src="data:image/png;base64,'.base64_encode($im->getImageBlob()).'" />';?>
</body>
</html>
Abgerufen von „https://lilypond.miraheze.org/wiki/Kreisbogen_interaktiv?oldid=7231“