In diesem Artikel erfahren Sie, wie Sie mithilfe von FabricJS eine zentrierte Skalierung auf der Leinwand aktivieren. Wenn in FabricJS ein Objekt aus einer Ecke gezogen wird, transformiert sich das Objekt proportional. Wir können die Eigenschaft „centeredScaling“ verwenden, um die Mitte als Ursprung der Transformation zu verwenden.
new fabric.Canvas(element: HTMLElement|String, { centeredScaling: Boolean }: Object)Element – Dieser Parameter ist das
Optionen (optional) – Dieser Parameter ist ein Objekt, das eine zusätzliche Anpassung unserer Leinwand ermöglicht. Sie können diesen Parameter verwenden, um viele Attribute im Zusammenhang mit der Leinwand zu ändern, z. B. Farbe, Cursor und Rahmenbreite, darunter „centeredScaling“ als ein Attribut. Es akzeptiert einen booleschen Wert, der bestimmt, ob das Objekt den Mittelpunkt als Ursprung der Transformation verwenden soll. Der Standardwert ist False.
Übergabe des centeredScaling-Schlüssels mit dem Wert false
Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein Objekt skaliert, wenn centeredScaling auf False gesetzt ist.
<!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>Enabling centered scaling in canvas using FabricJS</h2>
<p>Select the object and try to resize it by its corners. The object will scale non-uniformly from its center.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
centeredScaling: false
});
// Creating an instance of the fabric.Rect class
var circle = new fabric.Circle({
left: 200,
top: 100,
radius: 40,
fill: "blue",
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Übergabe des Schlüssels „centeredScaling“ an eine Klasse mit dem Wert „True“
Standardmäßig ist der Schlüssel „centeredScaling“ auf „False“ gesetzt. Daher müssen wir den Schlüssel an die Klasse übergeben und ihm einen realen Wert zuweisen, damit die Objekte ihren Mittelpunkt als Ursprung der Transformation verwenden können. Das obige ist der detaillierte Inhalt vonWie aktiviere ich die zentrierte Skalierung auf der Leinwand mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!<!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>Enabling centered scaling in canvas using FabricJS</h2>
<p>Here we have set <b>centeredScaling</b> to True. Select the object and try to resize it by its corners. The object will scale uniformly from its center. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
centeredScaling: true
});
// Creating an instance of the fabric.Rect class
var circle = new fabric.Circle({
left: 200,
top: 100,
radius: 40,
fill: "blue",
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
So übergeben Sie einen Wert an die Vue-Komponente
MySQL-Standard-Transaktionsisolationsstufe
Dogecoin-Handelsplattform
Die Rolle von Linux-Terminalbefehlen
So beheben Sie den Bluescreen 0x0000006b
Die Rolle der mathematischen Funktion in der C-Sprache
So optimieren Sie die Tomcat-Leistung
Software zum Ausblenden von Taskleistensymbolen
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
