一,事件绑定的语法
const canvas = new fabric.Canvas("canvas");
canvas.setBackgroundColor("rgb(100,200,200)");
//矩形
const rect = new fabric.Rect({
left: 0,
top: 0,
width: 200,
height: 200,
fill: 'pink',
});
canvas.on("mouse:down", (options) => {
console.log(options.e.clientX, options.e.clientY);
if (options.target) {
//点击到图像对象上时
console.log("an object was clicked!", options.target);
}
});
canvas.add(rect)
也就是说事件绑定是通过如下的语法进行绑定的:
obj.on("事件名",(options)=>{
//事件回调函数,options是接受到的参数
})
二,相关事件
事件的绑定,要区分是绑定在canvas画布上,还是画布上的图像对象上。
1,对于canvas画布,可以绑定的事件是:
和鼠标相关的事件有:
“mouse:down”,“ mouse:move”和“ mouse:up”,"mouse:over"
"mouse:out"
渲染完毕的生命周期事件:
“after:render”
选择相关事件:
“selection:created”:框选激活图像元素时触发
“before:selection:cleared”:取消选择的上一刻触发
“selection:cleared”:取消选择后触发
const canvas = new fabric.Canvas("canvas");
canvas.setBackgroundColor("rgb(100,200,200)");
//矩形
const rect = new fabric.Rect({
left: 0,
top: 0,
width: 200,
height: 200,
fill: 'pink',
});
canvas.on("mouse:move", (options) => {
console.log(options);
});
canvas.add(rect)
2,对于图像对象可以绑定的事件:
“modified”:修改时触发
“selected”:选中时触发
“moving”:移动时触发
“scaling”:缩放时触发
“rotating”:旋转时触发
“added”:添加对象时触发
“removed”:移除对象时触发
例如:
const canvas = new fabric.Canvas("canvas");
canvas.setBackgroundColor("rgb(100,200,200)");
//矩形
const rect = new fabric.Rect({
left: 0,
top: 0,
width: 200,
height: 200,
fill: 'pink',
});
rect.on("selected", (options) => {
console.log(options);
});
canvas.add(rect)
三,某对象鼠标hover事件
对于某对象鼠标划过,让它颜色变大一些的动画效果怎么写呢?
const canvas = new fabric.Canvas("canvas");
canvas.setBackgroundColor("rgb(100,200,200)");
//矩形
const rect = new fabric.Rect({
left: 200,
top: 200,
width: 50,
height: 50,
originX: 'center',//调整中心点的X轴坐标
originY: 'center',//调整中心点的Y轴坐标
fill: 'pink',
});
//动画函数
function animation(){
rect.animate(
"scaleX",
rect.scaleX==2?1:2,
{
onChange:canvas.renderAll.bind(canvas),
duration:200
}
)
}
//鼠标划入的事件对象上是没有的,但是画布有
canvas.on("mouse:over", (options) => {
if(options.target){
animation()
}
});
canvas.on("mouse:out", (options) => {
if(options.target){
animation()
}
});
canvas.add(rect)
实现的效果: