FabricJS - 获取所选对象的类型和大小

Question

我正在尝试获取所选对象的大小和类型。

在下面找到我的最小示例：

 var canvas = new fabric.Canvas("c"); canvas.on("object:selected", onObjectSelected); $("#addTxt").on("click", function(e) { text = new fabric.Text("Insert Text here", { left: 100, top: 100 }); canvas.add(text); }); function onObjectSelected(o) { //activeObject = canvas.getActiveObject() activeObject = o.target; console.log(activeObject); console.log("test"); if (activeObject.isType("text")) { //display text logic } else if (activeObject.isType("image")) { //display image } else if (activeObject.isType("xyz")) { //display shape logic } }

 #c { background-color: rgb(255, 255, 255); margin: 10px; border: 1px solid gray; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.0/font/bootstrap-icons.css" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <script src="https://unpkg.com/fabric@5.2.1/dist/fabric.min.js"></script> <button type="button" id="addTxt" class="btn btn-primary">Add Text</button> <canvas id="c" width="400" height="400"></canvas>

当我用鼠标选择对象时，我没有得到任何控制台响应。

有什么建议我做错了吗？

感谢您的回复！

Answer 1

当你创建一个画布时，有一些动作会触发它。 根据文档提供的列表， canvas中不存在这样的object:selected事件，但object:modified和object:moving等其他事件存在。

但是，通过使用selection:created和selection.updated的组合，您可以使用文本周围的灯箱模拟“选择”对象的事件。

在这种情况下，每当您第一次单击或单击画布然后再次单击文本对象时，都会触发第一个。 当您从一个文本框更改为另一个文本框时，会出现第二个。

从片段中selected的对象中有几个属性，您可以对其进行解构和检索文本对象的尺寸。

 var canvas = new fabric.Canvas("c"); canvas.on("selection:created", onObjectSelected); canvas.on("selection:updated", e => console.log("Moved from other text")); $("#addTxt").on("click", function(e) { text = new fabric.Text("Insert Text here", { left: 100, top: 100 }); canvas.add(text); }); function onObjectSelected(o) { console.log(JSON.stringify(o)) const { selected } = o; const { type, width, height } = selected[0] console.log(type) if (type === "text") { console.log("This is a text with dimensions:", width.toFixed(2), "x", height.toFixed(2)) //display text logic } else if (type === "image") { //display image } else if (type === "xyz") { //display shape logic } }

 #c { background-color: rgb(255, 255, 255); margin: 10px; border: 1px solid gray; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.0/font/bootstrap-icons.css" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <script src="https://unpkg.com/fabric@5.2.1/dist/fabric.min.js"></script> <button type="button" id="addTxt" class="btn btn-primary">Add Text</button> <canvas id="c" width="400" height="400"></canvas>