添加特定类型的对象时如何更改“模式”？

Question

我使用的是 fabricjs 1.7.20 并且有“选择”和“绘制”模式。我怎样才能使它在我添加文本时（使用按钮，同时仍处于绘制模式）将模式设置为选择模式，以便我可以立即编辑文本对象？

var canvas = new fabric.Canvas("c", {
  backgroundColor: "#fff"
});
canvas.setHeight(300);
canvas.setWidth(300);

// Add text
function Addtext() {
  var text = new fabric.IText("Tap & type", {
    fontSize: 30,
    top: 10,
    left: 10,
    width: 200,
    height: 200,
    textAlign: "center"
  });
  canvas.add(text);
  canvas.setActiveObject(text);
}

// Modes
$("#select").click(function() {
  canvas.isDrawingMode = false;
});
$("#draw").click(function() {
  canvas.isDrawingMode = true;
});

canvas {
  border: 1px solid #dddddd;
  margin-top: 10px;
  border-radius: 3px;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<button onclick="Addtext()">Add Text</button>
<button id="draw">Draw Mode</button>


<canvas id="c"></canvas>

Answer 1

您可以在文本方法中使用enterEditing()，如果需要，还可以使用 selectAll()。

var canvas = new fabric.Canvas("c", {
  backgroundColor: "#fff"
});
canvas.setHeight(300);
canvas.setWidth(300);

// Add text
function Addtext() {
  var text = new fabric.IText("Tap & type", {
    fontSize: 30,
    top: 10,
    left: 10,
    width: 200,
    height: 200,
    textAlign: "center"
  });
  canvas.add(text);
  canvas.setActiveObject(text);
  text.enterEditing();
  text.selectAll();
  text.renderCursorOrSelection();  // or canvas.renderAll();
  canvas.isDrawingMode = false;
}

// Modes
$("#select").click(function() {
  canvas.isDrawingMode = false;
});
$("#draw").click(function() {
  canvas.isDrawingMode = true;
});

canvas {
  border: 1px solid #dddddd;
  margin-top: 10px;
  border-radius: 3px;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<button onclick="Addtext()">Add Text</button>
<button id="draw">Draw Mode</button>


<canvas id="c"></canvas>