Fabric.js 子类中的颜色正在更改为黑色。

2024-03-15

我正在尝试子类 Fabric.Group 并将 JSON 字符串加载到其中。 我遇到的问题是子类组中的 Fabric.Rect 的颜色正在更改为黑色。 当我直接在 Fabric.Group 中执行此操作时,效果很好。 我一直在玩 fromObject 的变体,但我似乎无法弄清楚我做错了什么。 当我“激活”组中的物体时,这种变化似乎就发生了。

这是一个小提琴,展示了我的问题https://jsfiddle.net/adgu/49feomm7/ https://jsfiddle.net/adgu/49feomm7/
单击“加载组”按钮可以看到红色矩形(这是正确的),单击“加载自定义组”按钮可以看到黑色矩形。 JSON 是相同的,只是类型在一种情况下为“group”而在另一种情况下为“customGroup”。

fabric.CustomGroup = fabric.util.createClass(fabric.Group, {

  type: 'customGroup',

  initialize: function(objects, options) {
    options || (options = { });    
    //console.log('initialize objects', objects);
    //console.log('initialize options', options);
    this.callSuper('initialize', objects, options);    
  },

  toObject: function() {
    return fabric.util.object.extend(this.callSuper('toObject'), {
    });
  },

  _render: function(ctx) {
    this.callSuper('_render', ctx);
  }
});

fabric.CustomGroup.fromObject = function(object, callback) {   
   //console.log('fromObject', object);
   var _enlivenedObjects;
   fabric.util.enlivenObjects(object.objects, function (enlivenedObjects) {
      //console.log('enlivenObjects object', object);
      //console.log('enlivenObjects object.objects', object.objects);      
      //console.log('enlivenObjects enlivenedObjects', enlivenedObjects);
      delete object.objects;    
      _enlivenedObjects = enlivenedObjects;
   });
   return new fabric.CustomGroup(_enlivenedObjects, object);   
};

我发现一个已关闭的错误报告解决了我的问题:https://github.com/kangax/fabric.js/issues/3156 https://github.com/kangax/fabric.js/issues/3156

通过将 true 添加到初始化 callSuper 的末尾,它开始工作。像这样:

this.callSuper('initialize', objects, options, true);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Fabric.js 子类中的颜色正在更改为黑色。 的相关文章

  • 裁剪后,fabricjs 将裁剪的对象设置为画布的背景

    在我的fabricjs中 我正在制作画布并向其添加图像并将图像设置为背景 然后我将卡瓦斯剪裁到一定的宽度和高度 裁剪画布后 我想要一个新的画布或以裁剪区域作为背景的相同画布 全部覆盖画布的宽度和高度 或者可以使用裁剪区域的高度和宽度制作新画
  • 使用fabric.js 在画布上自由绘图

    我正在尝试使用 Fabric js 在画布上自由绘图 但我无法在我这边自由绘制类似喷雾 圆形 纹理模式的图案 我使用此代码 只有铅笔模式绘图可以工作 但是当我选择喷雾和另一种模式是用铅笔绘图 这是我的 HTML这是小提琴墨水 http js
  • Fabric.js - 无需按住鼠标按钮即可移动对象

    在 Fabric js 中 可以通过左键单击 按住并移动鼠标在画布中移动对象 在这种情况下 所选对象会跟随鼠标光标移动并object moving被解雇 释放鼠标左键可退出此模式 有没有办法改变这种行为并让对象通过不同的事件进入这种模式 例
  • 使用 Fabric.js 的交互式文本字段

    在过去的几周里 我经常使用 Fabric js 但对于文本字段 我只发现可以在创建时设置文本 有没有可能的方法来制作交互式文本字段 或者我是否必须找到解决方法来实现这一目标 对于交互式文本字段 我指的是画布上我可以单击并直接写入的区域 Fa
  • 使用 Fabric.js 以编程方式创建和选择组

    假设我有一个包含 6 个对象的画布和一个位于画布外的按钮 当我单击此按钮时 其中 3 个对象将成为一组并被选中 对象将保持其相对于画布的位置 那可能吗 我尝试了很多事情 但都能成功 我正在寻找的解决方案如下所示 var objectList
  • 如何使用 Fabric.js 设置对比度和饱和度

    我想在图像编辑器中设置对比度 饱和度和色调 为此 我使用fabric js 但它只有亮度选项 这是我的 Fabric JS 代码 function fabric Object prototype transparentCorners fal
  • FabricJS:始终在画布上居中对象

    是否可以始终将对象置于 Fabricjs 画布的中心 背景 我正在构建一个网络工具 可以使用 Fabricjs 轻松创建复杂的动画 我希望能够将画布大小的宽度和高度设置为 100 因此 我想将所有对象放置在中心并为其添加 X Y 偏移 当我
  • 将图像拖放到画布上 (FabricJS)

    问题 我想用图像而不是canvas目的 这意味着您必须先将要添加的内容添加到画布并作为画布的一部分 然后才能添加它 这些图像实际上是网站的一部分 因此不需要做一些复杂的事情 我在这里找到的这段代码仅适用于对象而不是实际元素的情况 顺便说一句
  • JavaScript - 动态创建 SVG 并修改光标

    假设我有一个 HTML5 画布 在本例中使用 Fabric js 并且我想更改画布上的光标以表示已选择的画笔大小和颜色 我认为应该有一种方法可以通过使用 JS 动态更改 SVG 的属性 大小和颜色 来做到这一点 这样我们就不必使用多个图像
  • Fabricjs intersectsWithObject 当对象为 Fabric.Rect 时返回 false

    我试图在观察 object moving 事件时确定fabric Rect何时与另一个fabric Rect重叠 但fabric Group与fabric Rect之间的结果不一致 当我将 Group 移动到 Rect 实例上时 inter
  • 碰撞检测布料js

    我正在使用 Fabric js 我使用以下函数将图像放在画布上 当我单击画布时 图像会放置在该位置 我想知道是否有方法可以检查天气 那里已经存在某些东西我点击的位置 特别是如果有其他图像或没有 document getElementById
  • 填充形状的图像不会在 FabricJS 中使用 loadFromJSON 加载

    I have JSON带有 Fabric Rect 对象的数据 当我尝试加载这个时JSON数据到织物画布上从JSON加载 形状加载完美 但形状中填充的图案未渲染 仅在单击形状后才会渲染图案 我已将我的代码复制到织物厨房水槽执行模块中 并尝试
  • 获取模型或控制器中消化的 asset_path

    我有一个Article模型 它有一个字段svg path I use fabricjs绘制可以包含多篇文章且可修改的画布 我目前所做的是生成一个json包含文章的所有必需字段 包括svg path 当我尝试使用asset path帮手 ht
  • 使用动态模式从 JSON 加载

    我正在尝试保存 Fabric js 画布并使用重新加载它loadFromJson 但我收到错误 patternSourceCanvas 未定义 我认为我应该将其设为全局 所以我删除了 var 但是 当我用新图案填充其他新形状时 这个新图案将
  • 尝试在 FabricJS 中使用句柄创建对话气泡

    我正在尝试使用 FabricJS 创建一个语音气泡 以集成到 WordPress 插件中 希望 免费发布 以帮助人们注释图像 我在这里找到了原始的气泡 语音气泡 html5 canvas js https stackoverflow com
  • Fabric.js 鼠标右键单击

    有没有办法在 Fabric js 画布上接收右键单击鼠标事件 以下代码仅适用于左键单击 canvas observe mouse down function console log mouse down NOTE 上面的大多数答案都已经过时
  • Fabric js 或 imagick 从图像中删除白色

    我遇到了这种情况 我很难在谷歌上搜索并解释 我们公司在铝上打印照片 我们为客户提供两种选择 第一个选择是将他们的照片打印在铝上 就像 他们把照片给了我们 所以如果照片有白色 背景 图片以白色背景打印 简单的 像那样 第二个选项是我们可以打印
  • 通过 Fabric.js 推送 D3.js 输出以支持 IE8?

    我正在评估Fabric js http fabricjs com 作为替代拉斐尔 js http raphaeljs com 用于创建与 IE8 兼容的交互式可视化 IE8 不支持 SVG 或画布 不幸的是 IE8 支持是不可协商的 Rap
  • Fabric.js 如何在不拉伸文本的情况下水平调整 IText 大小

    我在父 Group 对象中有这个 IText 对象 当我选择组并水平 以及垂直 调整其大小时 IText 也会调整大小 这使得文本拉伸并且看起来很糟糕 现在我想做的是将 IText 中心本身 保持其纵横比 放在组内 我怎样才能做到这一点 我
  • Fabric js-在保存和加载回画布时缺少添加附加属性的扩展 toObject 方法

    我创建了一个带有矩形和文本的织物组 最后 我使用以下代码将自定义属性 名称 添加到组类中 我使用 JSON stringify canvas 将画布数据序列化为 JSON 并将 Json 字符串发送到 java 最后将 Json 字符串保存

随机推荐