Fabricjs 设置按钮以在移动 x 轴上切换锁定

Question

我正在fabricjs画布中制作图像处理工具，我需要添加一些在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);

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

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/