0
251
ViewsFabricJS: obtenga el tipo y el tamaño del objeto seleccionado
Estoy tratando de obtener el tamaño y el tipo del objeto seleccionado.
Encuentra debajo mi ejemplo mínimo:
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>Cuando selecciono el objeto con el mouse, no obtengo ninguna respuesta de la consola.
¿Alguna sugerencia de lo que estoy haciendo mal?
¡Agradezco sus respuestas!
1 answers
Answer question0
Cuando crea un lienzo, hay algunas acciones que lo activan. De acuerdo con la lista proporcionada por la documentación , no existe tal evento object:selected en el canvas , pero otros como object:modified y object:moving sí.
Sin embargo, al usar una combinación de selection:created y selection.updated , puede simular el evento de "seleccionar" el objeto con ese cuadro de luz alrededor del texto.
En este caso, el primero se activa cada vez que hace clic por primera vez o hace clic en el lienzo y luego vuelve a hacer clic en el objeto de texto. La segunda ocurre cuando cambias de un cuadro de texto a otro.
Hay varias propiedades en el objeto selected del fragmento, que puede desestructurar y recuperar las dimensiones del objeto de texto.
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>