Fabricjs Canvas无法选择任何对象答案

【问题标题】：FabricJS canvas cant select any objectsFabricjs Canvas无法选择任何对象
【发布时间】：2017-06-18 09:32:15
【问题描述】：

通过“loadFromJSON”将有效的 JSON 对象加载到画布后，我遇到了画布问题。画布呈现带有对象甚至正确背景图像的有效画布。出于某种原因，我无法选择任何东西。如果我尝试单击并选择几个对象，甚至没有显示蓝色选择框。我确定该对象是有效的，因为我已将有效的教程对象粘贴到 loadFromJSON 中，并将我的 JSON 对象粘贴到 jsfiddle 教程中。

如果我单击鼠标右键...我会得到一个保存图像选项，如果你问我，这看起来有点奇怪。

这是我的代码：

canvas.loadFromJSON(data, canvas.renderAll.bind(canvas), function(object, o) {
    o = $.fn.mapCanvasFieldset(object); // custom function
});

canvas.renderAll();

JSON 对象（数据变量）：

{
   "objects":[
      {
         "type":"image",
         "originX":"left",
         "originY":"top",
         "left":133,
         "top":108,
         "width":267,
         "height":80,
         "fill":"rgb(0,0,0)",
         "stroke":null,
         "strokeWidth":0,
         "strokeDashArray":null,
         "strokeLineCap":"butt",
         "strokeLineJoin":"miter",
         "strokeMiterLimit":10,
         "scaleX":0.33,
         "scaleY":0.33,
         "angle":0,
         "flipX":false,
         "flipY":false,
         "opacity":1,
         "shadow":null,
         "visible":true,
         "clipTo":null,
         "backgroundColor":"",
         "fillRule":"nonzero",
         "globalCompositeOperation":"source-over",
         "transformMatrix":null,
         "skewX":0,
         "skewY":0,
         "src":"",
         "filters":[],
         "resizeFilters":[],
         "crossOrigin":"",
         "alignX":"none",
         "alignY":"none",
         "meetOrSlice":"meet"
      }
   ],
   "background":"",
   "backgroundImage":{
      "type":"image",
      "originX":"left",
      "originY":"top",
      "left":0,
      "top":0,
      "width":350,
      "height":350,
      "fill":"rgb(0,0,0)",
      "stroke":null,
      "strokeWidth":0,
      "strokeDashArray":null,
      "strokeLineCap":"butt",
      "strokeLineJoin":"miter",
      "strokeMiterLimit":10,
      "scaleX":1,
      "scaleY":1,
      "angle":0,
      "flipX":false,
      "flipY":false,
      "opacity":1,
      "shadow":null,
      "visible":true,
      "clipTo":null,
      "backgroundColor":"",
      "fillRule":"nonzero",
      "globalCompositeOperation":"source-over",
      "transformMatrix":null,
      "skewX":0,
      "skewY":0,
      "src":"",
      "filters":[],
      "resizeFilters":[],
      "crossOrigin":"",
      "alignX":"none",
      "alignY":"none",
      "meetOrSlice":"meet"
   }
}

编辑： 也许是关键信息；我正在将画布加载到 Fancybox 中

【问题讨论】：

图像对象和背景图像的src 属性为空。这可能是您的问题的一部分。
因为本地地址，我自己清空了。在真实对象中，它填充了一个有效的 src url。
好吧，所以我调试了更多，这让我发现 Fancybox 中的 Fabric JS 画布导致了这个问题。如果我将同一个对象放在 Fancybox 之外，我可以选择所有对象...框内的内容是由 Ajax 加载的，所以画布可能无法注册。

标签： javascript jquery fabricjs

【解决方案1】：

好吧，经过大量调试，我终于解决了这个问题。出于某种原因，所有的画布都被展示出来了：没有。这就是为什么新生成的 DOM 没有显示出来所以可以点击的原因。

【讨论】：