在开始时所有区域都无法选择画布

时间:2014-11-20 06:43:49

标签: javascript jquery html5 canvas fabricjs

http://liveweave.com/CQJDKc

当你点击图像的背面部分,即图像与女孩和男孩跑,你不能拖动或选择画布组,但当你在太阳部分画布上的clik是可选择的,可以拖动。

但是一旦你选择了canvas元素并拖动它,那么整个画布变得可以选择为什么starngle问题无法解决?...

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

1 个答案:

答案 0 :(得分:1)

我不确定这是否确实导致了您的问题,但我认为您的问题只是因为您将组定位到中心,并且画布不能很好地呈现它。

在将组定位到中心后从画布中删除该组,然后再将该组添加到画布可以解决您的问题。 这是demo http://liveweave.com/lcCAFH

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

希望这会有所帮助