CODEWITHSUNDEEP
javascriptjqueryhtmlcanvasfabricjs
mydeve
mydeve

Reputation: 563

canvas not selectable on all area in starting

see http://liveweave.com/CQJDKc

when you click on back part of image ie image with girl and boys running u waill not be able to drag or select canvas group , but when u clik on sun part canvas is selectable and can be dragged.

but once u select canvas element and drag it whole canvas becomes selectable why so starngle issue could not figure out ??..

fabric.Image.fromURL('http://www.gettyimages.com/CMS/Pages/ImageCollection/StaticContent/image1_%20164248809.jpg', function (img) {
        var img1 = img.set({
            left: 0,
            top: 0
        });
        fabric.Image.fromURL('http://upload.wikimedia.org/wikipedia/commons/c/c3/Aurora_as_seen_by_IMAGE.PNG', function (img) {
            var img2 = img.set({
                left: 0,
                top: 0
            });
            group = new fabric.Group([img1, img2], {
                left: 0,
                top: 0,
                originX: 'center',
                originY: 'center'
            });
            canvas.add(group);
            group.center();
            //group.hasRotatingPoint=true;
            //group.lockMovementX = group.lockMovementY = true;
            group.lockUniScaling = true;
            group.hasBorders = group.hasControls= false;
            //group.selectable = false;
            canvas.renderAll();
        });
    });

Upvotes: 3

Views: 150

Answers (1)

Naeem Shaikh
Naeem Shaikh

Reputation: 15715

I am not sure if this exactly is causing your problem, but I think your problem is just because you are positioning the group to the center, and the canvas does not render it nicely.

Removing the group from canvas after positioning it to center and then again adding the group to the canvas solves your problem. here is demo http://liveweave.com/lcCAFH

 canvas.add(group);
                group.center();
              canvas.remove(group);
              canvas.add(group);

hope this helps

Upvotes: 1

Related Questions