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

【PPTist】插入形状、插入图片、插入图表

一、插入形状

插入形状有两种情况,一种是插入固定的形状,
在这里插入图片描述

一种是插入自定义的形状。
插入固定的形状时,跟上一篇文章 绘制文本框 是一样一样的,都是调用的 mainStore.setCreatingElement() 方法,只不多传的类型不一样。还有插入线条,也是类似的。

mainStore.setCreatingElement({type: 'shape',data: shape,
})

所以咱们那接下来主要看插入自定义形状时的代码执行流程

1、点击
<Popover trigger="click" v-model:value="shapeMenuVisible" style="height: 100%;" :offset="10"><template #content><PopoverMenuItem center @click="() => { drawCustomShape(); shapeMenuVisible = false }">自由绘制</PopoverMenuItem></template><IconDown class="arrow" />
</Popover>

src/views/Editor/CanvasTool/index.vue

// 绘制自定义任意多边形
const drawCustomShape = () => {mainStore.setCreatingCustomShapeState(true)shapePoolVisible.value = false
}

src/store/main.ts

setCreatingCustomShapeState(state: boolean) {this.creatingCustomShape = state
},

有了 creatingCustomShape,下面的组件就会显示

<ShapeCreateCanvasv-if="creatingCustomShape"@created="data => insertCustomShape(data)"
/>
2、mousedown

src/views/Editor/Canvas/ShapeCreateCanvas.vue
触发 created 方法

const addPoint = (e: MouseEvent) => {const { pageX, pageY } = getPoint(e)isMouseDown.value = trueif (closed.value) emit('created', getCreateData())else points.value.push([pageX, pageY])document.onmouseup = () => {isMouseDown.value = false}
}
3、created

src/views/Editor/Canvas/index.vue
插入任意多边形

