Question

我使用fabricjs在angularjs上开发一个web应用程序，当用户超过画布对象（带有chair对象的表）时，我使用bootstrap popover显示自定义消息，并在鼠标时隐藏它 out 对象（表格）。

问题在于，每次鼠标越过一个对象时都不显示弹出窗口，如果我将鼠标从一个对象快速移动到另一个对象，则没有显示弹出窗口，我必须将鼠标从一个对象移动到另一个对象非常缓慢，以便弹出窗口显示。

下面是显示我创建和显示popover的主要代码段：

鼠标上的

/ ：over event我创建并显示弹出消息 /

 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
                }


            });

        }

    });

/ *我销毁了popover * /

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

任何帮助将不胜感激。

每次都不显示带有自定义模板的bootstrap popover

0 个答案: