数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究如何使用 FabricJS 禁用文本框的居中缩放？
在本教程中，我们将学习如何使用 FabricJS 禁用文本框的居中缩放。我们可以自定义、拉伸或移动文本框中的文字。为了创建文本框，我们必须创建一个`fabric.Textbox`类的实例并将其添加到画布中。当通过控件进行缩放时，为`centeredScaling`属性赋值为`true`，则使用中心作为对象的变换原点。
语法
new fabric.Textbox(text: String, { centeredScaling: Boolean }: Object)参数
text − 此参数接受一个字符串，即我们想要在文本框中显示的文本字符串。
options (可选) − 此参数是一个对象，它为我们的文本框提供额外的自定义选项。使用此参数，可以更改与对象相关的许多属性，其中`centeredScaling`就是一个属性，例如颜色、光标、描边宽度等。
选项键
centeredScaling − 此属性接受布尔值，并允许我们控制对象是否应使用其中心作为其变换原点。
示例 1
将 centeredScaling作为键并为其赋值“true”
让我们来看一个代码示例，看看当启用centeredScaling属性时文本框对象的行为。当我们放大对象时，变换原点是文本框的中心。
<!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 centeredScaling as key and assigning a "true" value to it</h2>
<p>Try scaling the textbox to see that centered scaling has been enabled</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("Success is the child of audacity.", {
backgroundColor: "#ffe5b4",
width: 400,
top: 70,
left: 110,
centeredScaling: true,
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>示例 2
禁用 centeredScaling 属性
我们可以通过为centeredScaling属性赋值“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>Disabling centeredScaling property</h2>
<p>Try scaling the textbox to see that centered scaling has been disabled</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("Success is the child of audacity.", {
backgroundColor: "#ffe5b4",
width: 400,
top: 70,
left: 110,
centeredScaling: false,
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
更新于：2022年7月29日
304 次浏览
广告