javascript - FabricJS 文本框问题无法选择和编辑值且图层索引无法正常工作

Question

我的 Fabric 文本框有问题:用户无法选择文本框和编辑值。并使用函数canvas.MoveTo将云图像设置为索引2并将文本框设置为索引7，我期望文本框位于图像之上，但实际上，文本框始终显示在云图像后面。
这是我的代码

var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());

var canvas = new fabric.Canvas('editorCanvas', {
    backgroundColor: 'white',
    selectionLineWidth: 2,
    width: $("#canvasContainer").width(),
    height: $("#canvasContainer").height()
});

canvas.setBackgroundImage('https://futushigame.firebaseapp.com/Background.svg', canvas.renderAll.bind(canvas), {
    // Needed to position backgroundImage at 0/0
    originX: 'left',
    originY: 'top'
});

fabric.Image.fromURL("https://futushigame.firebaseapp.com/group5.svg", function(img) {
    img.left = 0.2;
    img.top = 54.94981;
    canvas.add(img);
    canvas.moveTo(img, 2);
    canvas.renderAll();
});

var textbox7 = new fabric.Textbox("LITTLE PRINCESS", {
    left: 0,
    top: -14.620352,
    width: 169.598436,
    fontSize: 19.3302,
    fontFamily: 'Nunito-Bold',
    fill: "#000000",
    editable: true,
});
textbox7.editable = true;
canvas.add(textbox7);
canvas.moveTo(textbox7, 7);
textbox7.transformMatrix = [1, 0, 0, 1, 64.7895, 169.1073];
textbox7.setCoords();
canvas.renderAll();

#canvasContainer {
  width: 100%;
  height: 100vh;
  background-color: gray;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
  <canvas id="editorCanvas"></canvas>
</div>

Answer 1

对于 moveTo 索引，最好选择 0 到 Canvas 中存在的对象数量之间的数字。

正如我所见，您正在使用 tansformMatrix 更改 left 和 top，因此只需将 left 和 top 设置为对象即可。

var canvas = new fabric.Canvas('editorCanvas', {
    backgroundColor: 'white',
    selectionLineWidth: 2,
    width: $("#canvasContainer").width(),
    height: $("#canvasContainer").height()
});

canvas.setBackgroundImage('https://futushigame.firebaseapp.com/Background.svg', canvas.renderAll.bind(canvas), {
    // Needed to position backgroundImage at 0/0
    originX: 'left',
    originY: 'top'
});

fabric.Image.fromURL("https://futushigame.firebaseapp.com/group5.svg", function(img) {
    img.left = 0.2;
    img.top = 54.94981;
    canvas.add(img);
    canvas.moveTo(img, 0);
    canvas.renderAll();
});

var textbox7 = new fabric.Textbox("LITTLE PRINCESS", {
    left: 64.7895,
    top: 154.4856948,
    width: 169.598436,
    fontSize: 19.3302,
    fontFamily: 'Nunito-Bold',
    fill: "#000000",
    editable: true,
});
canvas.add(textbox7);
canvas.moveTo(textbox7, 1);
//textbox7.transformMatrix = [1, 0, 0, 1, 64.7895, 169.1073];
textbox7.setCoords();
canvas.renderAll();

#canvasContainer {
  width: 100%;
  height: 100vh;
  background-color: gray;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
  <canvas id="editorCanvas"></canvas>
</div>