Question

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

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

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

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

Answer 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，这就是我在这里使用的。

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

1 个答案: