Fabric.js: text shrinks when a grouped object is clicked after zoom or scale operation

[deepdoon]

Hi I have faced a new issue with fabricjs, I have a group of two text object created using 'Textbox' function, then some scaling operation have been performed on canvas as well as on objects in canvas. After this when that group of text objects is clicked by user the individual text objects shrinks. Below is the url for same: Click on 'ZoomIn' then click on text group, objects will shrink. What i observed is after scaling and clicking on group the scaleX value of individual object in group changes to 0.5

http://jsfiddle.net/Q3TMA/1065/

P.S It is working fine with objects created by Itext and Text functions.

[deepdoon]

anyone??

[asturur]

textbox has its own method on "onGroupScale". Anyway you should check the proper way to zoom canvas. If you zoom in proper way the problem is not observable.

http://jsfiddle.net/Q3TMA/1070/

duplicate of #2718

[deepdoon]

Thank you so much. It solved the problem. Though one other problem appears now. I was trying to place the object on canvas via dragging the object. In zoom mode(after using setZoom()) if i drag drop the items on canvas they do not place the item at cursor position item was placed little to the right and little towards bottom works fine when zoomOut is called. Any suggestion?

[asturur]

please show the code as always. i do not know how you drag and drop

[deepdoon]

Below is the code that i have used for drag drop. I have used jqListbox with drag and drop.

$("#lstObjects").jqxListBox({ width: 220, source: source, checkboxes: false, height: 300, allowDrag: true });
                   $("#lstObjects").on('dragEnd', function (event) {
                       if (event.args.label) {
                           var ev = event.args.originalEvent;
                           var x = ev.pageX;
                           var y = ev.pageY;
                           var offset = $("#myCanvas").offset();
                           var width = $("#myCanvas").width();
                           var height = $("#myCanvas").height();
                           var right = parseInt(offset.left) + width;
                           var bottom = parseInt(offset.top) + height;
                           if (x >= parseInt(offset.left) && x <= right) {
                               if (y >= parseInt(offset.top) && y <= bottom) {
                                   var posLeft = x - parseInt(offset.left);
                                   var posTop = y - parseInt(offset.top);
                                   var txt_propertylabel_id = "txt_propertylabel_" + event.args.label;

                                   if (event.args.label == 'textbox') {
                                       var width = $("#myCanvas").width();
                                       var txt_blankmenuitem_id = "txt_blankmenuitem_";
                                       fnAddTextBox(false, "Textbox", posTop, posLeft, 80, 0, canvas, txt_blankmenuitem_id, "", 18, "Textbox", "");
                                   }
                               }
                           }
                       }
                   });


function fnAddTextBox(readOnly, content, top, left, width, index, canvasobj, textbox_id, property_name, fontSize, previewData, nutrientValue) {
    var txtb;

    var name = textbox_id;
    if (fontSize == undefined)
        fontSize = 18;
            txtb = new fabric.Textbox(content, {
                fontFamily: 'arial',
                id: name,
                name: name,
                fill: '#000000',
                fontSize: fontSize,
                left: left,
                width: width,
                height: 50,
                top: top,
                cornerSize: 5,
                propertyname: property_name,
                tempPreviewData: previewData,
                nutrientId: nutrientValue,
                dollarEnabled: true,
                scaleX: 1,
                scaleY: 1
            });

    canvasobj.add(txtb);
}

               `

[deepdoon]

Hey the problem with drag drop is solved. I divided posLeft and posTop by scale factor. Thanks :)