当前位置： 首页 > news >正文

【国产开源可视化引擎Meta2d.js】快速上手

news 文章来源：https://blog.csdn.net/le5le_iot/article/details/140093625 2024/7/6 20:11:57

提示

初始化引擎后，会生成一个 meta2d 全局对象，可直接使用。

调用meta2d前，需要确保meta2d所在的父容器element元素位置大小已经渲染完成。如果样式或css（特别是css动画）没有初始化完成，可能会报错（宽度为0）或影响显示。

划重点

所有js 语法均可打开 2D可视化编辑器 ，在浏览器控制台直接运行查看效果

如何学习

  1. 跟着“快速上手”文档做一遍，先有个总体认知
  2. 看一遍我们的视频教程，有个全面认识
  3. 多学习示例教程等

官方示例：https://github.com/le5le-com/meta2d.js/tree/main/examples

meta2d.js: The meta2d.js is real-time data exchange and interactive web 2D engine. Developers are able to build Web SCADA, IoT, Digital twins and so on. Meta2d.js是一个实时数据响应和交互的2d引擎，可用于Web组态，物联网，数字孪生等场景。 - Gitee.com

多找网上示例。找不到？你也可以多写学习心得，和大家一起交流学习。

  1. 多查阅Meta2d.js API
  2. 加入乐吾乐可视化交流群：

微信号：le5le-service，备注进交流群

在浏览器中体验

  1. 打开乐吾乐2D可视化编辑器
  2. F12打开浏览器控制台
  3. 在控制台输入
// 定义一个pen，矩形
const pen = {name: "rectangle",text: "矩形",x: 100,y: 100,width: 100,height: 100,
};meta2d.addPen(pen);

Copy

在 ES5 中使用

  1. 获取 meta2d.js
npm install meta2d.js --save
  1. 拷贝 node_modules/meta2d.js/meta2d.js 到静态资源目录。比例 index.html 所在目录
  2. 编写 index.html
<!DOCTYPE html> 
<html>   <head><title i18n>乐吾乐 Meta2d</title><meta charset="UTF-8" /> </head>  <body>    <div id="meta2d" style="height:100vh;width:100vw;"></div> <script src="meta2d.js"></script><script src="index.js"></script>  </body>
</html>

Copy

  1. 编写 index.js 加载 meta2d.js
var meta2d = new Meta2d("meta2d"); 
registerCommonDiagram(); //注册图形库 
// Get the json data 
// ... 
// Open the json 
meta2d.open(json);

Copy

参考例子： https://github.com/le5le-com/meta2d.js/tree/master/examples/es5

在 Vue3 中使用

  1. 获取 @meta2d/core 等库
npm install @meta2d/core --save 
// Option 
npm install @meta2d/activity-diagram --save 
npm install @meta2d/chart-diagram --save 
npm install @meta2d/class-diagram --save 
npm install @meta2d/flow-diagram --save 
npm install @meta2d/fta-diagram --save 
npm install @meta2d/form-diagram --save 
npm install @meta2d/sequence-diagram --save 
npm install @meta2d/le5le-charts --save 
npm install @meta2d/svg --save
  1. 编写 Vue
<template>   <div class="main">     <div id="meta2d"></div>  </div> 
</template>

Copy

  1. 编写 js 加载 meta2d
