如何在 fabric.js 中隐藏改变纵横比的句柄

Question

我不想改变物体的纵横比，所以我想隐藏四个角以外的手柄。

在下面的页面中，如果你select“select矩形”，四个角之间会显示手柄，如果你操作它，纵横比会改变。

handle image


<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <!--  -->
        <!-- 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>

版本

fabric.js v4.6.0

Answer 1

您在织物对象上使用 setControlsVisibility 方法：

obj.setControlsVisibility({
    mt: false,
    mb: false,
    ml: false,
    mr: false
});

文档在这里：http://fabricjs.com/controls-customization

Fiddle: http://jsfiddle.net/av01d/pnrvmc93/

如何在 fabric.js 中隐藏改变纵横比的句柄

how to hide the handle that changes the aspect ratio in fabric.js

javascript

fabricjs