☰

Vergrößerte Bildausschnitte

tag-icon • tag-icon windows image-editing
Vergrößerte Bildausschnitte

Ich fürchte, das ist eine zu eng gefasste Frage, aber trotzdem stellen wir sie.

Gibt es ein Tool (oder ein Plug-In für ein beliebiges Tool), mit dem ich Teile des Bildes effektiv „vergrößern“ kann, etwa so:

Hineinzoomen

Was ich will istnichteine Bildschirmlupe, sondern eher ein Werkzeug, das mir beim Erstellen solcher Bilder hilft. Was ich jetzt mache (in Paint.NET), ist, dass ich zwei Ebenen mit demselben Bild hinzufüge, die Hintergrundebene skaliere, einen kreisförmigen Bereich aus der Vordergrundebene ausschneide und sie dann zusammenfüge.

Antwort1

Das folgende SVG könnte in vielerlei Hinsicht verbessert werden, stellt aber einen Ausgangspunkt dar.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="600px" height="323px">
    <defs>
        <image id="baseimage" xlink:href="https://i.stack.imgur.com/G4qab.jpg" width="100%" height="100%"/>  
        <circle id="zoom" cx="50%" cy="50%" r="100px" stroke="grey" stroke-width="4px" fill="none"/>
        <clipPath id="zoomclip">
            <use xlink:href="#zoom"/>
        </clipPath>
    </defs>
    <g alignment-baseline="baseline">
        <g>
            <use xlink:href="#baseimage" transform="scale(1)"/>  
        </g>
         <g clip-path="url(#zoomclip)">
             <use xlink:href="#baseimage"  transform="translate(-300 -162) scale(2)" />  
             <use xlink:href="#zoom"/>
         </g>
    </g>
</svg>

Anmerkungen:

  • Stellen Sie die Breite und Höhe des SVG auf die Originalgröße ein * Maßstab des Hintergrunds
  • der Transformationsmaßstab für die erste Verwendung von #baseimage sollte mit dem ausgewählten Maßstab übereinstimmen
  • Bei der zweiten Transformation sollte die Übersetzung so eingestellt sein, dass die zweite Kopie des Basisbilds unter dem Kreis positioniert wird. Im obigen Code sind die Werte die negative Hälfte der Breite und die Hälfte der Höhe, da sich der Kreis in der Mitte des Dokuments befand und der Maßstab für das Basisbild 1 war.
  • Demo bei jsfiddle:http://jsfiddle.net/pqzsa/

Mögliche Verbesserungen umfassen JavaScript, um den Kreis zu verschieben und das vergrößerte Basisbild automatisch unter der Mitte des Kreises auszurichten und es per Klick zu positionieren. Der SVG-Editor könnte verwendet werden, um eine PNG-Datei der aktuellen Ansicht auszugeben.

verwandte Informationen