Question

fabric.js 中的图像对象问题

2017-01-26

2725

javascript jquery canvas html5-canvas fabricjs

我是 fabric.js 的新手。我需要从画布中的 URL 加载几张图片，并将它们添加为图像对象，以便我可以设置它们的 z 索引。

我尝试使用 Image.fromURL ，但它没有返回对象，所以我无法设置它们的 z 索引。新的 fabric.Image 从页面获取图像，所以我没有从中得到结果。

这是我到目前为止所做的

var canvas = new fabric.Canvas('myCanvas');
var front_wall = fabric.Image.fromURL('img/bedroom1-front/front_wall.png', 
    function(img) {
        img.scale(0.65);
        canvas.add(img);
    }
);

我用同样的方式添加了另外五张图片。

fabric.Image.fromURL 可以返回图像对象（通过使用任何属性）吗？

所以我可以在加载后更改它们的 z 索引。

抱歉，我没有 jsfiddle 可展示。

Answer 1

欢迎来到 Stack Overflow，

请查看此 fiddle

我在该 fiddle 中添加了一些注释。代码如下：

var srcImg = "http://fabricjs.com/lib/pug.jpg";
var canvas = new fabric.Canvas('c');
var icon = null;
var image = fabric.Image.fromURL(srcImg, function(oImg) {
                    oImg.set({width: oImg.width / 3,
                              height: oImg.height / 3,
                              left: 100,
                              top: 100,
                              originX: 'center',
                              originY: 'center',
                              selectable: false,
                              transparentCorners: false});

          //magic strats here to make active Image and you can control image object here
                    canvas.setActiveObject(oImg);
                    icon = canvas.getActiveObject();
                    icon.hasBorders = false;
                    icon.hasControls = false;                   
                    canvas.add(oImg);
                });

//if you want to control outside somewhere you can do this:
setTimeout(function(){
    icon.set({'top': 200, 'left': 200});
  canvas.renderAll();
}, 1500);