javascript - 使用 Pixi.js/html Canvas 绘制鼠标选择区域(橡皮筋)

Question

我有一个 pixi.js html Canvas ，上面有数千个对象，我希望用户能够使用通常的矩形选择区域来放大它。实现此目的的强力方法是在每次鼠标移动时绘制矩形并重新渲染整个舞台。但这似乎浪费了CPU。另外，这在用户界面中很常见，我怀疑 pixi.js 中已经有一些函数或插件可以解决这个问题。

如果没有插件:如果我可以在用户按下鼠标按钮时将整个缓冲区保存到第二个缓冲区，我可以在顶部绘制矩形，并且在每次鼠标移动时，将第二个缓冲区复制回主缓冲区绘制矩形之前的缓冲区。这意味着我不必在每次鼠标移动时重新绘制所有内容。但我不认为可以将当前缓冲区克隆到某个命名的辅助缓冲区。

另一种选择是将矩形 DOM 对象移动到 Canvas 顶部，但恐怕当前像素位置将很难与 pixi.js/html5 Canvas 像素相关联。

还有更好的办法吗？或者我缺少一些插件/搜索引擎关键字？如何在 html canvas 或 pixi.js 中实现橡皮筋？

Answer 1

我最终通过在 Canvas 上移动的单独 DOM 对象解决了这个问题。该解决方案还需要 PIXI 4 中的新交互管理器，它为 Canvas 上的任何鼠标移动提供单一回调。

在下面，我假设 Canvas 通过 CSS 放置在 canvasLeft 和 canvasTop 像素处。

   $(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 年 5 月，交互管理器得到扩展，可以更轻松地进行平移/缩放处理 https://github.com/pixijs/pixi.js/issues/1825这就是我在这里使用的。