语法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 在移动时设置圆的边框不透明度?的详细内容。