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

如何使用 FabricJS 设置圆的填充?

WBOY
发布: 2023-08-25 10:45:05
转载
1065人浏览过

如何使用 fabricjs 设置圆的填充?

在本教程中,我们将学习如何使用 FabricJS 设置圆的填充。圆形是 FabricJS 提供的各种形状之一。为了创建一个圆圈,我们必须创建一个 Fabric.Circle 类的实例并将其添加到画布中。正如我们可以指定圆形对象在画布中的位置、颜色、不透明度和尺寸一样,我们也可以设置圆形对象的填充。这可以通过使用 padding 属性来完成。

语法

new fabric.Circle({ padding : Number }: Object)
登录后复制

参数

  • 选项(可选) - 此参数是一个对象 为我们的圈子提供额外的定制。使用此参数,可以更改与 padding 为属性的对象相关的属性,例如颜色、光标、描边宽度和许多其他属性。

  • ul>

    选项键

    • 填充 - 此属性接受数字值。分配的值决定圆形对象与其控制边框之间的距离。

    示例 1

    内边距为时的默认外观未使用

    让我们看一下在未使用 padding 属性时显示圆形对象外观的代码。正如我们所看到的,对象与其周围的控制边界之间没有空间。这意味着圆与其控制边框之间的填充为零。

    <!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 padding of circle using FabricJS</h2>
          <p>Select the object and observe that there is no space between the object and its surrounding controlling borders. This is the default behavior. We haven't used any <b>padding</b> here. </p>
          <canvas id="canvas"></canvas>
    
          <script>
             // Initiate a canvas instance
             var canvas = new fabric.Canvas("canvas");
             var circle = new fabric.Circle({
                left: 115,
                top: 50,
                radius: 50,
                fill: "#85bb65"
             });
             canvas.add(circle);
             canvas.setWidth(document.body.scrollWidth);
             canvas.setHeight(250);
          </script>
       </body>
    </html>
    登录后复制

    示例 2

    将 padding 属性作为键传递

    在此示例中,我们将 padding 属性作为键传递值为 7。这表示圆形对象与其所有控制边框之间的距离为 7px。

    <!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 padding of circle using FabricJS</h2>
          <p>Select the object and notice the padding between the object and its controlling border. Here we have set the <b>padding</b> at 10px.</p>
          <canvas id="canvas"></canvas>
    
          <script>
             // Initiate a canvas instance
             var canvas = new fabric.Canvas("canvas");
             var circle = new fabric.Circle({
                left: 115,
                top: 50,
                padding: 10,
                radius: 50,
                fill: "#85bb65"
             });
             canvas.add(circle);
             canvas.setWidth(document.body.scrollWidth);
             canvas.setHeight(250);
          </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号