Отображение настраиваемого контекстного меню при нажатии на фигуры (объекты fabric.js) в Canvas

Я использую Fabric.js для создания фигур на холсте. при щелчке правой кнопкой мыши по фигурам я хочу показать контекстное меню на основе выбранной формы. Я могу зафиксировать событие щелчка правой кнопкой мыши и найти, какой объект щелкнул правой кнопкой мыши. но я не знаю, как показать контекстное меню из javascript (что-то вроде contextmenu.show). ниже приведен код, который я использую для поиска объекта. Кто-нибудь, пожалуйста, помогите.

$('.upper-canvas').bind('contextmenu', function (e) {
    var objectFound = false;
    var clickPoint = new fabric.Point(e.offsetX, e.offsetY);

    e.preventDefault();

    canvas.forEachObject(function (obj) {
        if (!objectFound && obj.containsPoint(clickPoint)) {
            objectFound = true;
             // here need to set a customized context menu and show it
             // but dont now how to do so. 
        }
    });
});

javascript jquery html5-canvas fabricjs jquery-ui-contextmenu
person Mohamed Uvais M    schedule 05.08.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Используя jquery-ui-contextmenu, вы можете создать контекстное меню на холсте и изменить меню. записи в зависимости от цели.

(Обратите внимание, что код не тестировался, но он должен показать идею. Взгляните на API документы для получения подробной информации.)

$(document).contextmenu({
    delegate: ".upper-canvas",
    menu: [...],  // default menu
    beforeOpen: function (event, ui) {
        var clickPoint = new fabric.Point(event.offsetX, event.offsetY);
        // find the clicked object and re-define the menu or
        // optionally return false, to prevent opening the menu:
//      return false;
        // En/disable single entries:
        $(document).contextmenu("enableEntry", ...);
        // Show/hide single entries:
        $(document).contextmenu("showEntry", ...);
        // Redefine the whole menu:
        $(document).contextmenu("replaceMenu", ...); 
    },
    select: function(event, ui) {
        // evaluate selected entry...
    }
});
person mar10    schedule 05.08.2016
comment
при использовании этого контекстного меню для диалога (тег диалога HTML5) контекстное меню располагается за диалоговым окном. то есть отображается контекстное меню, а поверх него отображается диалоговое окно. - person Mohamed Uvais M; 19.10.2016