FabricJS canvas 不能 select 任何对象

Question

通过 'loadFromJSON' 将有效的 JSON 对象加载到 canvas 后，我遇到了 canvas 问题。 canvas 使用对象甚至正确的背景图像呈现有效的 canvas。出于某种原因，我不能 select 任何东西。如果我尝试单击并 select 几个对象，甚至蓝色 selection 框都不会显示。我确定该对象是有效的，因为我已将有效的教程对象粘贴到 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"
   }
}

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

中

Answer 1

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

FabricJS canvas 不能 select 任何对象

FabricJS canvas cant select any objects

javascript

jquery

fabricjs