Fabricjs设置按钮可切换移动x轴上的锁定
Fabric.js 是一个强大的 JavaScript 库，用于处理 HTML5 Canvas
- 首先，创建一个 HTML 页面，包含一个 Fabric.js 画布和一个按钮：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fabric.js Lock X Axis</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.6.0/fabric.min.js"></script>
</head>
<body>
<canvas id="canvas" width="800" height="600" style="border: 1px solid #ccc;"></canvas>
<button id="toggleLock">Toggle X Axis Lock</button>
<script src="app.js"></script>
</body>
</html>- 接下来，在
app.js文件中，初始化 Fabric.js 画布并添加一个矩形对象：
const canvas = new fabric.Canvas('canvas');
const rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 100,
height: 100
});
canvas.add(rect);- 现在，我们需要创建一个函数来切换矩形对象的
lockMovementX属性：
function toggleLock() {
rect.lockMovementX = !rect.lockMovementX;
}- 最后，将此函数绑定到按钮的点击事件：
document.getElementById('toggleLock').addEventListener('click', toggleLock);现在，当你点击 "Toggle X Axis Lock" 按钮时，矩形对象将在 X 轴上锁定或解锁。
相关·内容
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
腾讯云开发者
