CODEWITHSUNDEEP
javascriptfabricjs
DS9
DS9

Reputation: 3033

Drag and Drop Image issue on New Fabric JS

In the latest version of Fabric JS, image drop feature is not working as expected. 

    function handleDrop(e) {
        e.preventDefault();
        // this / e.target is current target element.

        if (e.stopPropagation) {
            e.stopPropagation(); // stops the browser from redirecting.
        }

        var obj = document.querySelector('#draggable_items_container .drag_item.draggable_items');

        if($(obj).attr('data-type')=='image')
        {
            var image_url = $(obj).attr('data-value');
            var new_image = new fabric.Image(obj, {
                width: obj.width,
                height: obj.height,
                left: e.layerX,
                top: e.layerY,
            });
            canvas.add(new_image);
        }
        else
        {
            var text_value = $(obj).attr('data-value');
            if(text_value=='')
            {
                alert('You cant drag blank text');
                return false;
            }

            var params = {
                canvas_obj : canvas,
                text: text_value,
                left : e.layerX,
                top : e.layerY,
                font_size : 22,
                editable: false,
            };
            add_text_canvas(params);
        }
        return false;
    }

Working Fiddle:
http://jsfiddle.net/Ahammadalipk/w8kkc/185/

Not working in 2.0.0-beta.7

http://jsfiddle.net/dhavalsisodiya/w8kkc/412/

So how to fix this?

enter image description here

Upvotes: 2

Views: 1355

Answers (1)

Durga
Durga

Reputation: 15604

var newImage = new fabric.Image(img, {
    width: img.naturalWidth,
    height: img.naturalHeight,
    scaleX: setImageWidth/img.naturalWidth,        
    scaleY: setImageHeight/img.naturalHeight,
    // Set the center of the new object based on the event coordinates relative
    // to the canvas container.
    left: e.layerX,
    top: e.layerY
});

You need to set actual width and height of image, then scale X and Y,according to your requirement. Here is updated fiddle

Upvotes: 2

Related Questions