Fabric js使对象适合画布的左右中心

时间:2014-05-02 08:21:03

标签: canvas fabricjs

这里我试图在画布的中心设置对象.Fit center命令工作正常。遇到适合左中心命令的问题。 请参阅适合中心命令的波纹管快照。当我缩放较大尺寸的文本并将其设置为工作中心时。

演示链接: - Click Here

Fit to center

但是当我缩放相同的对象并运行命令Fit To left center时,你可以看到这里的对象超出了网格的中心原点y。

Fit to left center

当我设置默认文本(没有比例)并运行命令Fit To left center时,它的工作效果就像波纹管快照一样。

Fit to left center without scale

Bellow是我的示例代码,适合在画布中间左侧的对象

$("#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();



   });

1 个答案:

答案 0 :(得分:4)

我已经为此做了答案

演示链接: - Click here

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();



   });