fablic 矩形多边形展示删除按钮

请添加图片描述
标注的矩形框或者多边形框展示删除按钮;
官网有一个例子
我原本想着按照他这个思路,很简单的;
可是当我在使用的过程中,遇到了一些问题,多变想不展示删除按钮;并且如果之前有矩形,无法渲然删除按钮,只有新增加的可以有删除按钮;所以我就换了一种方案:使用文本;
需求:鼠标滑入图形的时候展示删除按钮;滑走的时候隐藏删除按钮;
props.showDeleteControl 字段代表是否展示删除按钮;

drawText方法如下:

// 文本
const drawText = (text: string, shape: any, textOthers?: OthersConfigModel) => {
  return new fabric.Text(text, {
    type: DrawType.Text,
    left: shape.left + shape.width,
    // top: shape.top + ((textOthers && textOthers.topToRect) ?? -20),
    top: shape.top - 20,
    selectable: false,
    fill: 'red',
    ...textOthers
  });
};
// 添加删除按钮
const addDeleteControl = (object: any) => {
  if (props.showDeleteControl) {
    // 创建删除按钮对象
    const deleteBtn = drawText('X', object, {
      // 有shapeId 待表是之前的 默认隐藏删除按钮; 如果是新画的 则默认显示删除按钮
      visible: object.shapeId ? false : true
    });

    // 添加鼠标进入事件处理程序
    object.on('mouseover', function () {
      // 隐藏其他的删除按钮
      hiddenDeleteControl();
      canvas.value.setActiveObject(object); // 设置为当前活跃
      deleteBtn.visible = true;
      canvas.value.renderAll();
    });
    object.on('mousemove', function () {
      deleteBtn.set({
        left: object.left + object.width,
        top: object.top - 20
      });
      // 手动更新删除按钮的选中位置  !!!!非常重要
      deleteBtn.setCoords();
    });
    // 添加点击事件处理程序
    deleteBtn.on('mousedown', function () {
      console.log('mousedown');
    });
    canvas.value?.add(deleteBtn);
  }
};

过程中遇到的一个问题是:我移动了矩形,但是删除按钮不可选中,起初认为是不可选中,最后才知道是选中位置没更新!!!所以需要手动更新删除按钮的选中位置;

deleteBtn.setCoords();

上面的思路主要是 每个图形附近增加一个删除按钮;虽然你页面上看到的图形只有1个。但是canvas中渲染的有两个;

也可以通过图片来替代删除文本

// 创建删除按钮图标
    fabric.Image.fromURL(deleteIcon, deleteBtn => {
      deleteBtn.set({
        left: object.left + object.width - 20,
        top: object.top - 50,
        selectable: false,
        visible: false,
        hasControls: false, // 隐藏控制点
        hasBorders: false // 隐藏边框
      });
      // 缩放图片到指定宽度
      deleteBtn.scaleToWidth(30);
      // 添加点击事件处理程序
      deleteBtn.on('mousedown', function () {
        console.log('mousedown');
      });
      canvas.value.add(deleteBtn);
      // // 添加鼠标进入事件处理程序
      object.on('mouseover', () => {
        // 隐藏其他的删除按钮
        hiddenDeleteControl();
        canvas.value.setActiveObject(object); // 设置为当前活跃
        deleteBtn.visible = true;
        canvas.value.renderAll();
      });
      object.on('mousemove', () => {
        deleteBtn.set({
          left: object.left + object.width,
          top: object.top - 20
        });
        // 手动更新删除按钮的选中位置  !!!!非常重要
        deleteBtn.setCoords();
      });
    });

但这种方式更会增加图形的渲染, 1个图形会多渲染2个图形;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/153691.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

拿走吧你,Fiddler模拟请求发送和修改响应数据

fiddler模拟伪造请求 方法一:打断点模拟HTTP请求 1、浏览器页面填好内容后(不要操作提交),打开fiddler,设置请求前断点,点击菜单fiddler,”Rules”\”Automatic Breakpoints”\”Before Requests” 2、在…

问题总结(持续更新)

Linux 1.虚拟机问题 打开虚拟机所在目录对 后缀 .vmx文件进行修改 vmcio.present"FALSE" 改为FALSE即可 2.因某些问题导致本来正常的虚拟机没有网络了 重新配置网络 vim /etc/sysconfig/network-scripts/ifcfg-enstab补全 service network restart 重启网络 Sentina…

海外推广必备|如何制定领英LinkedIn营销战略?

在网络上脱颖而出不是一件简单的事。不仅有比以往更多的平台、算法和内容类型,而且还有更多的企业在争夺注意力。据统计,每天有超过 270 万家公司在 LinkedIn 上发布信息。 策略很重要,尤其是在 LinkedIn 营销领域。下面将为你总结LinkedIn 营…

操作系统OS/进程与线程/线程

进程和线程 进程 进程实体(进程映像)由PCB、程序段和数据段组成,其中PCB是进程存在的唯一标志。 线程 线程最直接的理解就是“轻量级进程”,它是一个基本的CPU执行单元,包含CPU现场(状态),也是程序执行…

uniapp Android如何打开常用系统设置页面?

