2

我使用fabricjs在angularjs上开发了一个网络应用程序，当用户在画布对象（带有椅子对象的桌子）上时，我使用引导弹出框显示自定义消息，并在鼠标离开对象（桌子）时隐藏它。

问题是，每次鼠标移过一个对象时，弹出框都不会显示，如果我将鼠标从一个对象快速移动到另一个对象，则不会显示弹出框，我必须将鼠标从一个对象移动到另一个对象时非常缓慢为了显示弹出窗口。

在此处输入图像描述 下面显示了我创建并显示弹出框的主要片段：

/在鼠标上：over 事件我创建并显示弹出消息/

 canvas.on('mouse:over', function (e) {
            console.log("mouse over object");

        var table = e.target;
        $scope.tablePosition.top = table.top;
        $scope.tablePosition.left = table.left;
        $scope.tablePosition.width = table.width;
        $scope.tablePosition.height = table.height;

        var activeTab = $('.nav-tabs').find('li[class=active]').children().attr('id');

        if ((table.typeTable != 'theatre') && (activeTab == 'tab2')) {
            console.log(table.typeTable + ":" + activeTab);
            var last = table.getObjects().length;
            var name = table._objects[last - 1]._objects[1].text;
            var num = table._objects[last - 1]._objects[0].text;
            var title = '';

            $('canvas').popover({
                content: content(table, $scope.participants),
                template: popoverTemplate,
                placement: 'top',
                title: title = name != '' ? name : 'Table ' + num,
                html: true
            });

            $('canvas').popover('show');

            $('canvas').on('shown.bs.popover', function () {

                console.log('before popover show');
                if ($scope.tablePosition.left < 200) {
                    $('.popTableInfo').css('left', ($scope.tablePosition.left + ($scope.tablePosition.width / 2) + 280) + 'px');//right of the table
                }
                else {
                    $('.popTableInfo').css('left', ($scope.tablePosition.left - ($scope.tablePosition.width / 2)) + 'px');//left of the table
                }

                if ((canvas.height - $scope.tablePosition.top) < 100) {
                    $('.popTableInfo').css('top', (canvas.height - $('.popover.popTableInfo').height() / 2) + 'px'); //above table
                }
                else {
                    $('.popTableInfo').css('top', ($scope.tablePosition.top + 100) + 'px'); //normal
                }


            });

        }

    });

/*我销毁弹出框*/

canvas.on('mouse:out', function (e) {
        $('canvas').popover('destroy');
    });

任何帮助将不胜感激。

4

0 回答 0