Question

我需要动态地将多组图像组添加到画布中，这些“多组”将根据其中包含的组被另一组拖过来做出不同的反应。我需要能够在屏幕上选择，旋转和拖动这些多组。

我选择使用FabricJS并使用fabric.Image.fromURL创建图像，进行操作，然后在回调函数中将它们添加到画布中。要将多个图像添加到组中，可以在级联回调函数中嵌套更多图像，如this tutorial

所示

我无法找到一种方法来获取这种方式创建的一组图像的引用，因此我可以添加另一组图像。在调用fabric.Image.fromURL并尝试为创建的图像分配引用之前声明变量不起作用。我得到一些工作的唯一方法是将一个组添加到画布然后将其设置为活动对象然后创建一个新组并将该活动对象添加到组中的可怕的绝望黑客，这太糟糕了，我不认为它将适用于3组。这是我最后的编码尝试;

fabric.Image.fromURL('images/icon_station.png', function(img) {
    var img1 = img;
    fabric.Image.fromURL('images/icon_curve.png', function(img) {
        img.set({left: 64,top: 64,angle: -90});
        var img2 = img;
        fabric.Image.fromURL('images/icon_curve.png', function(img) {
            var img3 = img;
            var tile_loop = new fabric.Group([img1, img2, img3]);
            tile_loop.set({left: 0, top: 0, height: 64, width: 64});
            canvas.add(tile_loop).setActiveObject(tile_loop);
        });
    });
});
fabric.Image.fromURL('images/icon_station.png', function(img) {            
    img.set({left: 64,top: 64});           
    var img1 = img;
    fabric.Image.fromURL('images/icon_straight.png', function(img) {
        img.set({left: 64,top: 64});
        var img2 = img;
        fabric.Image.fromURL('images/icon_curve.png', function(img) {
            img.set({left: 64,top: 64});
            var img3 = img;
            var tile_loop = new fabric.Group([img1,img2,img3,canvas.getActiveObject()]);
            tile_loop.set({left: 128, top: 128, height: 128, width: 128});
            canvas.add(tile_loop);
        });
    });
});

我见过的唯一另一种方法是将图片加载到html标签中并使用标签在结构中创建它们，比如

var imgElement = document.getElementById('my-img');
var imgInstance = new fabric.Image(imgElement, {left: 100,top: 100});
canvas.add(imgInstance);

但这似乎是最后的手段，我宁愿直接在fabricjs中加载图像。

我曾试图在Phaser中做到这一点，但它没有做团体组，Fabric有我需要的所有其他东西，所以我想留下它，这是一种耻辱它做这些处理图像的奇怪方式。

任何帮助都非常感谢，如果一切都失败了，请使用最后的手段，找到一个聪明的正确方法会很棒。

我在JSFiddle中创建了一个例子; http://jsfiddle.net/d7bjbpfb/

如何在fabricjs中创建包含多组图像的组

0 个答案: