Grafiken in Relation von der Höhe mit clip-path beschneiden
Durch Verwendung von clip-path: path können Sie Grafiken in Abhängigkeit von ihrer Größe auf unterschiedliche Formen zuschneiden.
Im folgenden Beispiel wird der Pfad einer Form verwendet, der zum Beispiel ein Bildbearbeitungstool erstellt wurde.
Auszug aus der design.js
////////////////////////////////////////////////////////////////
//
// Initialisieren der Seite
//
////////////////////////////////////////////////////////////////
jQuery(document).ready(function(){
// Definition des Objekts bezierObjects, das die Pfadinformationen und Abmessungen für verschiedene Varianten enthält
var bezierObjects = {};
bezierObjects['elementPicture_var0c'] = {
'path' : "M 63.18 29.78 C 69.53 28.77 78.89 34.58 85.00 36.94 C 90.10 38.91 95.30 40.61 100.00 43.46 C 122.43 57.04 140.22 85.92 151.75 109.00 C 151.75 109.00 164.98 138.00 164.98 138.00 C 166.47 140.88 169.70 146.32 173.04 147.12 C 179.63 148.69 186.75 132.90 189.24 128.00 C 189.24 128.00 201.69 103.00 201.69 103.00 C 206.78 91.89 205.69 90.27 213.34 79.00 C 216.47 74.40 221.66 66.81 227.00 64.90 C 233.61 62.55 242.87 69.74 248.00 73.43 C 259.95 82.02 268.05 93.52 276.89 105.00 C 276.89 105.00 291.56 123.00 291.56 123.00 C 295.07 128.00 300.35 141.79 306.01 143.12 C 309.97 144.04 312.87 139.86 314.68 137.00 C 322.10 125.28 325.57 121.39 334.58 111.00 C 338.37 106.64 344.00 100.59 349.61 106.24 C 349.61 106.24 356.03 116.00 356.03 116.00 C 356.03 116.00 368.89 133.00 368.89 133.00 C 368.89 133.00 382.76 149.00 382.76 149.00 C 392.37 161.68 403.00 181.57 407.12 197.00 C 409.58 206.23 410.02 219.35 410.00 229.00 C 410.00 229.00 407.56 261.00 407.56 261.00 C 407.56 261.00 403.80 278.00 403.80 278.00 C 403.80 278.00 400.96 292.00 400.96 292.00 C 400.96 292.00 396.70 303.00 396.70 303.00 C 396.70 303.00 391.49 319.00 391.49 319.00 C 391.49 319.00 383.90 332.00 383.90 332.00 C 380.57 338.12 380.29 341.28 375.56 348.00 C 368.76 357.67 355.27 365.17 346.00 374.04 C 346.00 374.04 328.00 391.83 328.00 391.83 C 328.00 391.83 314.00 402.46 314.00 402.46 C 308.86 406.65 303.06 412.78 297.00 415.47 C 290.21 418.49 265.04 420.99 257.00 421.00 C 257.00 421.00 150.00 421.00 150.00 421.00 C 134.73 420.98 128.01 418.66 114.00 413.42 C 91.61 405.05 79.32 396.57 62.09 379.83 C 55.95 373.87 44.36 359.58 40.32 352.00 C 35.11 342.23 28.06 317.22 26.43 306.00 C 26.43 306.00 24.91 288.00 24.91 288.00 C 24.91 288.00 24.00 278.00 24.00 278.00 C 24.00 278.00 24.00 185.00 24.00 185.00 C 24.00 185.00 25.04 173.00 25.04 173.00 C 25.04 173.00 25.04 165.00 25.04 165.00 C 25.04 165.00 30.96 123.00 30.96 123.00 C 30.96 123.00 30.96 114.00 30.96 114.00 C 31.80 103.53 33.48 89.93 36.75 80.00 C 36.75 80.00 49.69 54.00 49.69 54.00 C 52.91 47.00 56.66 33.79 63.18 29.78 Z",
'width': 434,
'height' : 434
};
// Schleife, die über alle definierten Varianten iteriert
for(var key in bezierObjects){
// Suchen aller Elemente auf der Seite, die dem Schlüsselnamen entsprechen
var cE = jQuery('.'+key+' figure');
// Abrufen der Objektdaten für die aktuelle Variante
var cO = bezierObjects[key];
// Überprüfen, ob ein entsprechendes Bild-Element auf der Seite gefunden wurde
if(cE.length > 0){
// Ermitteln der aktuellen Breite des Bild-Elements
var newWidth = cE.width();
// Ermitteln der aktuellen Höhe des Bild-Elements
var newHeight = cE.height();
}
// Skalierung des Bezier-Pfades in Relation zu den originalen Maßen
var recalculatedPath = scaleBezierPath(cO.path, cO.width, cO.height, newWidth, newHeight);
// Anwenden des berechneten Pfades als clip-path-Stilattribut auf das Bild-Element
cE.css('clip-path', 'path("' + recalculatedPath + '")');
}
});
Funktion zur Skalierung des Pfades, abhängig von einer bestimmten Vorgabe.
function scaleBezierPath(bezierPath, originalWidth, originalHeight, newWidth, newHeight) {
// Split the bezierPath string into segments
bezierPath = bezierPath.replace(/-/g, ' ~#~');
var segments = bezierPath.split(/[ ,]+/);
//var segments = bezierPath.split(/(?<=[ ,])-|(?=[ ,])/);
// Scale factor for width and height
var widthScale = newWidth / originalWidth;
var heightScale = newHeight / originalHeight;
// Iterate over the segments and scale the coordinates
var scaledSegments = [];
for (var i = 0; i < segments.length; i += 2) {
if(segments[i] == 'C'){
scaledSegments.push('C');
i++;
}
else if(segments[i] == 'M'){
scaledSegments.push('M');
i++;
}
else if(segments[i] == 'Z'){
scaledSegments.push('Z');
break;
}
if(segments[i].includes('~#~')){
segments[i] = segments[i].replace('~#~', '-');
}
var x = parseFloat(segments[i]);
if(segments[i+1].includes('~#~')){
segments[i+1] = segments[i+1].replace('~#~', '-');
}
var y = parseFloat(segments[i + 1]);
// Scale the coordinates
var scaledX = x * widthScale;
var scaledY = y * heightScale;
// Add the scaled coordinates to the array
scaledSegments.push(scaledX.toFixed(2));
scaledSegments.push(scaledY.toFixed(2));
}
// Join the scaled segments into a string
var scaledPath = scaledSegments.join(" ");
return scaledPath;
}