Область рисования мыши (резиновая лента) с Pixi.js/html Canvas

Question

У меня есть html-холст pixi.js с тысячами объектов на нем, и я хочу, чтобы пользователь мог увеличить его с помощью обычной прямоугольной области выделения , Метод грубой силы для реализации этого будет заключаться в том, чтобы нарисовать прямоугольник на каждом перемещении мыши и перегрузить весь этап. Но это кажется пустой тратой процессора. Плюс это так часто встречается в пользовательских интерфейсах, что я подозреваю, что в pixi.js уже есть какая-то функция или плагин, который решает это.

Если плагин отсутствует: если бы я мог сохранить весь буфер до второго буфера, когда пользователь нажимает кнопку мыши, я могу нарисовать прямоугольник сверху и на каждом перемещении мыши скопировать второй буфер на первичный буфер перед рисованием прямоугольника. Это означало бы, что мне не пришлось перерисовывать все при каждом движении мыши. Но я не думаю, что можно клонировать текущий буфер для некоторого именованного вторичного буфера.

Другой альтернативой было бы перемещение прямоугольного объекта DOM поверх холста, но я боюсь, что текущее положение пикселя будет трудно связать с пиксельными пикселями pixi.js/html5.

Есть ли лучший способ? Или какое-то ключевое слово для плагина/поисковой системы, которое мне не хватает? Как реализовать резиновую ленту в html-холсте или pixi.js?

Answer 1

Я решил решить это с помощью отдельного объекта DOM, который перемещается по холсту. Решение также требует нового менеджера взаимодействия в PIXI 4, который предлагает один обратный вызов для любого движения мыши над холстом.

В следующем примере я предполагаю, что холст помещается в canvasLeft и canvasTop пикселей с CSS.

$(document.body).append("<div style='position:absolute; display:none; border: 1px solid black' id='tpSelectBox'></div>"); 

    renderer = new PIXI.CanvasRenderer(0, 0, opt); 

    // setup the mouse zooming callbacks 
    renderer.plugins.interaction.on('mousedown', function(ev) { 
     mouseDownX = ev.data.global.x; 
     mouseDownY = ev.data.global.y;                         $("#tpSelectBox").css({left:mouseDownX+canvasLeft, top:mouseDownY+canvasTop}).show(); 
    }); 

    renderer.plugins.interaction.on('mousemove', function(ev) { 
     if (mouseDownX == null) 
      return; 
     var x = ev.data.global.x; 
     var y = ev.data.global.y; 
     var selectWidth = Math.abs(x - mouseDownX); 
     var selectHeight = Math.abs(y - mouseDownY); 
     var minX = Math.min(ev.data.global.x, mouseDownX); 
     var minY = Math.min(ev.data.global.y, mouseDownY); 
     var posCss = { 
      "left":minX+canvasLeft, 
      "top":minY+canvasTop, 
      "width":selectWidth, 
      "height":selectHeight 
     }; 
     $("#tpSelectBox").css(posCss); 
    }); 

    renderer.plugins.interaction.on('mouseup', function(ev) { 
     $("#tpSelectBox").hide(); 
     mouseDownX = null; 
     mouseDownY = null; 
     $("#tpSelectBox").css({"width":0, "height":0}); 
    }); 

Для старой версии PIXI, вот пример панорамирования/масштабирования без прямоугольника https://github.com/Arduinology/Pixi-Pan-and-Zoom/blob/master/js/functions.js В мае 2015 года, взаимодействие менеджер расширилась, чтобы позволить обработку https://github.com/pixijs/pixi.js/issues/1825 легче панорамирования/масштабирования, который является то, что я используя здесь.