用 Pixi.js / html Canvas 绘制鼠标选择区域（橡皮筋）答案

【问题标题】：Drawing mouse selection area (rubber band) with Pixi.js / html Canvas用 Pixi.js / html Canvas 绘制鼠标选择区域（橡皮筋）
【发布时间】：2017-05-22 13:46:48
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript html5-canvas pixi.js

【解决方案1】：

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

在下文中，我假设使用 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，这就是我在这里使用的。

【讨论】：