Fabricjs 设置按钮以切换锁定运动 x 轴

Question

我正在用 fabricjs 制作图像处理工具 canvas，我需要添加一些位置固定的矩形，这些矩形可以在 Y 轴上移动，但同时允许用户在 x 轴上移动它们如有必要，轴，

上述矩形在召唤时固定为以下属性：

// creates a rectangle object for text1
var rect = new fabric.Rect({
    fill: 'rgba(0, 16, 8, 0.45)',
    left: 150,
    top: 200,
    width: 700,
    height: 120,
    centeredScaling: true,
    lockMovementX: true,
    stroke: 'rgba(0, 0, 0, 0.10)',
    strokeWidth: 0.1,
});

// adds rectangle onto canvas
canvas.add(rect);

这可以通过添加一个复选框并在 true 和 false 状态之间切换来完成，就像在这个演示中一样：

http://fabricjs.com/controls-customization

使用 fabric js 文档中的以下变量：

LockMovementX：布尔值 true时，对象水平移动被锁定

这些参考资料也可用于此目标：

http://fabricjs.com/customization

https://github.com/fabricjs/fabric.js/wiki/Preventing-object-modification-(movement)

http://fabricjs.com/docs/fabric.Object.html#lockMovementX

但到目前为止，我还不能为这个变量找到一个有效的切换按钮，有人可以帮我解决这个问题吗？

这里有一个 js.fiddle 和我的代码示例：https://jsfiddle.net/Cuernacow/d1jve8w9/

Answer 1

我知道如何正确设置它：

在HTML代码中：

<p>hasControls</p>
<input type="checkbox" id="hasControls" checked="">
<p>Visible</p>
<input type="checkbox" id="visible" checked="">
<p>Lock x axis</p>
<input type="checkbox" id="lockMovementX" checked="">
<p>Lock y axis</p>
<input type="checkbox" id="lockMovementY" checked="">

在fabric js代码中：

//-------- Observe checkbox boolean value
//Each Id property in the html is used as an boolean property by fabric js 
//getActiveObject() selects the current active object in the canvas to apply such  property

function observeBoolean(property) {
document.getElementById(property).onclick = function() {
  canvas.getActiveObject()[property] = this.checked;
  canvas.renderAll();
};
  }

  //-------- Declaration of boolean variables to observe

  observeBoolean('hasControls');
  observeBoolean('visible');
  observeBoolean('lockMovementX');
  observeBoolean('lockMovementY');

以及更新后的 jsfiddle：https://jsfiddle.net/Cuernacow/d1jve8w9/18/

Fabricjs 设置按钮以切换锁定运动 x 轴

Fabricjs Setting button to toggle lock on movement x axis

fabricjs