fabric操作canvas绘图-（四）事件绑定

一，事件绑定的语法

 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) 

实现的效果：

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/rfx/10953.html