如何使用 FabricJS 禁用 Circle 的选择性?

如何使用 fabricjs 禁用 circle 的选择性?

在本教程中,我们将学习如何使用 FabricJS 禁用圆的选择性。圆形是 FabricJS 提供的各种形状之一。为了创建一个圆圈,我们必须创建一个 Fabric.Circle 类的实例并将其添加到画布中。为了修改一个对象,我们必须在 FabricJS 中选择它。但是,我们可以通过使用 selectable 属性来更改此行为。

语法

new fabric.Circle({ selectable: Boolean }: Object)

登录后复制

参数

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

ul>

选项键

可选择 – 此属性接受布尔值 值。当为其分配“假”值时,无法选择该对象进行修改。其默认值为 True

示例 1

默认行为或可选属性 设置为“true”

让我们看一个示例,以了解默认情况下 selectable 属性设置为 True 时对象的行为方式。当 selectable 属性设置为 true 时,我们可以选择一个对象,在画布上移动它并对其进行修改。

                           

Disabling the selectability of circle using FabricJs

     

Here you can select the object (circle) and move it around freely. This is the default behavior. Here we have not used the selectable property but by default, it is set to True.

            // 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);    

登录后复制

示例 2

将 selectable 属性作为键传递

在此示例中,我们为 selectable 财产。这意味着我们无法再选择圆形对象进行修改。

                           

Disabling the selectability of circle using FabricJs

     

Now you can no longer select the circle because we have set selectable as False.

               // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); var circle = new fabric.Circle({ left: 115, top: 50, radius: 50, fill: "#85bb65", selectable: false }); canvas.add(circle); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250);    

登录后复制

以上就是如何使用 FabricJS 禁用 Circle 的选择性?的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2692353.html

(0)
上一篇 2025年3月7日 17:40:32
下一篇 2025年3月7日 06:46:23

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 如何在JavaScript中连接正则表达式字面量?

    正则表达式文字是正则表达式,是与字符串匹配的字符序列。有时,开发人员需要组合正则表达式。然而,正则表达式也是字符串的一种类型,但我们不能像字符串一样使用“+”运算符将它们连接起来。 因此,我们首先需要从两个正则表达式中获取标志。之后,我们必…

    2025年3月7日
    000
  • JavaScript中的函数式编程新课程

    了解 JavaScript 函数式编程的基础知识。在我们的新课程中,Tuts+ 讲师 Jason Rhodes 将帮助您创建一个小型的、主要是命令式的网站,并使用实用的声明性和功能性概念对其进行重构。这是对函数式编程的一个很好的基本介绍,侧…

    2025年3月7日
    200
  • 使用YUIDoc记录JavaScript文档

    记录代码有点像测试;我们都知道我们应该这样做,但我们不太确定如何做,而且大多数人,如果我们诚实的话,根本不这样做,但那些这样做的人都是它的大力支持者。本教程将帮助您快速了解解决该问题的最佳方法之一:yuidoc。 什么是 YUIDoc? Y…

    2025年3月7日
    200
  • JavaScript 程序检查幂等矩阵

    幂等矩阵是具有相同行数和列数的方阵,当我们将矩阵与其自身相乘时,结果将等于同一个矩阵。我们将得到一个矩阵,我们必须确定它是否是幂等矩阵。 数学上− 如果给定矩阵 ix M,则 M 是幂等矩阵,应遵循以下性质 – M*M = M …

    2025年3月7日
    200
  • JavaScript 程序查找二进制字符串任意循环中在开头和结尾处连续放置的 0 的最大数量

    我们将编写一个 JavaScript 程序来查找在二进制字符串的任何循环的开头和结尾处连续放置的零的最大数量。我们的程序将采用二进制字符串作为输入,并返回给定字符串的任何旋转中放置在开头和结尾的零的最大数量。为了解决这个问题,我们将使用字符…

    2025年3月7日
    200
  • 使用Passport为Node.js应用程序提供社交认证

    密码本质上是脆弱的,这已经是一个公认的事实。因此,要求最终用户为他们使用的每个应用程序创建强密码只会让事情变得更糟。 一个简单的解决方法是让用户通过现有的社交帐户(例如 Facebook、Twitter、Google 等)进行身份验证。在本…

    2025年3月7日
    200
  • 使用ngMessages进行AngularJS表单验证

    几乎每个网站都使用表单来执行不同的任务,例如注册用户或获取他们的联系信息。确保填写表单的用户至少在输入字段中输入有效信息非常重要。 还需要向用户显示详细的错误消息,以便他们能够正确填写表单。当您必须处理大量表单元素时,这个过程可能会变得非常…

    2025年3月7日
    200
  • 如何使用 FabricJS 使椭圆不可见?

    在本教程中,我们将学习如何使用 FabricJS 使椭圆不可见。椭圆形是 FabricJS 提供的各种形状之一。为了创建一个椭圆,我们将创建一个 Fabric.Ellipse 类的实例并将其添加到画布中。我们的椭圆对象可以通过多种方式进行自…

    2025年3月7日
    200
  • 增强当代调试之旅:第 2 部分

    在第 1 部分中,我们了解了如何使用 DevTools 编写和执行 JavaScript。在第 2 部分中,我们将介绍如何调试 JavaScript 并采用工作流程,以便更高效地解决 JavaScript 错误和诊断问题。 使用 DevTo…

    2025年3月7日 编程技术
    200
  • JavaScript中生成随机数字和字符串

    生成随机数或字母数字字符串的能力在许多情况下都会派上用场。您可以使用它在游戏中的不同位置生成敌人或食物。您还可以使用它向用户建议随机密码或创建文件名来保存文件。 我写了一篇关于如何在 PHP 中生成随机字母数字字符串的教程。我在这篇文章的开…

    2025年3月7日
    200

发表回复

登录后才能评论