fabric选中图形，生成列表联动

原创

于 2021-10-08 10:49:44 发布 · 1.1w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5

本文介绍了如何利用Fabric.js这个canvas库，实现图形选中后与右侧列表的联动效果。在尝试使用fabric的deprecated事件object:selected未果后，作者通过监听鼠标点击事件并获取图形id来达到交互目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

fabric是canvas一个好用开源插件
在做ps会有联动效果，canvas画布点击了图形，右侧生成图形会跟着被选中
刚开始想到fabric自带的事件object:selected（对象选中）（这个方法v2已经废弃），使用selection:created替代，多次不触发，跟我们需求的不一样，我们需要多次一直交互
结果找来找去没找到，结果想起这不就是鼠标点击事件，判断拿到值就可以哈，害，汗颜！！

"mouse:down": (e) => {
   
   
          if (
            this.ableEdit &&this.fabricObj.selectable
             && <

最低0.47元/天解锁文章

200万优质内容无限畅学