No quiero cambiar la relación de aspecto del objeto, así que quiero ocultar los controles que no sean las cuatro esquinas.
En la página siguiente, si selecciona "seleccionar rectángulo", se mostrarán manijas entre las cuatro esquinas y, si las opera, la relación de aspecto cambiará.
https://codepen.io/janih/pen/zGxoZv
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- http://stackoverflow.com/questions/20096949/how-to-select-fabric-js-object-programmatically --> <!-- http://jsfiddle.net/ThzXM/1/ --> <style> canvas { border: 1px solid #ccc; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> <script type="text/javascript"> $( document ).ready(function() { var canvas = new fabric.Canvas('canvas'); canvas.add(new fabric.Rect({ left: 100, top: 100, width: 75, height: 50, fill: 'green', stroke: 'black', strokeWidth: 3, padding: 10 })); canvas.add(new fabric.Circle({ left: 200, top: 200, radius: 30, fill: 'gray', stroke: 'black', strokeWidth: 3 })); $( "#selectrectangle" ).click(function() { canvas.setActiveObject(canvas.item(0)); }); $( "#selectsecond" ).click(function() { canvas.setActiveObject(canvas.item(1)); }); canvas.renderAll(); }); </script> </head> <body> <input id = "selectrectangle" type="button" value="select rectangle"/> <input id = "selectsecond" type="button" value="select second object"/> <canvas id="canvas" width="400" height="400" style="border:1px solid red"/> </body </html>versión
tela.js v4.6.0
Utiliza el método setControlsVisibility en un objeto de tejido:
obj.setControlsVisibility({ mt: false, mb: false, ml: false, mr: false });La documentación está aquí: http://fabricjs.com/controls-customization