Question

我使用fabricjs 1.7.21并有一个添加文字的按钮。我如何使用单个IText对象添加一组对象，例如多个可编辑的IText字段（请参阅右侧）到画布？

换句话说，我希望能够通过点击添加类似于右侧的内容，并且能够将其作为一个组移动。

＆＃13;

var canvas = new fabric.Canvas("c");
canvas.setHeight(500);
canvas.setWidth(500);

// Add Text
function Addtext() {
  var text = new fabric.IText("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;
}

// Right Side Objects

// Header Constants
const toppers = {
  fontSize: 27,
  hasBorders: true,
  hasControls: false,
  left: 380,
  lockMovementX: true,
  lockMovementY: true,
  lockRotation: true,
  originX: "center",
  originY: "center",
  selectable: true,
  align: "mid",
  centeredScaling: true,
};
const headingOne = {
  lockMovementX: true,
  lockMovementY: true,
  originX: "center",
  originY: "center",
  selectable: true,
  align: "mid",
  fontSize: 14,
  fontStyle: "italic",
  hasBorders: true,
  hasControls: false,
  hasRotatingPoint: false,
  left: 380,
};
const headingTwo = {
  align: "mid",
  centeredScaling: true,
  fontSize: 20,
  hasBorders: true,
  hasControls: false,
  hasRotatingPoint: false,
  lockMovementX: true,
  lockMovementY: true,
  lockRotation: true,
  originX: "center",
  originY: "center",
  selectable: true,
  left: 380,
};

canvas.add(new fabric.IText("Some Text", {
  ...toppers,
  top: 25,
}));
canvas.add(new fabric.IText("Some Text", {
  ...toppers,
  fontWeight: "bold",
  top: 60,
}));
canvas.add(new fabric.IText("Some Text", { 
  ...headingOne,
  top: 90,
}));
canvas.add(new fabric.IText("Some Text", { 
  ...headingTwo,
  top: 110,
}));

＆＃13;

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

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.21/fabric.min.js"></script>
<button onclick="Addtext()">Add Text</button>
<canvas id="c"></canvas>

＆＃13;

Answer 1

我不确定是否真正了解您的需求，但如果您只需要一个按钮，将一个textField添加到画布并将其绑定到一个组，我认为这应该有效：

set_merchant

我不确定你为什么需要

var canvas = new fabric.Canvas("c");
canvas.setHeight(500);
canvas.setWidth(500);
canvas.isDrawingMode = false;
var myGroupOfText = new fabric.Group();

function Addtext() {
  var text = new fabric.IText("Type...", {
    fontSize: 30,
    top: 10,
    left: 10,
    width: 200,
    height: 200,
    textAlign: "center"
  });
  canvas.add(text);
  myGroupOfText.add(text);      
}

但如果您愿意，我想将此问题添加到您的canvas.setActiveObject(text); text.enterEditing(); text.selectAll();方法中是没有问题的。请注意，“添加”方法已包含对AddText的调用。

最后，请不要将canvas.renderAll()误认为是假设的drawingMode。 insertionMode是画布固有的设置，用于确定是否应启用自由绘制（也就是通过单击+移动绘制形状）。除非您有特定的约束，否则每次添加IText时都无需重新设置。

编辑： 根据你的评论，你可能想要使用它：

drawingMode

这将允许您添加X文本字段（通过重复var canvas = new fabric.Canvas("c"); canvas.setHeight(500); canvas.setWidth(500); canvas.isDrawingMode = false; [...] function addGroupOfText() { var myGroupOfText = new fabric.Group(); myGroupOfText.setOptions({selectable: true}); var options = { fontSize: 30, top: 10, left: 10, width: 200, height: 200, textAlign: "center", selectable: false, fontWeight: normal, // or 'bold', or a number. see docs underline: false, // or true fontStyle: normal // or 'italic'. see docs } this.addText(myGroupOfText, options); // repeat this call as many time as needed } function addText(group, options) { var text = new fabric.IText("Type...", options); canvas.add(text); group.add(text); }调用的X倍）并为每个文本字段指定不同的选项。我建议您查看文档http://fabricjs.com/docs/fabric.IText.html和http://fabricjs.com/docs/fabric.Group.html。请注意，我在此addText设置了selectable: false，以确保没有一个被选为一个，IText到该组，以确保它可以选择。

如果不清楚，请在评论中要求精确，我很乐意回答你。

如何添加一组保持分组的单独对象？

1 个答案: