数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在使用 FabricJS 时，通过 URL 字符串设置 IText 对象的质量级别？
在本教程中，我们将学习如何在使用 FabricJS 时，通过 URL 字符串设置 IText 对象的质量级别。IText 类在 FabricJS 1.4 版本中引入，它扩展了 fabric.Text 并用于创建 IText 实例。IText 实例使我们能够在无需额外配置的情况下选择、剪切、粘贴或添加新文本。它还支持各种快捷键和鼠标/触摸组合，使文本具有交互性，而 Text 类则不提供这些功能。
然而，基于 IText 的文本框允许我们调整文本矩形的尺寸并自动换行。这对于 IText 来说并不适用，因为高度不会根据换行而调整。我们可以使用各种属性来操作 IText 对象。同样，我们可以使用 `quality` 属性来设置 IText 对象的 URL 字符串中的质量级别。
语法
toDataURL({ quality: Number }: Object): String
参数
options (可选) − 此参数是一个对象，它为 IText 对象的 URL 表示提供额外的自定义选项。使用此参数可以更改高度、质量、格式以及许多其他属性，其中 `quality` 是一个属性。
选项键
quality − 此属性接受一个数字值，表示最终输出图像的质量级别。可接受的值介于 0 和 1 之间，不包括 0。0.1 表示最低质量，1 表示最高质量。此属性仅可用于 jpeg 格式。默认值为 1。
示例 1
不使用 quality 属性
让我们来看一个代码示例，看看不使用 quality 属性时输出图像是什么样的。打开开发者工具中的控制台后，我们可以看到 IText 对象的 URL 表示。我们可以复制该 URL 并将其粘贴到新标签页的地址栏中以查看最终输出。由于我们没有使用 quality 属性，因此将使用默认值 1。
<!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>Without using the quality property</h2> <p>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 </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 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: 310, top: 70, fill: "#c70039", backgroundColor: "#c1dfed", stroke: "#c70039", originX: "center", shadow: shadow, } ); // Add it to the canvas canvas.add(itext); // Using the toDataURL method console.log(itext.toDataURL({ format: "jpeg" })); </script> </body> </html>
示例 2
使用 quality 属性
让我们来看一个代码示例，看看使用 quality 属性时 IText 对象的最终输出图像是什么样的。在这种情况下，我们将其值设置为 0.1。因此，最终图像的质量将变为最低。
<!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>Using the quality property</h2> <p>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 </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 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: 310, top: 70, fill: "#c70039", backgroundColor: "#c1dfed", stroke: "#c70039", originX: "center", shadow: shadow, } ); // Add it to the canvas canvas.add(itext); // Using the toDataURL method console.log(itext.toDataURL({ format: "jpeg", quality: 0.1 })); </script> </body> </html>
231 次浏览
