fabricjs 添加图片并实时更新小车位置

news2024/11/22 16:09:37

需求:添加小车图片到画布中, 后端通过ws实时更新小车位置
实时更新

实际过程中遇到的问题:

  1. 设置中心点:我想把图片的中心设置为后端传来的坐标点,可以通过设置对象的originX和originY属性来改变对象的旋转和定位基点。
  2. 让小车永远处于最高级,因为我这个画布有其他图形,例如矩形代表站点的意思,小车经过这个站点,即使这个站点处于被选中状态,也要让小车处于画布最高级。
    你可以通过禁用preserveObjectStacking属性来实现
  canvas = new fabric.Canvas(canvasRef.value, {
    preserveObjectStacking: true
  });

在设置小车图像为最高层级时,统一使用canvas.moveTo(object, index)方法,而不是canvas.bringToFront(object)。 index代表了对象的z-index,因此将小车的z-index设置为一个足够大的值可以确保它始终保持在最顶层。
3. 设置图片的大小:可以使用 .scaleToWidth 和 .scaleToHeight 方法来设置图片的大小
4. 在上方过程中,我发现移动过程中,可能会导致图片大小设置失效->解决办法:每次remove旧的图片,添加新的图片重新设置大小
5. 有时候小车在矩形上面,但我想触发点击矩形的事件,会被小车阻挡->解决办法:img.evented = false;

最终代码:

// 添加小车图片
const addCarImg = (point: MousePosition, angle: number) => {
  const containsCar = canvas.getObjects().filter((item: any) => item.type === 'img');
  if (containsCar.length) {
    canvas.remove(containsCar[0]);
  }
  fabric.Image.fromURL('./image.png', function (img) {
    img.scaleToWidth(rectWidth);
    img.scaleToHeight(rectWidth);
    // 设置初始位置 // 以图片的中心为基点(旋转或定位的基点)originX: 'center', originY: 'center',
    img.set({
      left: point.x,
      top: point.y,
      angle,
      type: 'img',
      originX: 'center',
      originY: 'center'
    });

    img.selectable = false;
    // 不允许图片的所有事件
    // eslint-disable-next-line spellcheck/spell-checker
    img.evented = false;
    // 添加图片到画布上
    canvas.add(img);
    canvas.moveTo(img, Number.MAX_SAFE_INTEGER);
  });
};

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

error:0308010C:digital envelope routines::unsupported【超详细图解】

目录 一、报错信息 二、分析原因 三、解决方案 一、报错信息 二、分析原因 node.js 18 不兼容oppsll,node.js v17以上版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制 三、解决方案 方案1:打开终端,直接输入…

Zotero7最新(2024)安装、配置步骤

提醒: 绝大部分插件都已经适配了 Zotero 7,但是 ZotFile 插件已经停止对 Zotero 7 的支持,可以使用 Attanger 插件 替代。如果不适应还是建议装Zotero 6 一、安装 1、进入官网,点击下载进入下载界面 https://www.zotero.org/h…

OpenCV绘图函数(7)从一个椭圆定义中提取出多边形的顶点坐标函数ellipse2Poly()的使用

操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 近似一个椭圆弧为一个多边形线。 函数 ellipse2Poly 计算近似指定椭圆弧的多边形线的顶点。它被 ellipse 函数所使用。如果 arcStart 大于 arcEn…

[羊城杯 2024] Crypto

