Fabricjs給元素新增滑鼠事件mouse:over/out
阿新 • • 發佈：2022-04-07
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../fabric.js"></script> </head> <body> <canvas id="c" width="600" height="600" style="border: 1px dotted #adadad;"> </canvas> <script> var canvas = this.__canvas = new fabric.Canvas('c') fabric.Object.prototype.transparentCorners = false canvas.on('mouse:over',function(e) {e.target.set('fill', 'red') //e.target獲取觸發事件的物件 canvas.renderAll() //重新渲染 必須的 所有對canvas的修改，包括在其中新增刪除物件，以及物件引數的修改，都需要呼叫渲染方法才能顯示出來 }) canvas.on('mouse:out', function(e) { e.target.set('fill', 'green'); canvas.renderAll(); }) for (var i = 10; i--;) { var dim =fabric.util.getRandomInt(30, 60); //30-60的隨機整數 var klass = ['Rect', 'Triangle', 'Circle'][fabric.util.getRandomInt(0, 2)]; //隨機生成矩形，三角形，圓形 var options = { top: fabric.util.getRandomInt(0, 600), left: fabric.util.getRandomInt(0, 600), fill: 'green' }; if (klass == 'Circle') { options.radius = dim } else { options.width = dim; options.height = dim; } canvas.add(new fabric[klass](options)) } </script> </body> </html>