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();
});

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

1 个答案: