Fabricjs - マウス移動でキャンバスを検出する方法は？

Question

私のfabricjsアプリケーションでは、私は動的なキャンバスを作成しました（変数も動的です）。ここでは、マウスをキャンバス上で動かしながら特定のキャンバスを検出する必要があります。 サンプルコード、この後

var i = 0, canvasArray = []; 
$(this).find('canvas').each(function() { 
    i++; 
    var DynamicCanvas = 'canvas_'+i; 
    canvasArray[DynamicCanvas] = new fabric.Canvas('canvas_'+i,{ 
     width : '200', 
     height : '200' 
    }); 
}); 

は、私は4つの異なるキャンバスを持っています。最後に追加したキャンバスが有効になりました。しかし、私は任意のキャンバスにオブジェクトを追加する必要があります。 マウス移動イベントを使用してキャンバスをアクティブ化する必要があります。どうすれば達成できますか？これで私を助けてください。

Answer 1

Mullainathan、ここで

のjQueryを使用していくつかの簡単な解決策：

var canvasStr = ''; 
var canvasArray = []; 
var fabricCanvasArray = []; 
var htmlStr = ''; 
var canvas = null; 

//generate canavases 
for (var i = 0; i < 4; i++){ 
      canvasArray.push('c' + i); 
      htmlStr += '<canvas id="c' + i + '" width="200" height="200"></canvas>' 
} 
//append canvasses to the body 
$('body').append(htmlStr); 

//to the fabricjs parent div elements assign id's and generate string for jQuery with div id's 
for (var i in canvasArray){ 
     fabricCanvasArray[i] = new fabric.Canvas(canvasArray[i], { 
    isDrawingMode: true 
     }); 

     $('#' + canvasArray[i]).parent().attr('id', ('div' + canvasArray[i])); 
    canvasStr += '#div' + canvasArray[i]; 
    if (i < canvasArray.length - 1){ 
      canvasStr += ','; 
    } 
} 

//jQuery event for mouse over each div element of the fabric canvas 
$(canvasStr).mouseover(function(){ 
    for (var i in fabricCanvasArray){ 
     if (fabricCanvasArray[i].lowerCanvasEl.id == $(this).children(':first').attr('id')){ 

     canvas = fabricCanvasArray[i]; 
     canvas.freeDrawingBrush.width = 10; 
     var r = 255 - i*50; 
     var g = i * 50; 
     var b = 200 - i * 40; 
     canvas.freeDrawingBrush.color = 'rgb(' + r + ',' + g + ',' + b + ')'; 
     canvas.on('mouse:up', function() { 
      //do your stuff 
     // canvas.renderAll(); 
     }); 
     break; 
    } 
    } 
}); 

また、あなたがfiddle

を実行することができます