// 插入自定义任意多边形
const insertCustomShape = (data: CreateCustomShapeData) => {const {start,end,path,viewBox,} = dataconst position = formatCreateSelection({ start, end })if (position) {const supplement: Partial<PPTShapeElement> = {}if (data.fill) supplement.fill = data.fillif (data.outline) supplement.outline = data.outline// 创建形状元素createShapeElement(position, { path, viewBox }, supplement)}// 清除 creatingCustomShapemainStore.setCreatingCustomShapeState(false)
}
4、mousemove

src/views/Editor/Canvas/ShapeCreateCanvas.vue
如果鼠标按下,添加 points,就会形成折线的效果。
可以看到只要起点和终点比较近就算闭合了,防止对不上

const updateMousePosition = (e: MouseEvent) => {// 如果鼠标按下,则添加点if (isMouseDown.value) {const { pageX, pageY } = getPoint(e, true)points.value.push([pageX, pageY])mousePosition.value = nullreturn}// 更新鼠标位置const { pageX, pageY } = getPoint(e)mousePosition.value = [pageX, pageY]// 判断是否闭合if (points.value.length >= 2) {const [firstPointX, firstPointY] = points.value[0]if (Math.abs(firstPointX - pageX) < 5 && Math.abs(firstPointY - pageY) < 5) {closed.value = true}else closed.value = false}else closed.value = false
}

根据鼠标位置 mousePosition 计算 path

const path = computed(() => {let d = ''for (let i = 0; i < points.value.length; i++) {const point = points.value[i]if (i === 0) d += `M ${point[0]} ${point[1]} `else d += `L ${point[0]} ${point[1]} `}if (points.value.length && mousePosition.value) {d += `L ${mousePosition.value[0]} ${mousePosition.value[1]}`}return d
})

模版中的 path 元素随之更新

<svg overflow="visible"><path:d="path" stroke="#d14424" :fill="closed ? 'rgba(226, 83, 77, 0.15)' : 'none'" stroke-width="2" ></path>
</svg>
5、取消绘制的按键绑定
const keydownListener = (e: KeyboardEvent) => {const key = e.key.toUpperCase()if (key === KEYS.ESC) close()if (key === KEYS.ENTER) create()
}
onMounted(() => {message.success('点击绘制任意形状,首尾闭合完成绘制,按 ESC 键或鼠标右键取消,按 ENTER 键提前完成', {duration: 0,})document.addEventListener('keydown', keydownListener)
})

以及鼠标右键也会取消绘制

@contextmenu.stop.prevent="close()"
const close = () => {mainStore.setCreatingCustomShapeState(false)
}

二、插入图片

src/views/Editor/CanvasTool/index.vue
插入图片也是一个自定义组件

<FileInput @change="files => insertImageElement(files)"><IconPicture class="handler-item" v-tooltip="'插入图片'" />
</FileInput>

这个组件里面实现上传功能的是 input 标签

<input class="input"type="file" name="upload" ref="inputRef" :accept="accept" @change="$event => handleChange($event)"
>

上传之后插入图片元素

const insertImageElement = (files: FileList) => {const imageFile = files[0]if (!imageFile) returngetImageDataURL(imageFile).then(dataURL => createImageElement(dataURL))
}

src/utils/image.ts

获取图片宽高的方法,相比大家都挺熟悉的

/*** 获取图片的原始宽高* @param src 图片地址*/
export const getImageSize = (src: string): Promise<ImageSize> => {return new Promise(resolve => {const img = document.createElement('img')img.src = srcimg.style.opacity = '0'document.body.appendChild(img)img.onload = () => {const imgWidth = img.clientWidthconst imgHeight = img.clientHeightimg.onload = nullimg.onerror = nulldocument.body.removeChild(img)resolve({ width: imgWidth, height: imgHeight })}img.onerror = () => {img.onload = nullimg.onerror = null}})
}

获取图片宽高之后,创建图片元素,通过 lefttop 将图片水平垂直居中
src/hooks/useCreateElement.ts

/*** 创建图片元素* @param src 图片地址*/
const createImageElement = (src: string) => {getImageSize(src).then(({ width, height }) => {const scale = height / widthif (scale < viewportRatio.value && width > VIEWPORT_SIZE) {width = VIEWPORT_SIZEheight = width * scale}else if (height > VIEWPORT_SIZE * viewportRatio.value) {height = VIEWPORT_SIZE * viewportRatio.valuewidth = height / scale}createElement({type: 'image',id: nanoid(10),src,width,height,left: (VIEWPORT_SIZE - width) / 2,top: (VIEWPORT_SIZE * viewportRatio.value - height) / 2,fixedRatio: true,rotate: 0,})})
}

复习一下创建元素的方法,会把元素放到当前幻灯片的元素列表中

// 创建(插入)一个元素并将其设置为被选中元素
const createElement = (element: PPTElement, callback?: () => void) => {// 添加元素到元素列表slidesStore.addElement(element)// 设置被选中元素列表mainStore.setActiveElementIdList([element.id])if (creatingElement.value) mainStore.setCreatingElement(null)setTimeout(() => {// 设置编辑器区域为聚焦状态mainStore.setEditorareaFocus(true)}, 0)if (callback) callback()// 添加历史快照addHistorySnapshot()
}

三、插入图表

插入图表的方法,其实也差不多,就是往当前的幻灯片里添加一个图表对象。不过这里就不讲前面怎么添加元素了,讲讲后面怎么展示元素吧。先来看一下图表元素的数据:

const newElement: PPTChartElement = {type: 'chart',id: nanoid(10),chartType: CHART_TYPES[type],left: 300,top: 81.25,width: 400,height: 400,rotate: 0,themeColor: [theme.value.themeColor],gridColor: theme.value.fontColor,data: {labels: ['类别1', '类别2', '类别3', '类别4', '类别5'],legends: ['系列1'],series: [[12, 19, 5, 2, 18],],},
}

是这个元素对元素列表进行循环的
src/views/Editor/Canvas/index.vue

<EditableElement v-for="(element, index) in elementList" :key="element.id":elementInfo="element":elementIndex="index + 1":isMultiSelect="activeElementIdList.length > 1":selectElement="selectElement":openLinkDialog="openLinkDialog"v-show="!hiddenElementIdList.includes(element.id)"
/>

src/views/Editor/Canvas/EditableElement.vue
这个组件中通过动态组件的方式控制显示哪个元素

<component:is="currentElementComponent":elementInfo="elementInfo":selectElement="selectElement":contextmenus="contextmenus"
></component>
const currentElementComponent = computed<unknown>(() => {const elementTypeMap = {[ElementTypes.IMAGE]: ImageElement,[ElementTypes.TEXT]: TextElement,[ElementTypes.SHAPE]: ShapeElement,[ElementTypes.LINE]: LineElement,[ElementTypes.CHART]: ChartElement,[ElementTypes.TABLE]: TableElement,[ElementTypes.LATEX]: LatexElement,[ElementTypes.VIDEO]: VideoElement,[ElementTypes.AUDIO]: AudioElement,}return elementTypeMap[props.elementInfo.type] || null
})

我们的目标就是 ChartElementsrc/views/components/element/ChartElement/index.vue
然后图表那一小块是这个:src/views/components/element/ChartElement/Chart.vue,图表是通过 chartist 库实现的

import { BarChart, LineChart, PieChart } from 'chartist'

相关文章:

【PPTist】插入形状、插入图片、插入图表

一、插入形状 插入形状有两种情况&#xff0c;一种是插入固定的形状&#xff0c; 一种是插入自定义的形状。 插入固定的形状时&#xff0c;跟上一篇文章 绘制文本框 是一样一样的&#xff0c;都是调用的 mainStore.setCreatingElement() 方法&#xff0c;只不多传的类型不一…...

云集电商:数据库的分布式升级实践|OceanBase案例

电商行业对数据库有哪些需求 云集电商作为一家传统电商企业&#xff0c;业务涵盖了美妆个护、服饰、水果生鲜、健康保健等多个领域&#xff0c;在创立四年后在纳斯达克上市&#xff08;股票代码&#xff1a;YJ&#xff09;。与京东、淘宝、拼多多等电商平台不同&#xff0c;云…...

OOM排查思路

K8S 容器的云原生生态&#xff0c;改变了服务的交付方式&#xff0c;自愈能力和自动扩缩等功能简直不要太好用。 有好的地方咱要夸&#xff0c;不好的地方咱也要说&#xff0c;真正的业务是部署于容器内部&#xff0c;而容器之外&#xff0c;又有一逻辑层 Pod 。 对于容器和…...

Q_OBJECT宏报错的问题

在Qt中继承QObject&#xff0c;并且加上Q_OBJECT宏&#xff0c;有时候会报错&#xff0c;比如我的错误&#xff1a; error: debug/httpmgr.o:httpmgr.cpp:(.rdata$.refptr._ZTV7HttpMgr[.refptr._ZTV7HttpMgr]0x0): undefined reference to vtable for HttpMgr 意思是没有虚…...

iOS - 关联对象

详细总结 Objective-C 的关联对象功能&#xff1a; 1. 基本使用 // 1. 设置关联对象 objc_setAssociatedObject(id object, const void *key, id value, objc_AssociationPolicy policy);// 2. 获取关联对象 id objc_getAssociatedObject(id object, const void *key);// 3. …...

Linux之进程

Linux之进程 一.进程进程之形ps命令进程状态特殊进程孤儿进程守护进程 进程创建之创建子进程进程特性优先级进程切换&#xff08;分时操作系统&#xff09; 二.环境变量三.进程地址空间四.进程终止&进程等待五.进程替换六.自定义shell 本篇博客希望简略的介绍进程&#xff…...

数据库事务

一 事务的概念 为什么要有事务&#xff0c;我们先前没学事务&#xff0c;也能写sql语句&#xff0c;事务的意义是什么? 由来: 是为了服务应用层开发&#xff0c;降低开发难度。假如没有事务&#xff0c;那我们身为开发人员&#xff0c;要处理转账需求&#xff0c;此时一定是有…...

Python statistics 模块

在数据分析和科学计算中&#xff0c;统计学是一个非常重要的工具。 Python 提供了一个内置的 statistics 模块&#xff0c;专门用于处理基本的统计计算。本文将详细介绍 statistics 模块的功能和使用方法&#xff0c;帮助初学者快速掌握如何使用这个模块进行基本的统计分析。 …...

AI知识-TF-IDF技术(Term Frequency-Inverse Document Frequency)

摘要 TF-IDF&#xff08;Term Frequency-Inverse Document Frequency&#xff09;是一种常见的统计方法&#xff0c;用于评估一个词对于一个文档集或一个语料库中的其中一份文档的重要性。本文将全面阐述TF-IDF的通俗理解、技术原理、应用场景&#xff0c;并做以总结。 通俗理…...

spring cloud的核心模块有哪些

Spring Cloud 的核心模块就像一套精心设计的工具箱&#xff0c;每个模块都扮演着特定的角色&#xff0c;共同构建起微服务架构的坚实基础。 1. Spring Cloud Netflix&#xff08;部分组件已迁移或弃用&#xff0c;但仍是理解 Spring Cloud 的重要参考&#xff09;&#xff1a; …...

java_将数据存入elasticsearch进行高效搜索

使用技术简介&#xff1a; (1) 使用Nginx实现反向代理&#xff0c;使前端可以调用多个微服务 (2) 使用nacos将多个服务管理关联起来 (3) 将数据存入elasticsearch进行高效搜索 (4) 使用消息队列rabbitmq进行消息的传递 (5) 使用 openfeign 进行多个服务之间的api调用 参…...

RAG中的文本切分策略详解

RAG中的文本切分策略详解 1. 选择RAG中的文本切分策略 1.1 不同的文本切分策略 1. CharacterTextSplitter - 这是最简单的方法。它默认基于字符(默认为"")来切割,并且通过字符的数量来衡量块的长度 2. RecursiveCharacterTextSplitter - 基于字符列表拆分文本。 …...

1-1 电场基本概念

目录&#xff1a; 目录 目录&#xff1a; 1.0 电荷守恒定律 2.0 互斥与相吸 3.0 电场的概念 4.0 库伦定律 5.0 矢量的概念 1.0 电荷守恒定律 电荷守恒定律是物理学中的一个基本原理&#xff0c;它指出在一个封闭系统内&#xff0c;电荷的总量是保持不变的。这意味着电荷既…...

SpringBoot初始化执行自定义接口

SpringBoot初始化执行自定义接口 直接加载接口的方法上即可 PostConstructpublic void init() {//加载初始化数据}PostConstruct‌是一个在Java EE 5规范中引入的注解&#xff0c;用于标记在依赖注入完成后需要执行的方法。这个注解定义在javax.annotation包中&#xff0c;而不…...

【Ubuntu与Linux操作系统:一、Ubuntu安装与基本使用】

第1章 Ubuntu安装与基本使用 1.1 Linux与Ubuntu Linux是一种开源、类Unix操作系统内核&#xff0c;拥有高稳定性和强大的网络功能。由于其开源性和灵活性&#xff0c;Linux被广泛应用于服务器、嵌入式设备以及桌面环境中。 Ubuntu是基于Debian的一个流行Linux发行版&#xf…...

C++大端小端判断方法

文章目录 大端小端定义判断方法方法一&#xff1a;利用联合体&#xff08;Union&#xff09;特性判断方法二&#xff1a;通过指针类型转换判断方法三&#xff1a;利用位运算与移位操作判断方法四&#xff1a;使用系统提供的字节序相关宏&#xff08;特定平台支持&#xff09; 联…...

【IO编程】标准IO和文件IO的对比

标准 I/O 和 文件 I/O 是两种常见的输入输出操作方式。它们的核心功能都是处理数据流&#xff0c;但使用场景和实现方式有所不同&#xff0c;适用于不同的需求。 标准 I/O 标准 I/O 是指与标准输入、标准输出和标准错误流&#xff08;分别为 stdin、stdout 和 stderr&#xf…...

C#范围表达式,模式匹配,逆变和协变--11

目录 一.范围表达式 1.概述 2.语法 3.代码示例 4.实现原理 5.应用场景 二.模式匹配 1.概述 2.核心概念 3.常用模式类型 4.Switch表达式 5.使用示例 6.优势 三.逆变和协变 1.概述 2.泛型类型参数的变性 3.协变示例 4.逆变示例 5.注意事项 6.应用场景 总结 一…...

矩阵求逆的几种方式

矩阵求逆的几种方式&#xff08;以二阶为例&#xff09; 矩阵求逆的方法有多种&#xff0c;以下是常用的几种方式总结&#xff1a; 1. 行列式公式法 这是最常见的方法&#xff0c;适用于 2 2 2 \times 2 22矩阵。 对于矩阵&#xff1a; Φ [ a b c d ] , \Phi \begin{bma…...

全新市场阶段, Plume 生态不断壮大的 RWAfi 版图

加密市场在 2024 年迎来了新的里程碑。BTC 不仅成功推出 ETF&#xff0c;以 BTC 为代表的主流加密货币还在一系列传统金融机构的推动下逐步与主流金融市场接轨。与此同时&#xff0c;随着特朗普成功当选下一任美国总统&#xff0c;他承诺推出一系列友好的加密政策&#xff0c;并…...

HTTPS SSL/TLS 工作流程

目录 一、HTTP/HTTPS 简介1、HTTP协议相关内容2、HTTPS协议3、HTTP版本差异&#xff1a; 二、HTTPS 协议工作流程解析1. 客户端请求 SSL 握手2. 服务端接收 SSL 握手连接3. TLS 握手中的密钥协商4. HTTP 数据的加密与解密5. 安全性保障 三、HTTPS 协议的相关知识拓展1. TLS 与 …...

基于异步IO的io_uring

基于异步IO的io_uring 1. io_uring的实现原理 io_uring使用了一种异步IO机制&#xff0c;它通过一对环形缓冲区(ring buffer)实现用户态于内核态之间的高效通信&#xff0c;用户只需将IO请求放入提交队列&#xff0c;当内核完成IO请求时&#xff0c;会将结果放入完成队列&…...

【redis】centos7下安装redis7

在CentOS 7下安装Redis7可以通过以下两种方法实现&#xff1a;手动编译安装和使用YUM进行安装。 CentOS 7系统的环境和版本&#xff1a; $ cat /etc/centos-release CentOS Linux release 7.9.2009 (Core)手动编译安装 参考官方文档&#xff1a;https://redis.io/docs/lates…...

信息系统项目管理-采购管理-采购清单示例

序号类别产品/服务名称规格/功能描述数量备注1硬件服务器高性能处理器&#xff0c;大容量存储10HP、DELL2网络设备高速路由器和交换机10华为3工作站多核处理器&#xff0c;高分辨率显示器25国产设备4移动检查设备手持式移动检查仪&#xff0c;可连接云平台30国产设备5打印机和扫…...

python 代码使用 DeepXDE 库实现了一个求解二维非线性偏微分方程(PDE)的功能

import deepxde as dde import numpy as np import matplotlib.pyplot as plt import tensorflow as tf# 设置时空计算域 Lx 1 # x 范围从 0 到 1 Ly 1 # y 范围从 0 到 1 Lt 0.05 # t 范围从 0 到 0.05 geom dde.geometry.Rectangle([0, 0], [Lx, Ly]) # 空间域 timed…...

后端技术选型 sa-token校验学习 下 结合项目学习 后端鉴权

目录 后端注册拦截器 实现对 WebMvcConfigurer 接口的类实现 静态变量 方法重写 注册 Spring Framework拦截器 Sa-Token中SaServletFilter拦截器 思考 为什么使用两个拦截器 1. Spring Framework 拦截器 2. SaServletFilter 为什么要注册两个拦截器&#xff1f; 总结 …...

继承(8)

大家好&#xff0c;今天我们来学习一下继承方式相关的知识&#xff0c;有助于我们对java的继承有更深的了解&#xff0c;话不多说&#xff0c;来看。 1.10 继承方式 在现实生活中,事物之间的关系是非常复杂,灵活多样。 Java中支持以下几种继承方式: 单继承&#xff1a; 多层…...

深度学习-图神经网络-超图概念及在Hyper-YOLO的应用(小白也看懂)

为什么需要超图&#xff1f; 在一个复杂系统中&#xff0c;某些节点&#xff08;实体&#xff09;之间的互动可能不是仅限于两个节点之间的关系&#xff0c;而是多个节点同时参与的更复杂的关系&#xff08;超边&#xff09;。简单说就是为了更好的描述事物之间的关系&#xf…...

django基于Python的校园个人闲置物品换购平台

Django 基于 Python 的校园个人闲置物品换购平台 一、平台概述 Django 基于 Python 的校园个人闲置物品换购平台是专为校园师生打造的一个便捷、环保且充满活力的线上交易场所。它借助 Django 这一强大的 Python Web 开发框架&#xff0c;整合了校园内丰富的闲置物品资源&…...

opencv的NLM去噪算法

NLM&#xff08;Non-Local Means&#xff09;去噪算法是一种基于图像块&#xff08;patch&#xff09;相似性的去噪方法。其基本原理是&#xff1a; 图像块相似性&#xff1a;算法首先定义了一个搜索窗口&#xff08;search window&#xff09;&#xff0c;然后在该窗口内寻找…...

嵌入式系统中的 OpenCV 与 OpenGLES 协同应用

&#x1f3ac; 秋野酱&#xff1a;《个人主页》 &#x1f525; 个人专栏:《Java专栏》《Python专栏》 ⛺️心若有所向往,何惧道阻且长 文章目录 一、OpenCV 在嵌入式中的基石地位二、OpenGLES 为嵌入式图形渲染赋能三、二者协同的精妙之处四、面临的挑战与应对策略 在嵌入式开…...

第三十六章 Spring之假如让你来写MVC——拦截器篇

Spring源码阅读目录 第一部分——IOC篇 第一章 Spring之最熟悉的陌生人——IOC 第二章 Spring之假如让你来写IOC容器——加载资源篇 第三章 Spring之假如让你来写IOC容器——解析配置文件篇 第四章 Spring之假如让你来写IOC容器——XML配置文件篇 第五章 Spring之假如让你来写…...

DDD - 如何运用 DDD 进行数据库设计

文章目录 Pre概述领域对象持久化的思想领域模型的设计传统的 4 种关系1. 一对一关系2. 多对一关系3. 一对多关系4. 多对多关系 继承关系的 3 种设计1. 继承关系的第一种方案&#xff1a;整个父类与子类都写入一张表2. 继承关系的第二种方案&#xff1a;各子类各自对应各自的表3…...

OSPF - 特殊报文与ospf的机制

&#x1f460;1 携带FA地址的5类LSA 除去7类转5类的LSA会携带FA地址&#xff0c;还有一种情况会有FA地址 FA地址:forwarding address 转发地址&#xff0c;解决次优路径&#xff0c;避免环路5类LSA FA地址不为0&#xff0c;则直接通过FA地址去往目标网段 FA地址为0&#xff0c…...

VSCode 插件

VSCode 插件 1. GitHub Copilot - AI 代码助手 功能&#xff1a;根据上下文提供实时代码补全&#xff0c;支持自然语言转代码&#xff0c;提供符合现代编程规范的建议。进阶技巧&#xff1a; 使用快捷键 Alt ] 切换多个建议。写注释时&#xff0c;描述业务逻辑而不是具体实现…...

jQuery CSS 类

jQuery CSS 类 引言 在网页设计和开发中&#xff0c;CSS&#xff08;层叠样式表&#xff09;起着至关重要的作用&#xff0c;它负责定义网页的布局、颜色、字体等视觉效果。jQuery&#xff0c;作为一个快速、小巧且功能丰富的JavaScript库&#xff0c;极大地简化了HTML文档的…...

CentOS下安装Docker

Docker 必须要在Linux环境下才能运行&#xff0c;windows下运行也是安装虚拟机后才能下载安装运行&#xff0c;菜鸟教程 下载安装 linux 依次执行下边步骤 更新 yum yum update 卸载旧的Docker yum remove docker docker-client docker-client-latest docker-common doc…...

SQLAlchemy

https://docs.sqlalchemy.org.cn/en/20/orm/quickstart.htmlhttps://docs.sqlalchemy.org.cn/en/20/orm/quickstart.html 声明模型 在这里&#xff0c;我们定义模块级构造&#xff0c;这些构造将构成我们从数据库中查询的结构。这种结构被称为 声明式映射&#xff0c;它同时定…...

2025年第三届“华数杯”国际赛A题解题思路与代码(Python版)

游泳竞技策略优化模型代码详解 第一题&#xff1a;速度优化模型 在这一部分&#xff0c;我们将详细解析如何通过数学建模来优化游泳运动员在不同距离比赛中的速度分配策略。 1. 模型概述 我们的模型主要包含三个核心文件&#xff1a; speed_optimization.py: 速度优化的核…...

深入架构剖析 博客点赞逻辑 strategy 策略模式 策略接口 上下文 具体策略 项目实战

目录 点赞策略上下文 策略上下文代码详解 1. 策略模式概述 2. 核心组件 3. 代码解读 LikeStrategyContext 类 LikeTypeEnum 枚举 LikeStrategy 接口 具体策略类 4. 如何使用这个设计 5. 优点 6. 总结 具体代码实现 定义枚举类 从控制层传入参数到上下文 在策略上…...

嵌入式Linux之C语言开发基础

一、C 语言编译过程 Linux 的 C 语言开发&#xff0c;一般选择 GCC 工具链进行编译&#xff0c;示例&#xff1a; 1.mkdir helloworld 2.cd helloworld // 1.main.c #include "hello.h" int main() {say_hello();return 0; } // 2.hello.h #ifndef __HELLO_H__ #de…...

std::accumulate

std::accumulate 是 C 标准库中的一个算法&#xff0c;定义在 <numeric> 头文件中。它用于计算给定范围内元素的累积值&#xff08;通常是一个和&#xff0c;但也可以是其他类型的累积操作&#xff09;。 template< class InputIt, class T > T accumulate( Input…...

计算机网络 (33)传输控制协议TCP概述

一、定义与基本概念 TCP是一种面向连接的、可靠的、基于字节流的传输层通信协议。它工作在OSI模型的第四层&#xff0c;即传输层&#xff0c;为用户提供可靠的、有序的和无差错的数据传输服务。TCP协议与UDP协议是传输层的两大主要协议&#xff0c;但两者在设计上有明显的不同&…...

Gitee图形界面上传(详细步骤)

目录 1.软件安装 2.安装顺序 3.创建仓库 4.克隆远程仓库到本地电脑 提交代码的三板斧 1.软件安装 Git - Downloads (git-scm.com) Download – TortoiseGit – Windows Shell Interface to Git 2.安装顺序 1. 首先安装git-2.33.1-64-bit.exe&#xff0c;顺序不能搞错2. …...

【STM32-学习笔记-6-】DMA

文章目录 DMAⅠ、DMA框图Ⅱ、DMA基本结构Ⅲ、不同外设的DMA请求Ⅳ、DMA函数Ⅴ、DMA_InitTypeDef结构体参数①、DMA_PeripheralBaseAddr②、DMA_PeripheralDataSize③、DMA_PeripheralInc④、DMA_MemoryBaseAddr⑤、DMA_MemoryDataSize⑥、DMA_MemoryInc⑦、DMA_DIR⑧、DMA_Buff…...

苍穹外卖08——(涉及接收日期格式数据、ApachePOI导出报表、sql获取top10菜品数据)

营业额统计 service层 在需要处理空值、与数据库交互或使用集合时&#xff0c;Integer 、Double是更好的选择。 // 导入string工具类 import org.apache.commons.lang.StringUtils; Service // 标记该类为Spring的服务组件 Slf4j // 引入日志功能 public class Repor…...

Node.js——fs(文件系统)模块

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1f4c3;个人状态&#xff1a; 研发工程师&#xff0c;现效力于中国工业软件事业 &#x1f680;人生格言&#xff1a; 积跬步…...

【Docker】入门教程

目录 一、Docker的安装 二、Docker的命令 Docker命令实验 1.下载镜像 2.启动容器 3.修改页面 4.保存镜像 5.分享社区 三、Docker存储 1.目录挂载 2.卷映射 四、Docker网络 1.容器间相互访问 2.Redis主从同步集群 3.启动MySQL 五、Docker Compose 1.命令式安装 …...

Ubuntu中使用miniconda安装R和R包devtools

安装devtools环境包 sudo apt-get install gfortran -y sudo apt-get install build-essential -y sudo apt-get install libxt-dev -y sudo apt-get install libcurl4-openssl-dev -y sudo apt-get install libxml2.6-dev -y sudo apt-get install libssl-dev -y sudo apt-g…...

大语言模型预训练、微调、RLHF

转发&#xff0c;如有侵权&#xff0c;请联系删除&#xff1a; 1.【LLM】3&#xff1a;从零开始训练大语言模型&#xff08;预训练、微调、RLHF&#xff09; 2.老婆饼里没有老婆&#xff0c;RLHF里也没有真正的RL 3.【大模型微调】一文掌握7种大模型微调的方法 4.基于 Qwen2.…...