
在本教程中,我们将学习如何使用 FabricJS 删除 Line 对象的 URL 字符串中的当前对象变换(缩放、角度、翻转、倾斜)。 Line 元素是 FabricJS 中提供的基本元素之一。它用于创建直线。由于线元素在几何上是一维的并且不包含内部,因此它们永远不会被填充。
我们可以通过创建fabric.Line的实例来创建线条对象,指定线条的x和y坐标并将其添加到画布上。为了删除 Line 对象的 URL 字符串中的当前对象变换,我们使用 withoutTransform 属性。
语法
toDataURL({ withoutTransform: Boolean }: Object): String
参数
选项(可选) - 此参数是一个对象,它为 Line 对象的 URL 表示形式提供额外的自定义。使用此参数可以更改高度、质量、格式和许多其他属性,其中 withoutTransform 是一个属性。
选项键
withoutTransform - 该属性接受一个布尔值,它允许我们摆脱当前对象的变换。向其传递真值后,最终输出图像中将不再存在比例、角度、翻转或倾斜。
使用withoutTransform属性并向其传递一个错误值
示例
让我们看一个代码示例,看看当 withoutTransform 属性传递一个 false 值时的输出图像。一旦我们从开发工具打开控制台,我们就可以看到 Line 对象的 URL 表示。我们可以复制该 URL 并将其粘贴到新选项卡的地址栏中以查看最终输出。
在此示例中,我们向 Line 对象传递了scaleY 和angle 属性,分别指定垂直比例因子和角度。因此,我们的输出将垂直缩放,旋转角度为 70。但是,由于我们还向 withoutTransform 属性传递了一个假值,因此我们的最终输出图像仍将包含scaleY和angle属性。
Using the withoutTransform property and passing it a false value
You can open the 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 and has an angle of 70 degrees
使用withoutTransform属性并向其传递一个真值
示例
让我们看一个代码示例,看看当使用 withoutTransform 属性并向其传递 true 值时,Line 对象的最终输出图像是什么样子。在这种情况下,我们的最终输出图像将不包含任何对象变换。
Using the withoutTransform property and passing it a true value
You can open the 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 or an angle of 70 degrees