import {         Options,         Meta2d     } from '@meta2d/core'; 
import {     flowPens } from '@meta2d/flow-diagram'; 
import {     activityDiagram } from '@meta2d/activity-diagram'; 
import {     classPens } from '@meta2d/class-diagram'; 
import {     sequencePens,     sequencePensbyCtx } from '@meta2d/sequence-diagram'; 
import {     defineComponent,     onMounted,     onUnmounted,     ref } from 'vue'; 
import { formPens } from '@meta2d/form-diagram'; declare const window: any; 
declare const meta2d: Meta2d; 
export default defineComponent({     name: 'Meta2dCanvas',     components: {},     setup() {         const meta2dOptions: Options = {};  onMounted(() => {        new Meta2d('meta2d', meta2dOptions);   meta2d.register(flowPens());    meta2d.register(activityDiagram());  meta2d.register(classPens());    meta2d.register(sequencePens()); meta2d.registerCanvasDraw(sequencePensbyCtx());    meta2d.registerCanvasDraw(formPens());            // 监听消息事件       meta2d.on('contextmenu', contextmenu);      meta2d.on('click', click);            // 打开文件            meta2d.open(json);       });     onUnmounted(() => {    if (meta2d) {      meta2d.off('contextmenu', contextmenu);      meta2d.off('click', click);      meta2d.destroy();          }       });        const contextMenuVisible = ref(false);   function contextmenu() {    contextMenuVisible.value = true;       }        function click() {      contextMenuVisible.value = false;   }        return {        contextMenuVisible,    };    },
});

Copy

一个快速上手学习的示例

https://github.com/le5le-com/meta2d.js/tree/main/examples/diagram-editor-vue3

在 React 中使用

  1. 获取 @meta2d/core 等库
npm install @meta2d/core --save 
// Option 
npm install @meta2d/activity-diagram --save 
npm install @meta2d/chart-diagram --save 
npm install @meta2d/class-diagram --save 
npm install @meta2d/flow-diagram --save 
npm install @meta2d/fta-diagram --save 
npm install @meta2d/form-diagram --save 
npm install @meta2d/sequence-diagram --save 
npm install @meta2d/le5le-charts --save 
npm install @meta2d/svg --save
  1. 编写 React jsx
import React, { useEffect } from "react"; 
import { Options, Meta2d } from "@meta2d/core"; 
import { flowPens } from "@meta2d/flow-diagram"; 
import { activityDiagram } from "@meta2d/activity-diagram"; 
import { classPens } from "@meta2d/class-diagram"; 
import { sequencePens, sequencePensbyCtx } from "@meta2d/sequence-diagram"; 
import { formPens } from "@meta2d/form-diagram"; 
const Meta2dContainer = () => {  useEffect(() => {    window.meta2d = new Meta2d("meta2d");   meta2d.register(flowPens());   meta2d.register(activityDiagram());   meta2d.register(classPens());  meta2d.register(sequencePens());     meta2d.registerCanvasDraw(sequencePensbyCtx()); meta2d.registerCanvasDraw(formPens());    // 打开文件     meta2d.open(json);  }, []);   return (    <div className="main">    <div className="meta2d" id="meta2d"></div>    </div>  ); 
}; 
export default Meta2dContainer;

Copy

参考例子： https://github.com/le5le-com/meta2d.js/tree/master/examples/react

相关文章：

【国产开源可视化引擎Meta2d.js】快速上手

提示 初始化引擎后&#xff0c;会生成一个 meta2d 全局对象&#xff0c;可直接使用。 调用meta2d前&#xff0c;需要确保meta2d所在的父容器element元素位置大小已经渲染完成。如果样式或css&#xff08;特别是css动画&#xff09;没有初始化完成&#xff0c;可能会报错&…...

编程日记 2024/7/3 3:56:09

c#与倍福Plc通信

bcdedit /set hypervisorlaunchtype off...

编程日记 2024/7/3 3:54:07

【OceanBase诊断调优】—— 如何通过trace_id找到对应的执行节点IP

1. 前言 OceanBase作为分布式数据库&#xff0c;查问题找对节点很关键。好在OceanBase执行的每一条SQL都能通过trace_id来关联起来&#xff0c;知道trace_id怎么知道是在哪个节点发起的呢&#xff0c;请看本文。 2. trace_id生成规则 ob内部trace_id的生成函数如下&#xff0…...

编程日记 2024/7/3 3:53:06

鸿蒙开发Ability Kit（程序访问控制）：【使用粘贴控件】

使用粘贴控件 粘贴控件是一种特殊的系统安全控件&#xff0c;它允许应用在用户的授权下无提示地读取剪贴板数据。 在应用集成粘贴控件后&#xff0c;用户点击该控件&#xff0c;应用读取剪贴板数据时不会弹窗提示。可以用于任何应用需要读取剪贴板的场景&#xff0c;避免弹窗…...

编程日记 2024/7/3 3:52:05

PL/SQL入门到实践

一、什么是PL/SQL PL/SQL是Procedural Language/Structured Query Language的缩写。PL/SQL是一种过程化编程语言&#xff0c;运行于服务器端的编程语言。PL/SQL是对SQL语言的扩展。PL/SQL结合了SQL语句和过程性编程语言的特性&#xff0c;可以用于编写存储过程、触发器、函数等…...

编程日记 2024/7/3 3:51:04

双非本 985 硕，我马上要入职上海AI实验室大模型算法岗

暑期实习基本结束了&#xff0c;校招即将开启。 不同以往的是&#xff0c;当前职场环境已不再是那个双向奔赴时代了。求职者在变多&#xff0c;HC 在变少&#xff0c;岗位要求还更高了。 最近&#xff0c;我们又陆续整理了很多大厂的面试题&#xff0c;帮助一些球友解惑答疑&…...

编程日记 2024/7/3 3:50:03

C盘清理和管理

本篇是C盘一些常用的管理方法&#xff0c;以及定期清理C盘的方法&#xff0c;大部分情况下都能避免C盘爆红。 C盘清理和管理 C盘存储管理查看存储情况清理存储存储感知清理临时文件清理不需要的 迁移存储 磁盘清理桌面存储管理应用存储管理浏览器微信 工具清理 C盘存储管理 查…...

编程日记 2024/7/3 3:48:01

晚上睡觉要不要关路由器？一语中的

前言 前几天小白去了一个朋友家&#xff0c;有朋友说&#xff1a;路由器不关机的话会影响睡眠吗&#xff1f; 这个影响睡眠嘛&#xff0c;确实是会的。毕竟一时冲浪一时爽&#xff0c;一直冲浪一直爽……刷剧刷抖音刷到根本停不下来&#xff0c;肯定影响睡眠。 所以晚上睡觉要…...

编程日记 2024/7/3 3:44:55

ardupilot开发 --- 坐标变换 篇

Good Morning, and in case I dont see you, good afternoon, good evening, and good night! 0. 一些概念1. 坐标系的旋转1.1 轴角法1.2 四元素1.3 基于欧拉角的旋转矩阵1.3.1 单轴旋转矩阵1.3.2 多轴旋转矩阵1.3.3 其他 2. 齐次变换矩阵3. visp实践 0. 一些概念 相关概念&am…...

编程日记 2024/7/3 3:42:53

git clone 别人项目后正确的修改和同步操作

简介 git clone主要是克隆别人的开源项目。但更高端的操作是实现本地修改的同时&#xff0c;能同步别人的在线修改&#xff0c;并且不相互干扰&#xff1a; 克隆原始项目&#xff1a;从远程仓库克隆项目到本地。添加上游仓库&#xff1a;将原始项目的远程仓库添加为上游仓库。…...

编程日记 2024/7/3 3:41:52

JAVA连接FastGPT实现流式请求SSE效果

FastGPT 是一个基于 LLM 大语言模型的知识库问答系统&#xff0c;提供开箱即用的数据处理、模型调用等能力。同时可以通过 Flow 可视化进行工作流编排&#xff0c;从而实现复杂的问答场景&#xff01; 一、先看效果 真正实流式请求&#xff0c;SSE效果&#xff0c;SSE解释&am…...

编程日记 2024/7/3 3:40:48

二分查找1

1. 二分查找&#xff08;704&#xff09; 题目描述&#xff1a; 算法原理&#xff1a; 暴力解法就是遍历数组来找到相应的元素&#xff0c;使用二分查找的解法就是每次在数组中选定一个元素来将数组划分为两部分&#xff0c;然后因为数组有序&#xff0c;所以通过大小关系舍弃…...

编程日记 2024/7/3 3:39:47

什么美业门店管理系统好用？2024美业收银系统软件排名分享

美业SAAS系统在美容、美发、美甲等行业中十分重要&#xff0c;这种系统为美业提供了一种数字化解决方案&#xff0c;帮助企业更高效地管理业务和客户关系。 美业门店管理系统通常提供预约管理、客户管理、库存管理、报表生成等一系列功能&#xff0c;以满足美容院、美发沙龙等…...

编程日记 2024/7/3 3:38:45

【文件上传】

文件上传漏洞 FileUpload 0x01 定义 服务端未对客户端上传文件进行严格的 验证和过滤造成可上传任意文件情况&#xff1b;0x02 攻击满足条件&#xff1a; 1. 上传文件能够被Web容器解释执行   2. 找到文件位置   3.上传文件未被改变内容。&#xff08;躲避安全检查&#…...

编程日记 2024/7/3 3:34:38

Golang 单引号、双引号和反引号的概念、用法以及区别

在 Golang&#xff08;Go 语言&#xff09;中&#xff0c;单引号 ()、双引号 (") 和反引号 () 用于不同类型的字符串和字符表示。以下是它们的概念、用法和区别&#xff1a; 1. 单引号 () 概念 单引号用于表示 字符&#xff08;rune 类型&#xff09;。一个字符表示一个…...

编程日记 2024/7/3 3:33:37

linux和mysql基础指令

Linux中nano和vim读可以打开记事文件。 ifdown ens33 ifup ens33 关闭&#xff0c;开启网络 rm -r lesson1 gcc -o code1 code1.c 编译c语言代码 ./code1 执行c语言代码 rm -r dir 删除文件夹 mysql> show databases-> ^C mysql> show databases; -------…...

编程日记 2024/7/3 3:30:35

JDK 为什么需要配置环境变量

前言 首先&#xff0c;我们要知道 Java 程序的执行过程。首先将 xxx.java 文件&#xff08;使用 javac 编译指令&#xff09;编译成 xxx.class 文件&#xff08;字节码文件&#xff09;&#xff0c;再将字节码文件&#xff08;使用 java 执行指令&#xff09;解释成电脑所能认识…...

编程日记 2024/7/3 3:29:33

ViewBinding的使用(因为kotlin-android-extensions插件的淘汰)

书籍&#xff1a; 《第一行代码 Android》第三版 开发环境&#xff1a; Android Studio Jellyfish | 2023.3.1 问题&#xff1a; 3.2.4在Activity中使用Toast章节中使用到了kotlin-android-extensions插件,但是该插件已经淘汰,根据网上了解,目前使用了新的技术VewBinding替…...

编程日记 2024/7/3 3:25:28

IOS Swift 从入门到精通：ios 连接数据库 安装 Firebase 和 Firestore

创建 Firebase 项目 导航到Firebase 控制台并创建一个新项目。为项目指定任意名称。 在这里插入图片描述 下一步，启用 Google Analytics，因为我们稍后会用到它来发送推送通知。 在这里插入图片描述 在下一个屏幕上，选择您的 Google Analytics 帐户（如果已创建）。如果没…...

编程日记 2024/7/3 3:23:26

QT4-QT5（6）-const char* QString 乱码转换

我简单粗暴的给出个结论&#xff1a; QString GBK编码正常&#xff0c;可以转UTF-8编码&#xff0c;但会有少量乱码。 const char* 编码就不要转编码&#xff0c;转哪个都是乱码。 UTF-8.cpp 下 1.QString GBK->UTF-8 2.const char * GBK->UTF-8 const char *…...

编程日记 2024/7/3 3:22:25

报错：RuntimeError_ cuDNN error_ CUDNN_STATUS_EXECUTION_FAILED

原因&#xff1a;pytorch与cuda版本不对 也有可能是内存空间不足&#xff0c;可以更改虚拟空间大小&#xff0c;参考&#xff1a;解决电脑内存不足问题&#xff1a;Win10虚拟内存设置指南...

编程日记 2024/7/3 3:21:24

黑马点评项目总结1-使用Session发送验证码和登录login和 使用Redis存储验证码和Redis的token登录

黑马先是总结了从session实现登录&#xff0c;然后是因为如果使用了集群方式的服务器的话&#xff0c;存在集群共享session互相拷贝效率低下的问题&#xff0c;接着引出了速度更快的内存型的kv数据库Redis&#xff0c; 使用Session发送验证码和登录login 举个例子&#xff1a…...

编程日记 2024/7/3 3:18:20

【大模型】Vllm基础学习

前言&#xff1a;vllm是一个大语言模型高速推理框架&#xff0c;旨在提高大模型的服务效率。优势是内存管理&#xff0c;实现的核心是pageattetion算法。仅在gpu上加速&#xff0c;不在cpu加速。 目录 1. PageAttention2. 实践2.1 安装2.2 离线推理2.3 适配OpenAI的api 1. Page…...

编程日记 2024/7/3 3:17:17

使用vue动态给同一个a标签添加内容 并给a标签设置hover，悬浮文字变色，结果鼠标悬浮有的字上面不变色

如果Vue的虚拟DOM更新机制导致样式更新不及时&#xff0c;你可以尝试以下几种方法来解决这个问题&#xff1a; 确保使用响应式数据&#xff1a; 确保你使用的数据是响应式的&#xff0c;并且任何对这些数据的更改都会触发视图的更新。在Vue中&#xff0c;你应该使用data对象中的…...

编程日记 2024/7/3 3:16:15

【ajax实战06】进行文章发布

本文章目标&#xff1a;收集文章内容&#xff0c;并提交服务器保存 一&#xff1a;基于form-serialize插件收集表单数据 form-serialize插件仅能收集到表单数据&#xff0c;除此之外的数据无法收集到 二&#xff1a;基于axios提交到服务器保存 三&#xff1a;调用alert警告…...

编程日记 2024/7/3 3:15:13

Codeforces Round 954 (Div. 3)（A~E）

目录 A. X Axis B. Matrix Stabilization C. Update Queries D. Mathematical Problem A. X Axis Problem - A - Codeforces 直接找到第二大的数&#xff0c;答案就是这个数与其他两个数的差值的和。 void solve() {vector<ll>a;for (int i 1; i < 3; i){int x;…...

编程日记 2024/7/3 3:14:12

基于Java微信小程序同城家政服务系统设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f;感兴趣的可以先收藏起来&#xff0c;还…...

编程日记 2024/7/3 3:13:11

[21] Opencv_CUDA应用之使用Haar级联的对象检测

Opencv_CUDA应用之使用Haar级联的对象检测 Haar级联使用矩形特征来检测对象，它使用不同大小的矩形来计算不同的线和边缘特征。矩形包含一些黑色和白色区域，如下图所示，它们在图像的不同位置居中 类Haar特征检测算法的思想是计算矩形内白色像素和黑色像素之间的差异这个方法的…...

编程日记 2024/7/3 3:12:10

CXL：拯救NVMe SSD缓存不足设计难题-2

LMB提出了基于CXL协议的内存扩展框架和内核模块。该方案利用CXL内存扩展器作为物理DRAM源&#xff0c;旨在提供一个统一的内存分配接口&#xff0c;使PCIe和CXL设备都能方便地访问扩展的内存资源。通过这个接口&#xff0c;NVMe驱动和CUDA的统一内存内核驱动可以直接高效地访问…...

编程日记 2024/7/3 3:08:05

Opencv学习项目6——pyzbar

在之前我们学习了解码图片中的二维码&#xff0c;这次我们开启摄像头来解码视频中二维码 开启摄像头 # 打开摄像头 cap cv2.VideoCapture(0) cap.set(3, 640) # 设置摄像头画面宽度 cap.set(4, 480) # 设置摄像头画面高度 我使用的是笔记本上的摄像头来进行的&#xff0c;…...

编程日记 2024/7/3 3:07:03

Switch 刷安卓11 (LineageOS 18.1) 大气层双系统图文教程

很多朋友手上已经拥有了完成硬破的 Switch &#xff0c;但又不甘心仅仅使用 Switch 本身的地平线系统&#xff0c;Switch 刷安卓 (Android 11) 会是一个好的选择&#xff0c;虽然 Switch 的 CPU 性能拉跨&#xff0c;但和桌面平台同一设计思路的TegraX1 GPU 可谓是先于时代&…...

编程日记 2024/7/3 3:05:01

Spring Boot与Spring Batch的深度集成

Spring Boot与Spring Batch的深度集成 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将深入探讨在Spring Boot应用中如何实现与Spring Batch的深度集成…...

编程日记 2024/7/3 3:01:57

RTSP协议在视频监控系统中的典型应用、以及视频监控设备的rtsp地址格式介绍

目录 一、协议概述 1、定义 2、提交者 3、位置 二、主要特点 1、实时性 2、可扩展性 3、控制功能 4、回放支持 5、网络适应性 三、RTSP的工作原理 1、会话准备 2、会话建立 3、媒体流控制 4、会话终止 5、媒体数据传输 四、协议功能 1、双向性 2、带外协议 …...

编程日记 2024/7/3 2:59:55

Kotlin基础——异步和并发

同步和异步 同步指的是一种行为&#xff1a;当执行IO操作的时候&#xff0c;在代码层面上我们需要主动去等待结果&#xff0c;直到结果返回阻塞指的是一种状态&#xff1a;当执行IO操作的时候&#xff0c;线程处于挂起状态&#xff0c;就是该线程没有执行了 故同步不是阻塞&a…...

编程日记 2024/7/3 2:58:53

消防认证-防火卷帘

一、消防认证 消防认证是指消防产品符合国家相关技术要求和标准&#xff0c;且通过了国家认证认可监督管理委员会审批&#xff0c;获得消防认证资质的认证机构颁发的证书&#xff0c;消防产品具有完好的防火功能&#xff0c;是住房和城乡建设领域验收的重要指标。 二、认证依据…...

编程日记 2024/7/3 2:57:52

SpringBoot3.3集成knif4j-swagger文档方式和使用案例

springboot3 集成 knif4j &#xff1a; 访问地址&#xff1a; swagger 接口文档默认地址&#xff1a;http://localhost:8080/swagger-ui.html# Knife4j 接口文档默认地址&#xff1a;http://127.0.0.1:8080/doc.html Maven: <dependency><groupId>com.github.x…...

编程日记 2024/7/3 2:56:51

老年服务与管理实训室：制定教学模式

随着我国人口老龄化程度的加深,如何为老年人提供优质的养老服务成为社会关注的重点。作为培养老年服务人才的重要阵地,老年服务与管理实训室应制定科学合理的教学模式,满足行业发展需求,培养出高素质的老年服务专业人才。本文针对老年服务与管理实训室的教学模式展开探讨,提出相…...

编程日记 2024/7/3 2:54:48

4、DDD、中台和微服务的关系

DDD、中台和微服务的关系 1 DDD和中台的本质 领域驱动设计&#xff08;DDD&#xff09;和中台在企业架构中有着密切的关系。DDD的本质在于通过对业务领域的深入分析和建模&#xff0c;构建高内聚、低耦合的系统。而中台则是对企业核心业务能力的抽象和封装&#xff0c;以实现…...

编程日记 2024/7/3 2:51:45

【ACM出版，马来西亚-吉隆坡举行】第四届互联网技术与教育信息化国际会议 (ITEI 2024)

作为全球科技创新大趋势的引领者&#xff0c;中国不断营造更加开放的科技创新环境&#xff0c;不断提升学术合作的深度和广度&#xff0c;构建惠及各方的创新共同体。这是对全球化的新贡献&#xff0c;是构建人类命运共同体的新贡献。 第四届互联网技术与教育信息化国际学术会议…...

编程日记 2024/7/3 2:50:43

走进IT的世界

引言 随着高考的结束&#xff0c;对于即将踏入IT&#xff08;信息技术&#xff09;领域的新生而言&#xff0c;这个假期不仅是放松身心的时间&#xff0c;更是提前规划、深化专业知识、为大学生活奠定坚实基础的宝贵机会。以下是一份详尽的高考假期预习与规划指南&#xff0c;…...

编程日记 2024/7/3 2:47:40

Linux 时区文件编译器 zic【man 8 zic】

1. NAME&#xff08;名&#xff09; zic - 时区编译器 2. SYNOPSIS&#xff08;概要&#xff09; zic [-v] [-d directory] [-l localtime] [-p posixrules] [-L leapsecondfilename] [-s] [-y command] [filename ...]3. DESCRIPTION&#xff08;函数描述&#xff09; zic…...

编程日记 2024/7/3 2:46:39

Springboot下使用Redis管道(pipeline)进行批量操作

之前有业务场景需要批量插入数据到Redis中&#xff0c;做的过程中也有一些感悟&#xff0c;因此记录下来&#xff0c;以防忘记。下面的内容会涉及到 分别使用for、管道处理批量操作&#xff0c;比较其所花费时间。 分别使用RedisCallback、SessionCallback进行Redis pipeline …...

编程日记 2024/7/3 2:45:37

Vue技巧大揭秘：自定义指令的力量与应用

引言 自定义指令就像是给予开发者的一把魔法钥匙&#xff0c;它能够打开DOM操作的新世界&#xff0c;按我的理解就是把对DOM操作的逻辑进行封装 全局注册与局部注册 全局注册 定义&#xff1a; 全局注册意味着自定义指令在Vue实例创建之前通过Vue.directive()方法注册&…...

编程日记 2024/7/3 2:44:35

HR人才测评，如何考察想象力？

什么是想象力&#xff1f; 想象力是指&#xff0c;人们通过在已有物质的基础上&#xff0c;通过大脑想象、加工、创造出新事物的能力&#xff0c;举一个非常简单的例子&#xff0c;在提到鸟这种生活的时候&#xff0c;大家会联想到各种各样不同鸟的品种。 在企业招聘中常常应…...

编程日记 2024/7/3 2:43:34

Git命令远程分支的合并和本地分支的同步

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

编程日记 2024/7/3 2:42:33

墨烯的C语言技术栈-C语言基础-003

三.数据类型 1.char // 字符数据型 2.short // 短整型 3.int // 整型 4.long // 长整型 5.long long // 更长的整型 6.float // 单精度浮点数 7.double // 双精度浮点数 为什么写代码? 为了解决生活中的问题 购物,点餐,看电影 为什么有这么多类型呢? 因为说的话都是字符型…...

编程日记 2024/7/3 2:41:32

RpcRrovider分发rpc服务(OnMessage和Closure回调)

目录 1.完善rpcprovider.cc的OnConnection 2.完善rpcprovider.cc的OnMessage 3.完整rpcprovider.h 4.完整rpcprovider.cc 这篇文章主要完成&#xff0c;protobuf实现的数据序列化和反序列化。 1.完善rpcprovider.cc的OnConnection rpc的请求是短连接的&#xff0c;请求一次…...

编程日记 2024/7/3 2:40:30

分解+降维+预测！多重创新！直接写核心！EMD-KPCA-Transformer多变量时间序列光伏功率预测

分解降维预测&#xff01;多重创新&#xff01;直接写核心&#xff01;EMD-KPCA-Transformer多变量时间序列光伏功率预测 目录 分解降维预测&#xff01;多重创新&#xff01;直接写核心&#xff01;EMD-KPCA-Transformer多变量时间序列光伏功率预测效果一览基本介绍程序设计参…...

编程日记 2024/7/3 2:36:24

【Python】MacBook M系列芯片Anaconda下载Pytorch，并开发一个简单的数字识别代码（附带踩坑记录）

文章目录 配置镜像源下载Pytorch验证使用Pytorch进行数字识别 配置镜像源 Anaconda下载完毕之后&#xff0c;有两种方式下载pytorch&#xff0c;一种是用页面可视化的方式去下载&#xff0c;另一种方式就是直接用命令行工具去下载。 但是由于默认的Anaconda走的是外网&#x…...

编程日记 2024/7/3 2:35:22

自定义控件动画篇（四）ObjectAnimator的使用

ObjectAnimator 是 Android 属性动画框架中的一个重要组件&#xff0c;它允许你针对特定属性的值进行动画处理。与 ValueAnimator 相比&#xff0c;ObjectAnimator 更专注于 UI 组件&#xff0c;可以直接作用于视图的属性&#xff0c;如位置、尺寸、透明度等&#xff0c;而无需…...

编程日记 2024/7/3 2:34:21

自研直播系统-直播系统实战

文章目录 1 流媒体基础本文教程下载地址1.1 流媒体1.2 流式传输方式1.2.1 顺序流式传输1.2.2 实时流式传输 1.3 流媒体传输协议1.3.1 rtmp协议1.3.2 HLS协议1.3.3 RTSP协议1.3.4 视频流的对比 1.4 视频编码(codec)1.5 分辨率的规范分辨率簡介&#xff1a;1.5.2 分辨率單位 1.6 …...

编程日记 2024/7/6 16:36:23

Three.js机器人与星系动态场景：实现3D渲染与交互式控制

内容摘要&#xff1a;使用Three.js库构建了一个交互式的3D场景。组件中创建了一个机器人模型&#xff0c;包括头部、眼睛、触角、身体和四肢&#xff0c;以及两个相同的机器人实例以实现动态效果。场景中还加入了粒子效果&#xff0c;模拟星系环境&#xff0c;增强了视觉效果。…...

编程日记 2024/7/6 16:12:12

Vue的服务器代理如何配置

在Vue项目中配置服务器代理&#xff0c;主要是为了解决开发过程中的跨域问题&#xff0c;以及方便地将前端请求转发到后端服务器。以下是在Vue项目中配置服务器代理的详细步骤和注意事项&#xff0c;主要基于Vue CLI进行说明&#xff1a; 一、配置步骤 1. 确认项目环境 确保…...

编程日记 2024/7/6 15:58:03

react native中使用@react-navigation/native进行自定义头部

react native中使用react-navigation/native进行自定义头部 效果示例图实例代码 效果示例图 实例代码 /* eslint-disable react-native/no-inline-styles */ /* eslint-disable react/no-unstable-nested-components */ import React, { useLayoutEffect } from react; import…...

编程日记 2024/7/6 11:57:23

Linux下的Vim编辑器

一、绪论 1.1 Linux Vim的概述 1.2 Vim在Linux操作系统中的重要性 二、Linux Vim基础知识 2.1 Vim的起源和发展历史 2.2 Vim编辑器的安装与配置 2.3 Vim的基本操作命令 一、绪论 1.1 Linux Vim的概述 vi ( visual editor )编辑器通常被简称为vi，它是Linux和Unix系统上最…...

编程日记 2024/7/6 9:05:37

14-38 剑和诗人12 - RAG+ 思维链 ⇒ 检索增强思维（RAT）

在快速发展的 NLP 和 LLM 领域&#xff0c;研究人员不断探索新技术来增强这些模型的功能。其中一种备受关注的技术是检索增强生成 (RAG) 方法&#xff0c;它将 LLM 的生成能力与从外部来源检索相关信息的能力相结合。然而&#xff0c;最近一项名为检索增强思维 (RAT) 的创新通过…...

编程日记 2024/7/6 8:49:27

荣威D5XDMH：长续航大动力，开启混动SUV新篇章

随着汽车市场的日益繁荣，消费者对车辆性能与品质的要求也在不断提升。荣威品牌深谙此道，于5月20日正式推出了其全新力作——荣威D5X DMH插混SUV，不仅为消费者带来了"入门即享长续航大动力"的极致体验，更以超高的性价比，在混动SUV市场掀起了一股"价值革命&q…...

编程日记 2024/7/5 20:00:59

npm : 无法加载文件 D:\Program Files\nodejs\npm.ps1，因为在此系统上禁止运行脚本

安装npm时出现如下提示&#xff1a; 出现这个错误信息&#xff0c;是系统禁止执行PowerShell的脚本。 出现的原因是&#xff0c;系统默认的执行策略是Restricted&#xff08;默认设置&#xff09;&#xff0c;限制执行&#xff0c;所以会出现如上提示。 解决方法&#xff1a;…...

编程日记 2024/7/6 20:00:33

代码随想录算法训练营第22天（py）| 二叉树 | 669. 修剪二叉搜索树、108.将有序数组转换为二叉搜索树、538.把二叉搜索树转换为累加树

669. 修剪二叉搜索树 力扣链接 给定一个二叉搜索树&#xff0c;同时给定最小边界L 和最大边界 R。通过修剪二叉搜索树&#xff0c;使得所有节点的值在[L, R]中 (R>L) 思路 如果当前节点元素小于low&#xff0c;递归右子树&#xff0c;返回符合条件的头节点 如果当前节点元…...

编程日记 2024/7/5 21:03:52

LLama学习记录

学习前&#xff1a; 五大问题&#xff1a; 为什么SwiGLU激活函数能够提升模型性能&#xff1f;RoPE位置编码是什么&#xff1f;怎么用的&#xff1f;还有哪些位置编码方式&#xff1f;GQA&#xff08;Grouped-Query Attention, GQA&#xff09;分组查询注意力机制是什么&…...

编程日记 2024/7/6 15:46:13

SpringBoot特性

文章目录 SpringBoot1 概述2 核心特性 SpringBoot 1 概述 SpringBoot是一个Java软件开发框架&#xff08;脚手架&#xff09;&#xff1b;设计目的&#xff1a;简化项目的初始搭建以及开发过程&#xff0c;该框架机制使开发人员不再需要大量的手动依赖管理。 2 核心特性 起步…...

编程日记 2024/7/5 16:03:19

QLExpress入门及实战总结

文章目录 1.背景2.简介3.QLExpress实战3.1 基础例子3.2 低代码实战3.2.1 需求描述3.2.1 使用规则引擎3.3.2 运行结果 参考文档 1.背景 最近研究低代码实现后端业务逻辑相关功能&#xff0c;使用LiteFlow作为流程编排后端service服务, 但是LiteFlow官方未提供图形界面编排流程。…...

编程日记 2024/7/6 14:27:48