0


我对 Fabric 文本框有疑问：用户无法选择 TextBox 并编辑值。并使用函数canvas.MoveTo将云图像设置为索引 2，文本框设置为索引 7，我希望 TextBox 在 Image 上方，但实际上，文本框始终显示在云图像后面。
这是我的代码

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>

4

1 回答 1

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>

于 2018-11-07T06:10:16.713 回答