
在本教程中,我们将学习如何使用 FabricJS 移动文本中单个字符的基线。我们可以通过添加 Fabric.Text 的实例在画布上显示文本。它不仅允许我们移动、缩放和更改文本的尺寸,而且还提供了附加功能,例如文本对齐、文本装饰、行高,这些功能可以分别通过属性 textAlign、underline 和 lineHeight 获得。同样,我们也可以使用 deltaY 属性来移动单个字符的基线。
语法
new fabric.Text(text: String , { styles: { deltaY: Number}:Object }: Object)
参数
text - 此参数接受一个 String,这是我们要显示的文本字符串。
选项(可选) - 此参数是一个对象,它为我们的文本提供额外的自定义。使用此参数可以更改与样式为属性的对象相关的颜色、光标、边框宽度和许多其他属性。
选项键
styles - 该属性接受一个Object值,它允许我们为单个字符添加样式。
deltaY - 此属性接受一个 Number 值,该值允许我们仅移动样式的基线。
示例 1
仅传递 styles 属性作为键
Avactis是一个强大的PHP在线购物系统拥有多个版本包括开源版本。它具备一个在线购物系统所需要的所有功能从产品到会员管理,订单和营销。可以无限分类和为产品指定任务数量的图片(支持自动生成缩略图)。使用自定义字段功能,让你可以更好地定义一个产品。该系统提供以非常灵活的方式来创建任意类型的促销活动如设置折扣代码,基于价格的折扣或基于数量的折扣等。
在此示例中,我们可以看到如何使用 styles 属性向字符添加单独的样式。正如我们在这个例子中看到的,只有第 0 个字符的 fontSize 为 55,fontWeight 为粗体,fontStyle 为“oblique”。第一级属性是行号,第二级属性是字符号。这里我们使用 0 来表示第一行和第一个字符。
Passing the styles property as key
You can see that the first character looks different now
示例 2
将 styles 属性作为键与 deltaY 属性一起传递
在此示例中,我们将了解如何使用 deltaY 属性为字符添加不同的基线。在这种情况下,由于指定了 deltaY,第一行中的第二个数字(第一个索引)与其相邻字符具有不同的基线。
Passing the styles property as key along with deltaY property
You can see that the second number in the first line has a different baseline









