Fabric.js是一个强大的JavaScript库,用于处理HTML5 Canvas上的图形和交互。它提供了丰富的功能,包括对象选择、移动、缩放、旋转等。
要通过键盘移动选定的对象,可以按照以下步骤进行操作:
<canvas id="canvas" width="800" height="600"></canvas>
<script>
var canvas = new fabric.Canvas('canvas');
</script>
var rect = new fabric.Rect({
left: 100,
top: 100,
width: 200,
height: 100,
fill: 'red'
});
canvas.add(rect);
document.addEventListener('keydown', function(event) {
var selectedObject = canvas.getActiveObject();
if (selectedObject) {
var moveDistance = 10; // 移动的距离
switch (event.keyCode) {
case 37: // 左箭头键
selectedObject.set('left', selectedObject.left - moveDistance);
break;
case 38: // 上箭头键
selectedObject.set('top', selectedObject.top - moveDistance);
break;
case 39: // 右箭头键
selectedObject.set('left', selectedObject.left + moveDistance);
break;
case 40: // 下箭头键
selectedObject.set('top', selectedObject.top + moveDistance);
break;
}
canvas.renderAll();
}
});
通过上述代码,你可以在Canvas上选择一个对象,并使用键盘的箭头键来移动选定的对象。左箭头键和右箭头键将水平移动对象,上箭头键和下箭头键将垂直移动对象。
领取专属 10元无门槛券
手把手带您无忧上云