In diesem Artikel erfahren Sie, wie Sie mithilfe von FabricJS die Größe von Objekten anhand der Ecken ungleichmäßig ändern. Wenn in FabricJS ein Objekt aus einer Ecke gezogen wird, transformiert sich das Objekt proportional. Wir können dieses Verhalten jedoch steuern, indem wir uniScaleKey drücken.
new fabric.Canvas(element: HTMLElement|String, { uniScaleKey: String }: Object)Element – Dieser Parameter ist das
Optionen (optional) – Dieser Parameter ist ein Objekt, das eine zusätzliche Anpassung unserer Leinwand ermöglicht. Mit diesem Parameter können Sie viele Attribute im Zusammenhang mit der Leinwand ändern, z. B. Farbe, Cursor und Rahmenbreite, darunter uniScaleKey als ein Attribut. Es akzeptiert einen Zeichenfolgenwert, der angibt, welche Taste die einheitliche Skalierung umschaltet. Der Standardwert ist shiftKey. Mögliche Schlüsselwerte sind: altKey, Umschalttaste und Strgtaste.
Drücken Sie die Umschalttaste, um die einheitliche Skalierung zu deaktivieren.
Wenn ein Objekt durch Ziehen von Kanten unter Beibehaltung des Seitenverhältnisses transformiert wird, sagen wir, dass das Objekt einheitlich skaliert ist. Mit uniScaleKey können wir dieses Verhalten sofort steuern. Standardmäßig werden Objekte in FabricJS proportional skaliert. Schauen wir uns ein Codebeispiel an, um zu sehen, wie ein Objekt ungleichmäßig skaliert wird, wenn die Umschalttaste gedrückt wird.<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Resizing an object non-uniformly via corner points</h2>
<p>Hold the <b>shift</b> key and drag the object from its corners. The object will resize non-uniformly. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Creating an instance of the fabric.Rect class
var circle = new fabric.Circle({
left: 70,
top: 90,
radius: 40,
fill: "#006400",
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Ändern Sie den Wert von uniScaleKey in ctrlKey
Während der StandardwertshiftKey ist, können wir auch die Werte verwenden: 'ctrlKey' und 'altKey'. Wenn NULL oder ein anderer Schlüssel angegeben wird, wird diese Funktion deaktiviert.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Resizing an object non-uniformly via corner points</h2>
<p>Hold the <b>ctrl</b> key and drag the object from its corners. The object will resize non-uniformly. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
uniScaleKey: "ctrlKey",
});
// Creating an instance of the fabric.Rect class
var circle = new fabric.Circle({
left: 70,
top: 90,
radius: 40,
fill: "#006400",
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Das obige ist der detaillierte Inhalt vonWie kann ich mit FabricJS die Größe eines Objekts anhand der Ecken ungleichmäßig ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Warum verschwinden die Wörter nach der Worteingabe?
So verwenden Sie die Monatsfunktion
Verwendung von setInterval in JS
Anleitung zur Herstellung beschrifteter Münzen
Kosteneffizienzanalyse des Lernens von Python, Java und C++
Einführung in die Wartungsmethoden für Frequenzumrichter
So verwenden Sie fusioncharts.js
Wie viele Arten von USB-Schnittstellen gibt es?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
