在本教程中,我们将学习如何使用 fabricjs 使 rectangle 的控制角透明。矩形是 fabricjs 提供的各种形状之一。为了创建一个矩形,我们必须创建一个 fabric.rect 类的实例并将其添加到画布中。 transparentcorners 属性允许我们使 rectangle 的控制角透明。
语法new fabric.rect( {transparentcorners: boolean }: 对象)
参数选项(可选) - 此参数是一个 对象为我们的矩形提供额外的定制。使用此参数,可以更改与对象相关的属性,例如颜色、光标、描边宽度和许多其他属性, transparentcorners 是该对象的属性。
ul>选项键transparentcorners - 该属性接受一个布尔值,允许我们将对象的控制角渲染为透明。其默认值为 true。
示例 1将透明corners 属性作为具有“false”值的键传递让我们看一个代码示例,用于创建一个带有不透明控制角的矩形对象。为此,我们需要向 transparentcorners 属性传递 false 值。
将透明角属性作为具有“false”值的键传递您可以选择矩形以查看控制角是不透明的。// 启动画布实例var canvas = new fabric.canvas(canvas);canvas.setwidth(document.body.scrollwidth);画布.setheight(250);// 初始化一个矩形对象var 矩形 = 新的布料. 矩形({左:155,顶部:70,宽度:170,身高:70,填写:“#f4f0ec”,笔画:“#2a52be”,笔划宽度:5,透明角:假,});// 将其添加到画布中canvas.add(矩形);
示例 2将透明角作为具有“true”值的键传递
在此示例中,我们是向 transparentcorners 属性传递一个真值。这将确保控制角呈现为透明。请注意,这也是默认行为。
将透明角作为具有“true”值的键传递您可以选择矩形以查看控制角是否透明。// 启动画布实例var canvas = new fabric.canvas(canvas);canvas.setwidth(document.body.scrollwidth);画布.setheight(250);// 初始化一个矩形对象var 矩形 = 新的布料. 矩形({左:155,顶部:70,宽度:170,身高:70,填写:“#f4f0ec”,笔画:“#2a52be”,笔划宽度:5,透明角:真实,});// 将其添加到画布中canvas.add(矩形);
以上就是如何使用 fabricjs 使矩形的控制角透明?的详细内容。