2

私は fabricjs を使用して angularjs で Web アプリを開発し、ブートストラップ ポップオーバーを使用して、ユーザーがキャンバス オブジェクト (椅子オブジェクトのあるテーブル) の上にいるときにカスタム メッセージを表示し、マウスがオブジェクト(テーブル) の外にあるときにそれを非表示にします。

問題は、マウスがオブジェクトの上に移動するたびにポップオーバーが表示されないことです。あるオブジェクトから別のオブジェクトにマウスをすばやく移動すると、ポップオーバーが表示されません。あるオブジェクトから別のオブジェクトにマウスを非常にゆっくりと移動する必要がありますポップオーバーが表示されるようにします。

ここに画像の説明を入力 以下は、ポップオーバーを作成して表示するメインのスニペットを示しています。

/マウス: オーバー イベントを作成し、ポップオーバー メッセージを表示します/

 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