您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

如何使用 FabricJS 在移动时设置圆的边框不透明度?

2024/3/28 8:05:17发布11次查看
在本教程中,我们将使用 fabricjs 在移动时设置 circle 的边框不透明度。圆形是 fabricjs 提供的各种形状之一。为了创建一个圆圈,我们必须创建一个 fabric.circle 类的实例并将其添加到画布中。我们可以使用 borderopacitywhenmoving 属性在画布中移动圆形时更改其不透明度。
语法new fabric.circle({ borderopacitywhenmoving: number }: object)
参数选项(可选) - 此参数是一个对象 为我们的圈子提供额外的定制。使用此参数,可以更改与 borderopacitywhenmoving 为属性的对象相关的颜色、光标、描边宽度和许多其他属性等属性。
选项键borderopacitywhenmoving - 此属性接受数字,指定移动圆圈时我们希望边框的不透明程度。它允许我们在移动圆形对象时控制边框的不透明度。默认值为 0.4。
示例 1显示 borderopacitywhenmoving 属性的默认行为
让我们看一个示例,显示 boderopacitywhenmoving 属性的默认行为。当我们选择圆形对象并将其在画布上移动时,选择边框的不透明度从 1(完全不透明)更改为 0.4,这使其看起来有点半透明。
<!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>setting the border opacity of circle while moving using fabricjs</h2> <p>select the object and move it around. notice that the opacity of the outline border reduces slightly while moving the object. this is the default behavior. here we have not used the <b>boderopacitywhenmoving</b> property.</p> <canvas id="canvas"></canvas> <script> // initiate a canvas instance var canvas = new fabric.canvas("canvas"); var cir = new fabric.circle({ left: 215, top: 100, fill: "", radius: 50, stroke: "#c154c1", strokewidth: 5, bordercolor: "#966fd6", }); // adding it to the canvas canvas.add(cir); canvas.setwidth(document.body.scrollwidth); canvas.setheight(250); </script> </body></html>
示例 2将 borderopacitywhenmoving 作为键传递
让我们看一个为 borderopacitywhenmoving 属性赋值的示例。在本例中,我们将值指定为 0。这告诉我们,当我们移动圆时,边框不透明度将更改为 0 并且不可见。
<!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>how to set the border opacity of circle while moving using fabricjs?</h2> <p>select the object and move it around. you will notice that the border opacity becomes 0 when moving the object. here we have set <b>borderopacitywhenmoving</b> to 0.</p> <canvas id="canvas"></canvas> <script> // initiate a canvas instance var canvas = new fabric.canvas("canvas"); var cir = new fabric.circle({ left: 215, top: 100, fill: "", radius: 50, stroke: "#c154c1", strokewidth: 5, bordercolor: "#966fd6", borderopacitywhenmoving: 0, }); // adding it to the canvas canvas.add(cir); canvas.setwidth(document.body.scrollwidth); canvas.setheight(250); </script> </body></html>
以上就是如何使用 fabricjs 在移动时设置圆的边框不透明度?的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product