Pixi.js/htmlキャンバスでマウスの選択領域（ラバーバンド）を描く

Question

何千ものオブジェクトを持つpixi.js htmlキャンバスがあります。通常の四角形の選択領域でズームすることができます。これを実装するための強力な方法は、各マウスの移動に長方形を描画し、ステージ全体を再レンダリングすることです。しかし、これはCPUの浪費のようです。さらに、これはユーザーインターフェイスではよくあることですが、pixi.jsやこれを解決するプラグインにはすでにいくつかの機能があると思われます。

プラグインがない場合：ユーザーがマウスボタンを押したときにバッファ全体をいくつかの2番目のバッファに保存できたら、上に矩形を描画し、マウスを移動するたびに2番目のバッファを矩形を描画する前に一次バッファ。これは、すべてのマウスの移動ですべてを再描画する必要がなかったことを意味します。しかし、私は、現在のバッファをいくつかの名前付き二次バッファにクローンすることはできないと思います。

もう一つの選択肢は、キャンバスの上に長方形のDOMオブジェクトを移動することですが、現在のピクセル位置がpixi.js/html5キャンバスピクセルに関連づけられないことは恐れられます。

良い方法がありますか？または、プラグイン/検索エンジンのキーワードが不足していますか？ htmlキャンバスやpixi.jsでラバーバンドをどのように実装しますか？

Answer 1

私はキャンバス上を移動する別のDOMオブジェクトでこれを解決しました。このソリューションには、PIXI 4の新しいインタラクションマネージャも必要です。これは、キャンバス上でのマウスの動きに対して単一のコールバックを提供します。

ここでは、キャンバスがcanvasLeftに配置され、canvasTopピクセルがCSSで配置されていると仮定します。 PIXIの古いバージョンのために

$(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}); 
    }); 

、ここでは2015年5月には、長方形 https://github.com/Arduinology/Pixi-Pan-and-Zoom/blob/master/js/functions.js なしパン/ズームの一例であり、対話マネージャは、私は何をしているより簡単にパン/ズーム取り扱いhttps://github.com/pixijs/pixi.js/issues/1825を許可するように拡張しましたここで使用します。