
在本教程中,我们将学习如何使用 FabricJS 在 IText 对象的 URL 字符串中设置缩放倍数。 IText 类是在 FabricJS 版本 1.4 中引入的,它扩展了 Fabric.Text 并用于创建 IText 实例。 IText 实例使我们可以自由选择、剪切、粘贴或添加新文本,而无需额外配置。还有各种支持的按键组合和鼠标/触摸组合使文本具有交互性,而 Text 中未提供这些组合。
然而,基于 IText 的 Textbox 允许我们调整文本矩形的大小并自动换行。对于 IText 来说情况并非如此,因为高度不会根据换行进行调整。我们可以通过使用各种属性来操作 IText 对象。同样,我们可以使用 multiplier 属性在 IText 对象的 URL 字符串中设置一个缩放倍数。
语法
toDataURL({ multiplier: Number }: Object): String
参数
选项(可选) - 此参数是一个对象,它为 IText 对象的 URL 表示形式提供额外的自定义。使用此参数可以更改高度、质量、格式和许多其他属性,其中乘数是属性。
选项键
multiplier - 此属性接受一个 Number 值,该值表示缩放最终 IText 输出图像的乘数。默认值为 1。
示例 1
不使用 multiplier 属性
让我们看一个代码示例,看看不使用 multiplier 属性时的输出图像。一旦我们从开发工具打开控制台,我们就可以看到 IText 对象的 URL 表示。我们可以复制该 URL 并将其粘贴到新选项卡的地址栏中以查看最终输出。由于我们没有使用 multiplier 属性,因此将使用默认的 multiplier 值,即 1。
Without using the multiplier property
You can open console from dev tools and see the output URL. You can copy that and paste it in the address bar of a new tab to see that the image
示例
使用乘数属性
让我们看一个代码示例,看看使用 multiplier 属性时 IText 对象的最终输出图像是什么样子。在本例中,我们为其传递了值 2。因此最终图像将在 x 和 y 方向上缩放两倍。
Using the multiplier property
You can open console from dev tools and see the output URL. You can copy that and paste it in the address bar of a new tab to see the final image










