Javascript 加上一句「；“出血区域”；和fabricjs一起拉票？

我正在使用fabricjs（1.7.20），并希望创建一种“出血区域”，其中画布周围的一些空间用户无法使用；一种“墙”，如果你愿意的话，用来阻止物体移动到画布墙的侧面。我如何才能做到这一点

var canvas=newfabric.canvas（“c”）；
画布设置高度（350）；
画布设置宽度（350）；
canvas.add（newfabric.IText（“一些文本”）{
前25名，
}));
var circle=新结构。circle({
半径：20，填充：“绿色”，左侧：100，顶部：100
});
var三角形=新结构。三角形({
宽度：20，高度：30，填充：“蓝色”，左侧：150，顶部：150
});
画布。添加（圆形、三角形）
画布{
边框：1px实心#dddddd；
边缘顶部：10px；
边界半径：3px；
}
您可以添加一个10像素的出血区域，方法是从确定对象是否正在移出“出血”区域的条件中加/减值10（我实际上更愿意称之为“填充”），并从将对象重新定位在填充边界内的计算中加/减

下面是一个更新的示例：


var padding=10；
var canvas=新织物画布（“c”）；
画布设置高度（350）；
画布设置宽度（350）；
canvas.add（newfabric.IText（“一些文本”）{
前25名，
}));
var circle=新结构。circle({
半径：20，
填充：“绿色”，
左:100,，
排名：100
});
var三角形=新结构。三角形({
宽度：20，
身高：30，
填充：“蓝色”，
左：150，
顶部：150
});
画布。添加（圆形、三角形）；
canvas.on（'object:moving'，function（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-padding ||
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）；
}
});
画布{
边框：1px实心#dddddd；
边缘顶部：10px；
边界半径：3px；
}

可能与我签出的相同。有了它，我可以在画布外的物体上加顶，但我想知道如何，更具体地说，使它们远离画布10像素。漂亮。非常感谢。这是正确的，我会尽快奖励赏金（21小时）。在这种情况下，限制在画布上画画会不会有点粗糙，比如说在画布的下半部分画10个像素（换句话说，可能是330*116px*的盒子？如果需要的话，我可以问另一个问题！干杯！很乐意帮助