远程图像下方的Fabric JS画布对象无法选择

时间:2014-06-04 16:38:13

标签: fabricjs

我试图设置FabricJS,但在远程图像下方画布变得无法选择。

我明白了,在加载图像之前计算选择区域,然后画出#34;推送"在图像下方,因此其对象变得无法选择。这仅在刷新页面时发生。当你输入新链接时,一切都很好。

<body>

    <div class="product thumbnail">
        <a href="remoteimage">
            <img src="remoteimage" alt="1232g" />
            1232g
        </a>
    </div>

    <div>
        <canvas id="canvas-id"></canvas>
    </div>

    <script>
        $(function() {
          var canvas = new fabric.Canvas('canvas-id');

          // create a rectangle with angle=45
          var circle = new fabric.Circle({
            radius: 20, fill: 'red', left: 100, top: 100
          });
          var triangle = new fabric.Triangle({
            width: 20, height: 30, fill: 'blue', left: 50, top: 50
          });

          canvas.add(circle, triangle);
        });
    </script>

</body>

如何在这种情况下正确设置FabricJS?

1 个答案:

答案 0 :(得分:0)

我认为这就是你所说的

var canvas = new fabric.Canvas('c');
var imgElement = document.getElementById('my-img');
var imgInstance = new fabric.Image(imgElement, {
  left: 100,
  top: 100,
  angle: 30,
  opacity: 0.85
});
canvas.add(imgInstance);

您可以在此处查看文档:图像部分中的http://fabricjs.com/fabric-intro-part-1/