首页 > web前端 > js教程 > 正文

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

PHPz
发布: 2023-08-25 10:17:07
转载
771人浏览过

如何使用fabricjs设置矩形移动时的边框不透明度?

在本教程中,我们将在移动时设置矩形的边框不透明度 FabricJS。矩形是 FabricJS 提供的各种形状之一。为了 创建一个矩形,我们必须创建一个 Fabric.Rect 类的实例并将其添加到 画布。

我们可以使用 borderOpacityWhenMoving 属性在画布中移动矩形时更改矩形的不透明度。

语法

new fabric.Rect({ borderOpacityWhenMoving: Number }: Object)
登录后复制

参数

  • 选项(可选) - 此参数是一个对象,它为我们的矩形提供额外的自定义。使用此参数,可以更改与 borderOpacityWhenMoving 为属性的对象相关的颜色、光标、描边宽度和许多其他属性等属性。

  • ul>

    选项键

    • 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>Displaying the default behaviour of borderOpacityWhenMoving property</h2>
       <p>Move the rectangle to see the default behaviour of <b>borderOpacityWhenMoving</b></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 rectangle object
          var rect = new fabric.Rect({
             left: 125,
             top: 90,
             width: 170,
             height: 70,
             fill: "#cf1020",
             padding: 9,
             borderColor: "black",
          });
    
          // Add it to the canvas
          canvas.add(rect);
       </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>Passing borderOpacityWhenMoving as key</h2>
       <p>Move the rectangle to see the change in value of <b>borderOpacityWhenMoving</b></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 rectangle object
          var rect = new fabric.Rect({
             left: 125,
             top: 90,
             width: 170,
             height: 70,
             fill: "#cf1020",
             padding: 9,
             borderColor: "black",
             borderOpacityWhenMoving: 0,
          });
         
           // Add it to the canvas
          canvas.add(rect);
       </script>
    </body>
    </html>
    登录后复制

以上就是如何使用FabricJS设置矩形移动时的边框不透明度?的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:tutorialspoint网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号