在本教程中，我们将学习如何使用 FabricJS 删除 IText 对象的 URL 字符串中的当前对象变换（缩放、角度、翻转、倾斜）。 IText 类是在 FabricJS 版本 1.4 中引入的，它扩展了 Fabric.Text 并用于创建 IText 实例。 IText 实例使我们可以自由选择、剪切、粘贴或添加新文本，而无需额外配置。还有各种支持的按键组合和鼠标/触摸组合使文本具有交互性，而 Text 中未提供这些组合。
然而，基于 IText 的 Textbox 允许我们调整文本矩形的大小并自动换行。对于 IText 来说情况并非如此，因为高度不会根据换行进行调整。我们可以通过使用各种属性来操作 IText 对象。同样，我们可以使用 withoutTransform 属性来删除 IText 对象的 URL 字符串中当前对象的变换。
语法
toDataURL({ withoutTransform: Boolean }: Object): String
参数
选项（可选） – 此参数是一个对象，它为 IText 对象的 URL 表示形式提供额外的自定义。使用此参数可以更改高度、质量、格式和许多其他属性，其中 withoutTransform 是一个属性。
选项键
withoutTransform – 该属性接受一个布尔值，它允许我们摆脱当前的对象变换。向其传递真值后，最终输出图像中将不再存在比例、角度、翻转或倾斜。
示例 1
使用 withoutTransform 属性并向其传递一个 false 值
Logome
AI驱动的Logo生成工具
183 查看详情
让我们看一个代码示例，看看向 withoutTransform 属性传递 false 值时的输出图像。一旦我们从开发工具打开控制台，我们就可以看到 IText 对象的 URL 表示。我们可以复制该 URL 并将其粘贴到新选项卡的地址栏中以查看最终输出。在此示例中，我们向 IText 对象传递了指定垂直比例因子的scaleY 属性。因此我们的输出将垂直缩放。但是，由于我们还向 withoutTransform 属性传递了一个 false 值，因此我们的最终输出图像仍将包含 scaleY 属性。
Using the withoutTransform property and passing it a false value
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 final image contains vertical scaling
// Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a shadow object var shadow = new fabric.Shadow({ blur: 25, color: "grey", offsetX: 12, offsetY: 15, }); // Initiate an itext object var itext = new fabric.IText( "Add sample text here.Lorem ipsum dolor sit amet consectetur adipiscing.",{ width: 300, left: 60, top: 70, fill: "#c70039", backgroundColor: "#c1dfed", stroke: "#c70039", originX: "center", shadow: shadow, scaleY: 2, } ); // Add it to the canvas canvas.add(itext); // Using the toDataURL method console.log( itext.toDataURL({ withoutTransform: false }) );
示例 2
使用 withoutTransform 属性并向其传递一个真值
让我们看一个代码示例，看看当使用 withoutTransform 属性并向其传递 true 值时，IText 对象的最终输出图像是什么样子。在这种情况下，我们的最终输出图像将不包含任何对象变换。
Using the withoutTransform property and passing it a true value
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 final image does not contain vertical scaling
// Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a shadow object var shadow = new fabric.Shadow({ blur: 25, color: "grey", offsetX: 12, offsetY: 15, }); // Initiate an itext object var itext = new fabric.IText( "Add sample text here.Lorem ipsum dolor sit amet consectetur adipiscing.",{ width: 300, left: 60, top: 70, fill: "#c70039", backgroundColor: "#c1dfed", stroke: "#c70039", originX: "center", shadow: shadow, scaleY: 2, } ); // Add it to the canvas canvas.add(itext); // Using the toDataURL method with withoutTransform console.log( itext.toDataURL({ withoutTransform: true }) );
以上就是如何使用 FabricJS 删除 IText 对象的 URL 字符串中的当前对象转换？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/829711.html
微信扫一扫 
支付宝扫一扫 
