##
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/fabric.1.7.22.js"></script> <script src="js/jquery-1.9.1.min.js"></script> </head> <body> <canvas id="c" width="500" height="500"></canvas> <button id="discard">Group定位</button> <script> var canvas = new fabric.Canvas('c'); var h = 50; var w = 100; var body = new fabric.Rect({ w, height: h, fill: '#f55', top: 15, left: 50 }); var port = new fabric.Rect({ 20, height: 30, fill: 'yellow', top: 15, left: 50 + w - 10 }); var group = new fabric.Group([body, port], { hasControls: false, hasBorders: false }); group.top = 100; group.left = 250; canvas.add(group); group.on('mousemove', function (e) { var innerTarget = group._searchPossibleTargets(e.e); console.log(innerTarget); }); group._searchPossibleTargets = function (e) { var pointer = this.canvas.getPointer(e, true); var i = 2,//简化:示例为两个对象 normalizedPointer = this.canvas._normalizePointer(this, pointer); while (i--) { if (this.canvas._checkTarget(normalizedPointer, this._objects[i])) { return this._objects[i]; } } return null; } </script> </body> </html>