uniapp Android 如何打开常用系统设置页面? 在使用App过程时,有时候会对一些权限获取,比如打开蓝牙、打开通知栏通知等设置,我们如何快速跳转到需要的设置页面? 文章目录 uniapp Android 如何打开常用系统设置页面&…

500mA 线性锂电充电芯片 DP4054/DP4054H完全兼容替代TP4054

锂电池是一种新型的可充电电池,其具有体积小、重量轻、容量大耐用性强等特点,因此被广泛应用于手机、笔记本电脑、移动电源等电了设备上。 充电原理是指电池在充电过程中,用电流将锂离子从外部电源输入电池,使其形成 一个电荷差&…

【LeetCode刷题-滑动窗口】--424.替换后的最长重复字符

424.替换后的最长重复字符 方法:滑动窗口 右边界先移动找到一个满足题意的可以替换k个字符以后,所有字符都变成一样的当前看来最小的子串,直到右边界纳入一个字符以后,不能满足的时候停下然后考虑左边界右移,左边界只…

阿里5年经验之谈 —— 记录一次jmeter压测的过程!

在软件架构与中间件实验的最后,要求进行非功能测试,那得非压力测试莫属了。虽然之前学习秒杀项目的时候看视频里面用过jmeter,但没有自己实操过,趁着这次机会,使用一下。 QPS与TPS 1、TPS: Transactions …

matlab如何实现任意长序列所有排列方式

最近被问到一个问题,如何计算一个由3个0和3个1组成的序列的所有组合情况,处理这个问题我没有找到特别恰当的函数(如果有能直接做的函数欢迎评论告知),所以采用比较接近需求的perms函数来解决这个问题 首先看perms函数…

小望电商通:无代码开发,轻松实现电商平台、客服系统和用户运营的集成

无缝连接电商系统和客服系统,轻松实现集成 小望电商通是一款具有突破性的电商解决方案。它为电商行业提供了新的可能性,尤其在电商系统和客服系统的无缝连接和集成上具有显著优势。小望电商通的运用,使企业无需进行任何API开发,就…

单区域OSPF配置

配置命令步骤: 1.使用router ospf 进程ID编号 启用OSPF路由 2.使用network 直连网络地址 反掩码 area 0 将其归于区域0 注意:1.进程ID编号可任意(1-65535)2.反掩码用4个255相减得到 如下图,根据给出要求配置OSPF单区…

IDEA插件推荐:Apipost-Helper

IDEA是一款功能强大的集成开发环境(IDE),它可以帮助开发人员更加高效地编写、调试和部署软件应用程序。我们在编写完接口代码后需要进行接口调试等操作,一般需要打开额外的调试工具。 今天给大家介绍一款IDEA插件:Api…

LeetCode(20)最长公共前缀【数组/字符串】【简单】

目录 1.题目2.答案3.提交结果截图 链接: 14. 最长公共前缀 1.题目 编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀,返回空字符串 ""。 示例 1: 输入:strs ["flower","flow&qu…

flutter TabBar指示器

第一层tabView import package:jade/configs/PathConfig.dart; import package:jade/customWidget/MyCustomIndicator.dart; importpackage:jade/homePage/promotion/promotionPost/MyPromotionListMainDesc.dart; import package:jade/homePage/promotion/promotionPost/MyPr…

CANoe-Trace窗口介绍

1、什么是Trace窗口 Trace窗口的目的是在测量期间(CANoe运行时)记录总线活动。在测试设置(Measurement Setup)中的Trace窗口的输入处接收到的所有消息都在Trace输出窗口中显示为文本。 当然,除了总线报文数据外,还有一系列的其他事件可以输出到Trace窗口,例如: 错误事…

【网络基础实战之路】基于不同协议间使用重发布路由策略

系列文章传送门: 【网络基础实战之路】设计网络划分的实战详解 【网络基础实战之路】一文弄懂TCP的三次握手与四次断开 【网络基础实战之路】基于MGRE多点协议的实战详解 【网络基础实战之路】基于OSPF协议建立两个MGRE网络的实验详解 【网络基础实战之路】基于…

香港优才计划获批概率跌破20%,拿香港身份越来越难了?

香港优才计划获批概率跌破20%,拿香港身份越来越难了? 截止10月31日,香港各类人才引进计划共收到18万4538宗申请,获批11万5741宗,整体“获批率”为62.72%。 具体到项目获批率: ①优才计划共收到63979宗申请&…

自动化测试介绍和分类,看这一篇就够了

📢专注于分享软件测试干货内容,欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正!📢交流讨论:欢迎加入我们一起学习!📢资源分享:耗时200小时精选的「软件测试」资…

中小商家,也能在抖音电商找到星辰大海

“你这背景太假了!” 横穿中国,从江苏闯荡到新疆创业卖蜂蜜的刘元杰,怎么也没有预料到这句话会成为热梗。他本人在直播间各种和网友之间“极限拉扯”,用扔水桶、扔石头、召唤新疆大叔骑马打招呼等操作自证背景的真实性。这让他的…

git宝藏干货

git命令 怎样删除gitee仓库 Gitee上传代码 在Gitee上创建该项目的远程仓库 进入你想要上传的文件目录下,右键单击空白处,点击Git Bash Here 命令行输入下列命令,初始化本地仓库 git init 添加项目目录下所有文件至本地仓库 git add . …