Maison > Article > interface Web > Comment verrouiller l'inclinaison horizontale d'Ellipse à l'aide de FabricJS ?
Comment verrouiller l'inclinaison horizontale d'Ellipse à l'aide de FabricJS ?
- PHPzavant
- 2023-09-14 12:49:02756parcourir
Dans ce tutoriel, nous apprendrons comment verrouiller l'inclinaison horizontale d'une ellipse à l'aide de FabricJS. Tout comme nous pouvons spécifier la position, la couleur, l'opacité et la taille de l'objet elliptique dans le canevas, nous pouvons également spécifier si nous voulons arrêter d'incliner l'objet horizontalement. Cela peut être fait en utilisant l'attribut lockSkewingX.
Syntaxe
new fabric.Ellipse({ lockSkewingX : Boolean }: Object)Paramètres
Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre ellipse. En utilisant ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur du trait et bien d'autres propriétés liées à l'objet dont lockSkewingX est la propriété.
Option Key
lockSkewingX - Cette propriété accepte une valeur Boolean强>. Si on lui donne une valeur "vraie", l'inclinaison horizontale de l'objet sera verrouillée.
Exemple 1
Comportement par défaut d'Ellipse Objet dans Canvas
Passons en revue un exemple pour comprendre le comportement par défaut de l'objet Ellipse lorsque la propriété lockSkewingX n'est pas utilisée. Vous pouvez incliner un objet horizontalement et verticalement en maintenant la touche Maj enfoncée et en le faisant glisser horizontalement ou verticalement.
<!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>Locking the horizontal skewing of Ellipse using FabricJS</h2>
<p>Select the object. Hold the "shift" and try to stretch the object (not diagonally). You can skew the object both horizontally and vertically. This is the default behavior.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 115,
top: 50,
fill: "white",
rx: 80,
ry: 50,
stroke: "black",
strokeWidth: 5,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Exemple 2
Passer lockSkewingX comme clé avec une valeur de "true"
Dans cet exemple, nous verrons comment utiliser la propriété lockSkewingX pour arrêter la capacité d'un objet Ellipse à s'incliner horizontalement. Bien que nous puissions incliner un objet ellipse verticalement, nous ne sommes pas autorisés à effectuer la même opération horizontalement.
<!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>How to lock the horizontal skewing of Ellipse using FabricJS?</h2>
<p>Select the object; hold the "shift" key and try to stretch the object horizontally. You cannot skew the object horizontally because we have set <b>lockSkewingX</b> to True. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 115,
top: 50,
fill: "white",
rx: 80,
ry: 50,
stroke: "black",
strokeWidth: 5,
lockSkewingX: true,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!