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

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

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

另一种方法是移动的矩形DOM对象在画布上的顶部，但随后恐怕当前像素位置将很难涉及pixi.js/HTML5画布像素。

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

来源

2017-01-08 Max

我最终解决了这个问题，使用一个单独的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年5月，交互管理器得到了扩展，允许更容易的平移/缩放处理https://github.com/pixijs/pixi.js/issues/1825平移/缩放的例子是什么我在这里使用。

来源

2017-01-10 12:23:23 Max

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

回答

相关问题