[英]Fabricjs - How to detect canvas on mouse move?
In my fabricjs application, I had created dynamic canvases(variable's also dynamic). 在我的fabricjs应用程序中,我创建了动态画布(变量也是动态的)。 Here, I need to detect particular canvas while mouse move on canvas. 在这里,我需要在鼠标在画布上移动时检测特定的画布。 Sample code, 示例代码
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'
});
});
after this, I have 4 different canvases. 之后,我有4个不同的画布。 Last added canvas has been activated. 最后添加的画布已激活。 But i need to add object on any canvas. 但是我需要在任何画布上添加对象。 So that i have to activate canvas using mouse move event. 这样我就必须使用鼠标移动事件来激活画布。 How can i achieve it.? 我该如何实现? Please help me on this. 请帮我。
Mullainathan, Mullainathan,
Here some quick solution using jQuery: 这里是一些使用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;
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.