Javascript 出血区域适用于通过鼠标拖动移动的对象，但不适用于键盘'；s箭头键

我有2张FabricJS画布和一些键盘移动功能。我可以在2张画布周围添加和拖动文本，并且受到限制（根据需要）。但是，如果我选择一个对象并用箭头键移动它，它不会绑定到“出血区域”。如何将限制应用于键盘移动

var activeCanvas，前面，后面，canvas1，canvas2；
$（文档）.ready（函数（）{
canvas1=新织物。Canvas（'front'）；
canvas2=新织物。Canvas（'back'）；
画布1.设置高度（360）；
画布1.设置宽度（208）；
画布2.设置高度（360）；
画布2.设置宽度（208）；
changeView（1）；
var=20；
canvas1.on（'object:moving'，onObjectMoving）；
canvas2.on（'object:moving'，onObjectMoving）；
函数onObject移动（e）{
var obj=e.target；
//如果对象太大，请忽略
如果（obj.currentHeight>obj.canvas.height-填充*2||
obj.currentWidth>obj.canvas.width-填充*2）{
返回；
}
obj.setCoords（）；
//左上角
if（obj.getBoundingRect（）.topobj.canvas.height-填充||
obj.getBoundingRect（）.left+obj.getBoundingRect（）.width>obj.canvas.width-填充）{
obj.top=Math.min(
obj.top，
obj.canvas.height-obj.getBoundingRect（）.height+obj.top-obj.getBoundingRect（）.top-padding）；
obj.left=Math.min(
对象左，
obj.canvas.width-obj.getBoundingRect（）.width+obj.left-obj.getBoundingRect（）.left-padding）；
}
};
});
函数更改视图（值）{
如果（值==1）{
activeCanvas=canvas1；
$（'#front'）.parent（）.css（'display'，'block'）；
$（'#back'）.parent（）.css（'display'，'none'）；
}
如果（值==2）{
activeCanvas=canvas2；
$（'#front'）.parent（）.css（'display'，'none'）；
$（'#back'）.parent（）.css（'display'，'block'）；
}
}
函数dropText（）{
var text=new fabric.text（'test'）；
添加（文本）；
}
//键盘运动
常数步长=1；
变量方向={
左:0,，
上:1,，
右:2,，
下降：3
};
fabric.util.addListener（document.body，'keydown'，函数（选项）{
如果（选项。重复）{
返回；
}
var key=options.which | | options.keyCode；//密钥检测
如果（键===37）{//处理左键
选择移动（方向左）；
}如果（键===38）{//处理向上键
选择移动（方向向上）；
}如果（key==39）{//处理右键，则为else
选择移动（方向。右侧）；
}否则，如果（键===40）{//按下键
选择移动（方向向下）；
}
});
所选功能（方向）{
var activeObject=activeCanvas.getActiveObject（）；
var activeGroup=activeCanvas.getActiveGroup（）；
if（activeObject）{
开关（方向）{
case Direction.LEFT：
setLeft（activeObject.getLeft（）-STEP）；
打破
案例说明.UP：
setTop（activeObject.getTop（）-STEP）；
打破
case Direction.RIGHT：
setLeft（activeObject.getLeft（）+步骤）；
打破
case Direction.DOWN：
setTop（activeObject.getTop（）+步骤）；
打破
}
activeObject.setCoords（）；
activeCanvas.renderAll（）；
log（'所选对象已移动'）；
}else if（活动组）{
开关（方向）{
case Direction.LEFT：
setLeft（activeGroup.getLeft（）-STEP）；
打破
案例说明.UP：
setTop（activeGroup.getTop（）-STEP）；
打破
case Direction.RIGHT：
setLeft（activeGroup.getLeft（）+步骤）；
打破
case Direction.DOWN：
setTop（activeGroup.getTop（）+步骤）；
打破
}
activeGroup.setCoords（）；
activeCanvas.renderAll（）；
console.log（'所选组已移动'）；
}否则{
log（“未选择任何对象”）；
}
}

画布{
边框：1px实心#dddddd；
边缘顶部：10px；
边界半径：3px；
}

正面
返回
添加文本

您需要手动触发

对象：移动

事件

activeCanvas.trigger('object:moving', {
    target: activeObject
})

查看演示（也打开）：

var activeCanvas，前面，后面，canvas1，canvas2；
$（文档）.ready（函数（）{
canvas1=新织物。Canvas（'front'）；
canvas2=新织物。Canvas（'back'）；
画布1.设置高度（360）；
画布1.设置宽度（208）；
画布2.设置高度（360）；
画布2.设置宽度（208）；
changeView（1）；
var=20；
canvas1.on（'object:moving'，onObjectMoving）；
canvas2.on（'object:moving'，onObjectMoving）；
函数onObject移动（e）{
var obj=e.target；
//如果对象太大，请忽略
如果（obj.currentHeight>obj.canvas.height-填充*2||
obj.currentWidth>obj.canvas.width-填充*2）{
返回；
}
obj.setCoords（）；
//左上角
if（obj.getBoundingRect（）.topobj.canvas.height-填充||
obj.getBoundingRect（）.left+obj.getBoundingRect（）.width>obj.canvas.width-填充）{
obj.top=Math.min(
obj.top，
obj.canvas.height-obj.getBoundingRect（）.height+obj.top-obj.getBoundingRect（）.top-padding）；
obj.left=Math.min(
对象左，
obj.canvas.width-obj.getBoundingRect（）.width+obj.left-obj.getBoundingRect（）.left-padding）；
}
};
});
函数更改视图（值）{
如果（值==1）{