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>