Fabric.js 1.7.21画布对象显示异常：对象位于画布后方

我帮你排查了代码里的几个关键问题，这些就是导致你看到奇怪现象的核心原因：

问题1：手动设置IText的width和height属性 #

Fabric.js的IText（以及所有文本类对象）会自动根据内容、字体大小计算自身尺寸，手动设置width和height会强制约束文本的显示区域，导致文本被裁剪，看起来像是被画布遮挡或者显示不全。这是最主要的问题。

问题2：CSS中无效的颜色值 #

你的canvas样式里border: 1px solid #3030;是无效的十六进制颜色（需要6位字符），这会导致边框无法正确显示，可能让你误以为画布的边界有问题；同时按钮样式里的background-color: #3030也存在同样的无效颜色问题。

问题3：尺寸变化后未重新渲染画布 #

在窗口resize时，你设置了画布尺寸，但没有调用renderAll()，这可能导致对象在尺寸变化后显示异常。

修复后的完整代码 #

JavaScript部分 #

var canvas = this.__canvas = new fabric.Canvas('canvas');
responsive();
window.addEventListener('resize', responsive);

function responsive() {
 var width = window.innerWidth || screen.width;
 var height = window.innerHeight || screen.height;
 var widthn = width - 10;
 var heightn = height - 10;
 canvas.setDimensions({ width: widthn, height: heightn });
 canvas.renderAll(); // 添加这行，确保尺寸变化后重新渲染画布
}

function clearcan() {
 var txt;
 if (confirm("Chuck this?")) {
 console.log(canvas)
 canvas.clear().renderAll();
 newleft = 0;
 }
}

// 修复后的添加文本函数
function Addtext() {
 var text = new fabric.IText("Tape & Type...", {
 fontSize: 30,
 top: 10,
 left: 10,
 textAlign: "center",
 fill: '#000' // 显式设置文本颜色，确保和白色画布区分开
 });
 canvas.add(text);
 canvas.setActiveObject(text);
 text.enterEditing();
 text.selectAll();
 text.renderCursorOrSelection();
}

CSS部分 #

body {
 background-color: #303030;
 color: white;
}
canvas {
 border-radius: 3px;
 border: 1px solid #303030; /* 修复无效的颜色值 */
 margin: 5px;
 background-color: white;
}
.btn {
 background-color: #303030; /* 修复无效的颜色值 */
 color: white;
}

HTML部分（无需修改） #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.21/fabric.min.js"></script>
<div class="col d-flex justify-content-center">
 <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
 <div class="btn-group mr-2" role="group" aria-label="First group">
 <button onclick="clearcan();" type="button" class="btn btn-sm">Clear</button>
 <button onclick="Addtext()"type="button" class="btn btn-sm"> Add Text</button>
 </div>
 </div>
</div>
<canvas id="canvas"></canvas>

额外说明 #

• 我显式设置了fill: '#000'，虽然Fabric默认文本颜色是黑色，但显式设置可以避免任何潜在的样式继承问题，确保文本在白色画布上清晰可见。
• 移除IText的width和height属性后，Fabric会自动根据文本内容计算合适的显示尺寸，不会再出现裁剪遮挡的情况。

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