鼠标悬停在对象上不起作用

Question

我在 window.onload=function(){} 中添加了一些对象到画布，但是当我将鼠标移到对象上时，没有悬停效果，因此我无法选择对象。我试过了object.setCoords、canvas.calcOffset、canvas.renderAll，但我仍然无法继续。下面是我的示例代码，

window.onload = function(){
setbackgroundImage();
drawExistingShapes();
}
$(document).ready(function() {
var canvas = new fabric.Canvas('canvas');
document.getElementById("canvas").fabric = canvas;
}
function setbackgroundImage(){
var canvas = document.getElementById("canvas").fabric;
canvas.setBackgroundImage('file:///D:/New folder/Images/roi_image.png', canvas.renderAll.bind(canvas), {
  width: canvas.width,
  height: canvas.height,
  backgroundColor:'white',
  originX: 'left',
  originY: 'top'
});
}
function drawExistingShapes(){
var canvas = document.getElementById("canvas").fabric;
var points= [{"x":306,"y":136.98076211353316},{"x":261,"y":162.96152422706632},{"x":261,"y":111}];
var shape= new fabric.Polygon(points, {
        fill: "transparent",
        strokeWidth: 0.75,
        stroke: 'rgb(255,0,0)',
        borderColor: 'red',
        cornerColor: 'green',
        cornerSize: 6,
        transparentCorners: false
      });
      shape.setCoords();
      canvas.add(shape);
      canvas.renderAll();
      canvas.calcOffset();

 }

Answer 1

不要同时使用window.onload 和$(document).ready。你应该把代码从window.onload移走

$(document).ready(function() {
    var canvas = new fabric.Canvas('canvas');
    document.getElementById("canvas").fabric = canvas;
    setbackgroundImage();
    drawExistingShapes();
});