javascript - 启动时无法在所有区域选择 Canvas

Question

见 http://liveweave.com/CQJDKc

当您单击图像的背面部分时，即带有女孩和男孩奔跑的图像时，您将无法拖动或选择 Canvas 组，但是当您单击太阳部分时， Canvas 是可选的并且可以拖动。

但是一旦你选择 Canvas 元素并拖动它，整个 Canvas 就变得可选为什么这么大的问题无法弄清楚？？..

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

Answer 1

我不确定这是否正是导致您的问题的原因，但我认为您的问题只是因为您将组定位到中心，而 Canvas 无法很好地渲染它。

将组定位到中心后从 Canvas 中删除组，然后再次将组添加到 Canvas 可以解决您的问题。这是演示 http://liveweave.com/lcCAFH

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

希望对你有帮助