文章目录 TH_Curvebaby_CurveRSA_lossTheoremPlus TH_Curve 题目描述: from Crypto.Util.number import * from secret import flagdef add_THcurve(P, Q):if P (0, 0):return Qif Q (0, 0):return Px1, y1 Px2, y2 Qx3 (x1 - y1 ** 2 * x2 * y2) * pow(a * …

使用统计方法在AMD GPU上使用JAX Profiler可靠地比较大型生成AI模型中的算法性能

Using statistical methods to reliably compare algorithm performance in large generative AI models with JAX Profiler on AMD GPUs — ROCm Blogs 摘要 本文提供了一份详细的指南,介绍如何在JAX实现的生成AI模型中测量和比较各种算法的性能。利用JAX Profiler…

Python编码系列—Docker容器的高效使用与实战应用

🌟🌟 欢迎来到我的技术小筑,一个专为技术探索者打造的交流空间。在这里,我们不仅分享代码的智慧,还探讨技术的深度与广度。无论您是资深开发者还是技术新手,这里都有一片属于您的天空。让我们在知识的海洋中…

前后端分离项目实战-通用管理系统搭建(前端Vue3+ElementPlus,后端Springboot+Mysql+Redis)第八篇:Tab标签页的实现

天行健,君子以自强不息;地势坤,君子以厚德载物。 每个人都有惰性,但不断学习是好好生活的根本,共勉! 文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。…

【Selenium】UI自动化实践——输入验证码登录

文章目录 实战题目解题方案 实战题目 使用pythonselenium实现输入验证码的UI自动化。登录页面如图: 解题方案 验证码登录需要导入相关模块和库,本文使用的是opencv和ddddocr模块组合,导入方式采用pip3 install opencv-python、pip3 insta…

JMeter 工具安装以及简单使用

一、安装以及汉化 傻瓜式JMeter下载和环境配置及永久汉化-CSDN博客https://blog.csdn.net/weixin_45608163/article/details/136528719 二、发送GET请求 配置请求头: 配置该线程组的请求: 放在线程组统计,下面请求则共享配置

深度强化学习算法(三)(附带MATLAB程序)

深度强化学习(Deep Reinforcement Learning, DRL)结合了深度学习和强化学习的优点,能够处理具有高维状态和动作空间的复杂任务。它的核心思想是利用深度神经网络来逼近强化学习中的策略函数和价值函数,从而提高学习能力和决策效率…

光性能 -- 光功率平坦度

什么是光功率平坦度? 光功率平坦度指的是,光放各单波功率值与所有波平均值的功率差。 通过MCA(多通道光谱分析单元)扫描OMS(光复用段)上的所有单波光功率,计算经过光放的所有波长的功率平均值&#xff0…

OHIF viewers

OHIF Viewer 是一个开源的 DICOM(数字成像和通信医学)图像查看器,旨在为医疗影像学提供一个灵活且功能强大的解决方案。以下是 OHIF Viewer 的详细介绍,包括发展史、特点、优势、应用及目的等方面的信息。 1. 介绍 OHIF Viewer 是…

一个初始化的服务器,需要配置的相关软件以及环境(cuda、torch、conda)

文章目录 一个刚初始化的服务器需要下载的应用google chromeghelp 解压安装包解压大型zip文件 更新nvidia的驱动pycharm设置conda相关下载condaconda换源 torch相关安装torch包,浏览器下载包安装pytorch常用包安装 导包的方法 一个刚初始化的服务器需要下载的应用 …

【AI】:探索在图像领域的无限可能

欢迎来到 破晓的历程的 博客 ⛺️不负时光,不负己✈️ 文章目录 图像识别与分类的飞跃图像生成与创造的艺术图像增强与修复的神奇图像搜索与理解的智能图像分析与挖掘的洞察图形生成技术1. 生成对抗网络(GANs)2. 卷积神经网络(CN…

Jenkins+Docker | K8S虚拟化实现网站自动部署 简单流程 未完待续,,

目录 大纲 1.Jenkins 的设置与 Docker、Kubernetes 集成指南 1. 创建新的Pipeline项目或Freestyle项目 1.1 创建Pipeline项目 1.2 创建Freestyle项目 2. 配置源代码管理 2.1 配置Git作为源代码管理工具 3. 配置构建触发器 4. 配置构建步骤 4.1 对于Pipeline项目 4.2…

Threadlocal+拦截器+JWT实现登录

很多数据库表都会有创建时间和修改时间,这个可以用mp的自动填充来实现。 也有修改人和更新人的字段,用户登录进来后,修改数据如何拿到修改人呢?每次操作不能把操作人的信息都携带者,那么如何拿到修改人的数据&#xf…

数学建模赛前备赛——模拟退火算法

一.什么是智能优化算法 智能优化算法本质上是一个优化算法,它通过不断优化模型的参数,使得系统表现达到最优,常见的只能优化算法有很多,比如说蚁群算法,遗传算法以及我们今天的主角——模拟退火算法。 二.模拟算法的前身——爬山算法 爬山算法是一种简…

【Python入门】第1节 基础语法

📖第1节 基础语法 ✅字面量✅注释✅变量✅数据类型🧊数据类型转换 ✅标识符✅运算符✅字符串扩展🧊字符串的三种定义方式🧊字符串拼接🧊字符串格式化🧊格式化的精度控制🧊字符串格式化方式2&…

equals与== 区别,全面总结如何使用(Java)

先理解JVM内存模型 虚拟机栈:JVM 运行过程中存储当前线程运行方法所需的数据, 指令、 返回地址本地方法栈:Java程序自动调用底层C/C函数库程序计数器:当前线程执行的字节码的行号指示器堆:存放我们申请的对象&#xff…

【Python 千题 —— 基础篇】入门异常处理

Python 千题持续更新中 …… 脑图地址 👉:⭐https://twilight-fanyi.gitee.io/mind-map/Python千题.html⭐ 题目描述 题目描述 编写一个程序,要求在处理用户输入时捕获各种异常情况,并为每种异常提供相应的处理方式。具体要求如下: 定义一个函数 divide_numbers(),它接…