Fabric js подходит к левому и правому центру холста

Здесь я пытаюсь установить объект в центре холста. Команда Fit center работает хорошо. Возникла проблема с командой fit to left center. см. приведенный ниже снимок для команды fit center. Когда я масштабирую текст в большем размере и устанавливаю его по центру, он работает хорошо.

Демо-ссылка: Нажмите здесь

По центру

Но когда я масштабирую тот же объект и запускаю команду «Подогнать к левому центру», вы можете видеть, что здесь объект выходит за пределы центральной оси y сетки.

По левому центру

И когда я устанавливаю текст по умолчанию (без масштаба) и запускаю команду «Подогнать к левому центру», он работает хорошо, как показано ниже.

По левому центру без масштаба

Ниже приведен мой пример кода для размещения объекта в центре слева от холста

$("#fitleft").click(function() {
            $("#fitleft").css('display','none');
   $("#fitright").css('display','block');   

   var obj = canvas.getActiveObject();



    obj.set( {
              left: 315.4000015258789,
             // top: Top
             top: obj.get('top')  
               });        

            obj.setCoords();
                      canvas.renderAll();



   });

canvas fabricjs
person Sanjay Nakate    schedule 02.05.2014    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Я сделал ответ для этого

Демонстрационная ссылка: - Нажмите здесь

document.getElementById('fticenter').addEventListener('click', function (e) {
   var obj = canvas.getActiveObject();
     obj.center();

     obj.setCoords();


     canvas.renderAll();


});

document.getElementById('fittoleftcenter').addEventListener('click', function (e) {




    var obj = canvas.getActiveObject();

           var leftcenter=    canvas.width/2
        var halfleft = obj.currentWidth /2; 


       obj.set("left", leftcenter - halfleft);
       obj.set("top", obj.get('top'));   

            obj.setCoords();
                      canvas.renderAll();



   });


document.getElementById('fittorightcenter').addEventListener('click', function (e) {




    var obj = canvas.getActiveObject();
    var rightcenter=    canvas.width/2
        var halfright = obj.currentWidth /2; 
      obj.set("left", rightcenter - halfright);
       obj.set("top", obj.get('top'));    

            obj.setCoords();
                      canvas.renderAll();



   });
person Sanjay Nakate    schedule 02.05.2014