Fabric.js IText文本对齐功能失效问题求助

问题原因 #

你的代码中IText对象没有设置固定宽度，文本容器宽度与内容宽度完全一致，导致左/中/右对齐的视觉效果无法体现；同时旧版本Fabric.js（1.7.9）中修改对齐属性后，需要触发对象坐标更新才能正确渲染。

修复步骤 #

1. 给IText对象添加固定width属性，让文本容器有足够空间展示对齐效果
2. 修正变量名拼写错误（aling改为align）
3. 修改对齐属性后调用setCoords()更新对象坐标，再重新渲染画布

修改后的完整代码 #

JavaScript部分

var canvas = new fabric.Canvas('canvas');

var text1 = new fabric.IText("hello", { 
        borderColor: '#eaeaea',
        cornerColor: '#eaeaea',
        cornerSize: 9,
        cornerStyle: 'circle',
        transparentCorners: false,
        lockUniScaling: false,
        fontFamily: "Arial",
        fill: '#000',
        stroke: '#000',
        fontWeight:"normal",
        strokeWidth: 0,
        strokeUniform: true,
        id:929,
        fontSize:30,
        width: 200 // 添加固定宽度
});

var text2 = new fabric.IText("world", { 
        borderColor: '#eaeaea',
        cornerColor: '#eaeaea',
        cornerSize: 9,
        cornerStyle: 'circle',
        transparentCorners: false,
        lockUniScaling: false,
        fontFamily: "Arial",
        fill: '#000',
        stroke: '#000',
        fontWeight:"normal",
        strokeWidth: 0,
        strokeUniform: true,
        id:92929,
        fontSize:30,
        top:40,
        width: 200 // 添加固定宽度
});

canvas.add(text1);
canvas.add(text2);

$("body").on("click", '.text-align' , function (e) {
      var align =  $(this).attr('data-action'); // 修正拼写错误
      console.log(align);
      // 设置对齐属性
      text1.set('textAlign', align);
      text2.set('textAlign', align);
      // 更新对象坐标
      text1.setCoords();
      text2.setCoords();
      // 重新渲染画布
      canvas.renderAll();
});

HTML部分

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<div class="container-fluid">
<div class="row">
<div class="col-6 col-sm-6 col-md-6"> <canvas id="canvas" width="200" height="400" style="border:1px solid;"></canvas> </div>
<div class="col-6 col-sm-6 col-md-6"> <button type="button" class="text-align" data-action="left">Left</button>
<button type="button" class="text-align" data-action="center">Center</button>
<button type="button" class="text-align" data-action="right">Right</button> </div>
</div>
</div>

补充说明 #

如果偏好使用setTextAlign方法，也可以替换点击事件中的代码为以下内容，效果一致：

$("body").on("click", '.text-align' , function (e) {
      var align =  $(this).attr('data-action');
      console.log(align);
      text1.setTextAlign(align);
      text2.setTextAlign(align);
      // 触发IText内部布局更新
      text1.renderCursorOrSelection();
      text2.renderCursorOrSelection();
      canvas.renderAll();
});

内容的提问来源于stack exchange，提问作者NekoLopez