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

Question

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

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

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

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

Answer 1

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

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