Fabricjs

Question

在我的 fabricjs 应用程序中，我创建了动态 canvases（变量也是动态的）。在这里，当鼠标在 canvas 上移动时，我需要检测特定的 canvas。示例代码，

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 个不同的 canvases。最后添加 canvas 已激活。但我需要在任何 canvas 上添加对象。所以我必须使用鼠标移动事件激活 canvas。我怎样才能实现它。？请帮我解决这个问题。

Answer 1

穆莱纳森,

这里有一些使用 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

Fabricjs - 如何在鼠标移动时检测 canvas？

Fabricjs - How to detect canvas on mouse move?

html

javascript

html5-canvas