CODEWITHSUNDEEP
javascriptjquerycanvashtml5-canvasfabricjs
pramod nanavare
pramod nanavare

Reputation: 1

issue with image object in fabric.js

I am complete newbie in fabric.js. I need to load several images from URL in canvas and add them as image object so I can set their z index.

I tried using Image.fromURL but it did not return object so I can't set their z index. New fabric.Image take images from page so I am not getting results from it.

This is what I have done so far

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);
    }
);

I add five more images same way.

Can fabric.Image.fromURL return the image object (by using any attribute) ?

So I can change their z-index after loading.

Sorry I don't have jsfiddle to show.

Upvotes: 0

Views: 2828

Answers (1)

Observer
Observer

Reputation: 3706

Welcome to Stack Overflow,

Please check this fiddle

I added some comments in that fiddle. Code is below:

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);

Upvotes: 1

Related Questions