Canvas 与画布对象接触时画布边框颜色发生变化

我试图在画布上打印带有边框的设计，如果画布对象被缩放或调整为超出边框，画布边框颜色应更改为红色或显示一些消息

---

如果画布对象接触或穿过画布的边框，如何更改边框颜色。

请参见官方网站上的示例：-可以使用

intersectsWithObject（）

函数检测碰撞

对于您的问题，只需检查此小提琴：

canvas.on（'object:moving'，函数（e）{
var obj=e.target；
obj.setCoords（）；
canvas.forEachObject（函数（targ）{
activeObject=canvas.getActiveObject（）；
if（target==activeObject）返回；
if（Math.abs（activeObject.oCoords.tr.x-target.oCoords.tl.x）

我知道这是一个老问题，但我恰好正在解决同一个问题（只是改变颜色），我就是这么做的，希望它能帮助其他人解决同样的问题

由于某种原因，fiddle无法使用jquery，因此这是一个快速的尝试

var canvas = new fabric.Canvas('demo');



canvas.setWidth(600);
canvas.setHeight(500);

canvas.on({
      'object:moving':boundingBox,
      'object:scaling':boundingBox,
      'object:rotating':boundingBox,
    });

function boundingBox(bbox){
    // detecting sides of the canvas
    if(bbox.target.getWidth() + bbox.target.left > canvas.width
       || bbox.target.getHeight() + bbox.target.top > canvas.height 
       || bbox.target.top < 0 
       || bbox.target.left < 0){
        //$('#demo').css('box-shadow', '0 0 20px red');
        var cd = document.getElementById('demo');
        var cdStyle = cd.style;
        cdStyle.backgroundColor = 'red';
    } else {
        //$('#demo').css('box-shadow'. '0 0 20px #a8a8a8');
        var cd = document.getElementById('demo');
        var cdStyle = cd.style;
        cdStyle.backgroundColor = 'white';
    }
}



var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'blue',
  width: 50,
  height: 50
});

var circle = new fabric.Circle({
  radius: 95, 
  fill: 'green', 
  left: 175, 
  top: 200
});

canvas.add(rect);
canvas.add(circle);

var canvas=newfabric.canvas（'demo'）；
画布设置宽度（600）；
画布设置高度（500）；
帆布({
“对象：移动”：边界框，
“对象：缩放”：边界框，
“对象：旋转”：边界框，
});
函数边界框（bbox）{
//检测画布的侧面
如果（bbox.target.getWidth（）+bbox.target.left>canvas.width
||bbox.target.getHeight（）+bbox.target.top>canvas.height
||bbox.target.top<0
||bbox.target.left<0）{
//$（'#demo'）.css（'box-shadow'，'020px-red'）；
var cd=document.getElementById（'demo'）；
var cdStyle=cd.style；
cdStyle.backgroundColor='红色'；
}否则{
//$（'demo'）.css（'box-shadow''020px'a8a8a8'）；
var cd=document.getElementById（'demo'）；
var cdStyle=cd.style；
cdStyle.backgroundColor='白色'；
}
}
var rect=new fabric.rect({
左:100,，
前100名，
填充：“蓝色”，
宽度：50，
身高：50
});
var circle=新结构。circle({
半径：95，
填充：“绿色”，
左：175，
排名：200
});
canvas.add（rect）；
canvas.add（圆圈）；

---

我希望有人会觉得这很有用

我只是想改变画布的边界，而不是两个物体的碰撞，不是两个物体的碰撞..有人能回答吗

var canvas = new fabric.Canvas('demo');



canvas.setWidth(600);
canvas.setHeight(500);

canvas.on({
      'object:moving':boundingBox,
      'object:scaling':boundingBox,
      'object:rotating':boundingBox,
    });

function boundingBox(bbox){
    // detecting sides of the canvas
    if(bbox.target.getWidth() + bbox.target.left > canvas.width
       || bbox.target.getHeight() + bbox.target.top > canvas.height 
       || bbox.target.top < 0 
       || bbox.target.left < 0){
        //$('#demo').css('box-shadow', '0 0 20px red');
        var cd = document.getElementById('demo');
        var cdStyle = cd.style;
        cdStyle.backgroundColor = 'red';
    } else {
        //$('#demo').css('box-shadow'. '0 0 20px #a8a8a8');
        var cd = document.getElementById('demo');
        var cdStyle = cd.style;
        cdStyle.backgroundColor = 'white';
    }
}



var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'blue',
  width: 50,
  height: 50
});

var circle = new fabric.Circle({
  radius: 95, 
  fill: 'green', 
  left: 175, 
  top: 200
});

canvas.add(rect);
canvas.add(circle);