js 获取鼠标在画布的位置_Fabricjs - 如何在鼠标移动时检测画布？(Fabricjs - How to detect canvas on mouse move?)...

Mullainathan,

Here some quick solution using 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 += ''

}

//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;

}

}

});

Also, you can run fiddle