Question

我不确定我是否误解了有关API的内容，或者这是否是一个真正的错误，所以在我打开问题之前我会问这里。

我在Canvas上绘制了一些对象，我不希望能够对它们进行任何操作（移动，旋转，缩放），除了选择本身。实际上，当我选择一个对象时，我无法用它做任何事情。但是，当我选择一组对象时，我无法移动或旋转它们，但拖动选择的角落确实实际上会缩放对象。

我在Windows 7上使用Fabric.js 1.3.0。在Chrome，Firefox和IE10上尝试了这一点，三者的行为相同。

这是我的HTML：

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page - My ASP.NET Application</title>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
</head>
<body>
    <canvas id="c"></canvas>
    <script src="/Scripts/jquery-2.0.3.js"></script>
    <script src="/Scripts/fabricjs-1.3.0/all.js"></script>
    <script type="text/javascript">
        $(function () {
            var canvas = new fabric.Canvas("c");

            canvas.setWidth(150);
            canvas.setHeight(150);

            for (var i = 0; i < 5; ++i) {
                for (var j = 0; j < 5; ++j) {
                    canvas.add(new fabric.Rect({
                        top: 20+i * 20, left: 20+j * 20, width: 10, height: 10, fill: 'blue',
                        selectable: true,
                        lockMovementX: true, lockMovementY: true,
                        hasControls: false,
                        lockScaling: true, lockRotation: true
                    }));
                }
            }
        });
    </script>
</body>
</html>

更新：如果Fabric's google group在规模事件中注册，我找到了一个建议：

canvas.onBeforeScaleRotate = function lock(object) { 
    object.lockScaling = true; 
}

但这没有用。而且，即使它确实有帮助，这也是非常不直观的。 lockMovement和lockScaling有什么区别？ lockMovement配置有效，而lockScaling配置不起作用......

Answer 1

没有lockScaling属性。您必须使用lockScalingX和lockScalingY

请参阅http://fabricjs.com/docs/fabric.Object.html#lockScalingX

对Fabric.js对象的lockScaling

1 个答案: