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

最新推荐文章于 2024-09-10 20:10:55 发布

原创

最新推荐文章于 2024-09-10 20:10:55 发布 · 1.1w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5

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

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

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

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

James clark

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Fabric.js 元素选中状态的事件与样式

weixin_39415598的博客

01-22

1518

theme: smartblue 本文简介带尬猴！你是否在使用 Fabric.js 时希望能在选中元素后自定义元素样式或选框(控制角和辅助线)的样式？如果是的话，可以放心往下读。本文将手把脚和你一起过一遍 Fabric.js 在对象元素选中后常用的样式设置。我将对象元素选中后的设置分成3类进行讲解：控制角辅助边其他样式状态准备工作创建一个画布和一...

Fabric.js 自定义选框样式

weixin_39415598的博客

09-11

2400

theme: smartblue 我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第9篇文章，点击查看活动详情本文简介点赞 + 关注 + 收藏 = 学会了框选是 fabric.js 默认提供的一种操作，fabric.js 提供了几个属性可以设置选框样式。 fabric.js 默认的选框样式如下图所示。本文主要介绍一下 fabric.js 提供的这几个 api ...

参与评论您还未登录，请先登录后发表或查看评论

【Fabric.js】监听画布or元素的点击、选中、移动、添加、删除销毁、变形等各事件

从今年开始写写博客~~

02-08

4622

例子就用vue项目组件里的代码，fabric的使用跟vue、react、angular之类的框架都没任何关系！代码中监听事件回调函数里的第一个参数，根据事件的不同，有目标图形信息、坐标信息等，自己一看就看得懂了，不讲解；在fabric使用过程中，如果想要玩各种花样，那么fabric的事件监听是一定、必须、肯定要掌握！并且本demo只对功能进行讲述，实际项目使用肯定要进行封装，别直接就照抄导致写的丑！代码只简单介绍一些常用的目标监听事件，更全面的、更多花样的玩法自行查阅官网即可~~

Fabric.js 触发自定义事件 canvas.fire()

weixin_41514525的博客

08-21

1239

Send，触发自定义事件 canvas.fire('custom:eventName', { any: 'payload' }); Receive，接收自定义事件 canvas.on({ 'custom:eventName': o => { // o: { any: 'payload' } }, })

利用fabric-ca生成区块链证书

10-25

本教程将详细介绍如何利用Fabric CA服务生成区块链证书，涵盖纯命令行操作以及编写脚本的方式。首先，Fabric CA是Hyperledger Fabric的身份管理系统，它负责注册和认证网络中的参与者，如节点、用户和组织。证书是...

Canvas扩展：利用Fabric绘制图形

一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

08-18

1260

Fabric.js 是一个灵活、高效的 JavaScript 库，它为开发者提供了丰富的图形绘制和编辑功能。该库建立在原生 Canvas API 之上，通过封装抽象出更易于使用的图形对象和操作接口，使得开发者可以轻松地创建复杂的图形应用。Fabric.js 允许开发者定义自定义图形类型，以便满足特定的需求。// 定义自定义图形类},});},i++) {});// 创建自定义图形], {});// 添加自定义图形到画布。

Hyperledger Fabric手动生成CA证书搭建Fabric网络-Raft.pdf

07-29

Hyperledger Fabric 手动生成 CA 证书搭建 Fabric 网络 - Raft 共识协议本文档总体架构采用多机部署环境，但为了简化操作，所有操作都在一台机器上进行。多机环境将在后续验证中进行介绍。 Fabric 网络的总体...

hyperledger fabric1.3.0用于生成证书等的文件

01-17

这些二进制文件用于辅助生成证书、密钥以及各项配置文件等。可以直接参考并按照官方的具体步骤执行，地址为...

fabric.ActiveSelection怎么使用

weixin_35755188的博客

01-13

796

Fabric.js 是一个用于在浏览器中创建 HTML5 canvas 应用程序的 JavaScript 库。ActiveSelection 是 Fabric.js 中的一个对象，用于管理一组选中的对象。使用 ActiveSelection 的基本方法是: 创建一个新的 ActiveSelection 对象，并将需要选中的对象作为参数传递给它。 var activeSelection = n...

Fabric.js 元素被选中时保持原有层级

weixin_39415598的博客

06-08

649

theme: smartblue 持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情本文简介点赞 + 关注 + 收藏 = 学会了不知道你在使用 Fabric.js 时有没有发现，如果一个画布存在多个元素，而且它们之前是层叠的，当你选中底层的元素时，那个元素会跳到最顶层；当你释放该元素后，它又跑回原有层级。这是 Fabric.js 的默认...

使用Fabric自动化你的任务

weixin_33719619的博客

03-05

288

fabric是什么？ Fabric是一个Python库，可以通过SSH在多个host上批量执行任务。你可以编写任务脚本，然后通过Fabric在本地就可以使用SSH在大量远程服务器上自动运行。这些功能非常适合应用的自动化部署，或者执行系统管理任务。让我们首先看一个例子。我们知道在*NIX下面，uname命令是查看系统的发行版。可以写这样一个Fabric脚本： from fabric.api ...

Fabric.js部分事件及api

XinYiMiao__优快云的博客

03-21

1556

fabicjs

4、Fabric.js 常用的方法&事件

beauty_600的博客

03-20

5909

下面只是我用到的一些基本事件和方法，当做笔记记录下来…

fabricjs 删除object对象

看风听雨

12-09

1万+

fabricjs 对于学习过fabric的人来说，对于canvas的操作，算是相当简化了，一些基础的操作我在这里就不多少了，网上有很多介绍，而且官网也是很详细的。下面我说一下删除fabricjs中canvas的对象。对于删除canvas 中的对象，fabricjs也提供了一个方法，remove()，可以移除指定对象。但是，有一个小小的问题，我们在什么情境下或者什么条件下，执行移除操作

fabricjs文档阅读(二)

gdutRex的博客

08-02

3597

Part 2 动画我们通过set方法就可以快速的修改canvas上的图形的属性。但是，往往我们在开发网站的时候除了完成功能需求之外，也需要提高网页的美观。所以动画是一个必不可少的功能。举个例子： rect.set('angle', 45); 给这个变化属性添加动画非常简单，因为每一个图形对象都有一个animate的方法，只需要传入相应的参数即可 rect.animate('angle', 4...

fabric.js 中文教程第一部分