Group精确定位(canvas定位)

##

<!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>
原文地址:https://www.cnblogs.com/tinaluo/p/8621606.html