Fabric Js 将一个图像拖到另一个图像上

Question

我已经集成了 Fabric Js，它工作正常，但我有一个疑问，当我添加多张图片时，我无法将一张图片拖到另一张图片上，最后添加的图片保持在最上面，它们的位置可以改变吗？我发现一个 fiddle 工作正常但它没有图像和动态生成的元素栏。

var canvas = window.__canvas = new fabric.Element('drawing_area');

        $(".vb_image li a img, .vb_frame_slider, .vb_quote_slider, .vb_graphic_slider").click(function(e){

           var target = e.target || e.srcElement; 

            fabric.Image.fromURL(target.src, function(oImg) {
                canvas.add(oImg);
                oImg.scaleToWidth(200);
                canvas.centerObjectH(oImg).centerObjectV(oImg);
                oImg.setCoords();
                canvas.renderAll();


              });
        });

这是我发现的一些工作 fiddle 但我无法在图像上实现这个东西。 http://jsfiddle.net/RRv3g/3/

Answer 1

如果您希望您拖动的图像位于其他图像之上，您可以使用 image.moveTo(index) 或更简单的 image.bringToFront().

fabric.Image.fromURL(imageUrl, function(image) {
    image.on('selected', function() {
        image.bringToFront();
    });
    canvas.add(image);
    canvas.renderAll();
});

工作示例http://jsfiddle.net/px52snx4/

Fabric Js 将一个图像拖到另一个图像上

Fabric Js Drag One Image On another

javascript

jquery

z-index

drag

fabricjs