鼠标悬停在对象上无效

I have added some objects inside window.onload=function(){} to the canvas but when i move the mouse over the object , there is no hovering effect because of which i am not able to select the objects.I tried object.setCoords, canvas.calcOffset, canvas.renderAll, but still i am not able to proceed. Below is my sample code,

我在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();

 }

1 个解决方案

#1

Don't use window.onload and $(document).ready at the same time. You should move the code from window.onload

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

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