2016-08-09 63 views
0

Ich habe einige Objekte in window.onload = function() {} auf der Leinwand, aber wenn ich die Maus über das Objekt bewegen, gibt es keinen Schwebeeffekt, wegen dem ich nicht in der Lage bin Wählen Sie die Objekte aus. Ich habe versucht object.setCoords, canvas.calcOffset, canvas.renderAll, aber ich kann nicht fortfahren. Unten ist mein Beispielcode,Maus über Objekt funktioniert nicht

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

} 

Antwort

0

nicht window.onload und $(document).ready zugleich anwenden. Sie sollten den Code von window.onload

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

verschieben Ich habe es versucht, aber es funktioniert nicht .. –