用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

回答

相關問題