Проблема с FabricJS TextBox не может выбрать и отредактировать значение, а индекс слоя работает неправильно

Question

У меня проблема с текстовым полем Fabric: пользователь не может выбрать TextBox и изменить значение. И используя функцию canvas.MoveTo для установки изображения облака в индекс 2 и текстового поля в индекс 7, я ожидаю, что TextBox находится над изображением, но на самом деле текстовое поле всегда отображается за изображением облака.
Вот мой код

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 до номера объекта, присутствующего на холсте.

И, как я вижу, вы меняете левое и верхнее с помощью tansformMatrix, поэтому просто установите левое и верхнее для объекта.

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>