如何使用 FabricJS 设置文本框的旋转角度？

在本教程中，我们将学习如何使用 FabricJS 设置文本框的旋转角度。我们可以自定义、拉伸或移动文本框中的文字。为了创建文本框，我们需要创建一个 fabric.Textbox 类的实例并将其添加到画布上。FabricJS 中的 angle 属性定义了对象的 2D 旋转角度。我们还有 centeredRotation 属性，它允许我们使用文本框的中心点作为变换的原点。

语法

new fabric.Textbox(text: String, { angle: Number, centeredRotation: Boolean }: Object)

参数

  • text − 此参数接受一个 字符串，即我们希望在文本框中显示的文本字符串。

  • options (可选) − 此参数是一个 对象，它为我们的文本框提供了额外的自定义选项。使用此参数，可以更改与文本框相关的许多属性，例如颜色、光标、描边宽度等，其中 angle 就是一个属性。

选项键

  • angle − 此属性接受一个 数字，用于指定文本框的旋转角度（单位为度）。

  • centeredRotation − 此属性接受一个 布尔值，用于确定文本框的中心是否为变换的原点。

示例 1

将 angle 作为键并传递自定义值，同时禁用文本框的居中旋转

让我们看一个代码示例，演示如何在 FabricJS 中设置文本框的旋转角度。负角度表示逆时针方向，正角度表示顺时针方向。由于我们将 centeredRotation 设置为 False，因此文本框将在使用其角点作为旋转中心时旋转。

<!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>Passing angle as key with a custom value and disabling the centered rotation for the Textbox</h2>
	<p>You can select and rotate the textbox to verify that it uses its corner point as the center of rotation</p>
	<canvas id="canvas"></canvas>
	<script>
		// Initiate a canvas instance
		var canvas = new fabric.Canvas("canvas");
		canvas.setWidth(document.body.scrollWidth);
		canvas.setHeight(250);

		// Initiate a textbox object
		var textbox = new fabric.Textbox("Peace begins with a smile.", {
			backgroundColor: "#b0e0e6",
			width: 400,
			top: 70,
			left: 110,
			centeredRotation: false,
			angle: 15,
		});

		// Add it to the canvas
		canvas.add(textbox);
	</script>
</body>
</html>

示例 2

启用文本框的居中旋转

从本示例中可以看出，通过将 centeredRotation 属性设置为 true，我们的文本框现在使用其中心作为旋转中心。在 1.3.4 版本之前，centeredScaling 和 centeredRotation 包含在一个名为 centerTransform 的属性中。

<!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 rotation for the textbox</h2>
   <p>You can select and rotate the textbox to verify that it now uses its center as center of rotation</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
	  var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a textbox object
      var textbox = new fabric.Textbox("Peace begins with a smile.", {
         backgroundColor: "#b0e0e6",
         width: 400,
         top: 70,
         left: 110,
         centeredRotation: true,
         angle: 15,
      });

      // Add it to the canvas
      canvas.add(textbox);
   </script>
</body>
</html>

更新于: 2022-08-02

252 次浏览

启动你的 职业生涯

通过完成课程获得认证

立即开始
广告