【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}})
}
获取图片宽高之后,创建图片元素,通过 left 和 top 将图片水平垂直居中
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
})
我们的目标就是 ChartElement:src/views/components/element/ChartElement/index.vue
然后图表那一小块是这个:src/views/components/element/ChartElement/Chart.vue,图表是通过 chartist 库实现的
import { BarChart, LineChart, PieChart } from 'chartist'
相关文章:
【PPTist】插入形状、插入图片、插入图表
一、插入形状 插入形状有两种情况,一种是插入固定的形状, 一种是插入自定义的形状。 插入固定的形状时,跟上一篇文章 绘制文本框 是一样一样的,都是调用的 mainStore.setCreatingElement() 方法,只不多传的类型不一…...
三台Centos7.9中Docker部署Redis集群
Docker部署Redis集群 1. 安装 Docker 和 Docker Compose安装 Docker:安装 Docker Compose: 2. 配置 Redis 容器和网络3. 启动 Redis 容器4. 设置 Redis 集群4.1 集群创建异常处理 5. 验证和测试总结 如果 CentOS 服务器上还没有安装 Docker 和 Docker Co…...
Entity 的材质(棋盘、条纹、网格)
Entity 的材质 普通物体的材质 import { nextTick, onMounted, ref } from vue import * as Cesium from cesium // console.log(Cesium, Cesium)const viewer ref<any>(null)onMounted(() > { ... })let material Cesium.Color.YELLOW.withAlpha(0.5)Cesium.Colo…...
MACPA:fMRI连接性分析的新工具
摘要 不同脑区的共同激活为它们之间的功能交互或连接提供了一个有价值的衡量指标。元分析连接模型(MACM)是一种经过充分验证的研究某一特定区域共激活模式的方法,该方法对基于任务的功能磁共振成像(task-fMRI)数据进行种子点(seed-based)元分析。虽然MACM是一种强大…...
JavaScript-一份你的前端入门说明书(计算机专业)
一.简介 1.起源 JavaScript 起源于 1995 年,当时它主要是为了满足网页交互的需求而被创建。它最初的设计目的是为了让网页开发者能够在网页中添加一些简单的交互效果和动态内容。在那个时期,网页大多是静态的,而 JavaScript 的出现为网页带来了新的活力。Netscape 公司的 B…...
STM32供电参考设计
STM32供电参考设计 在图中有VDD,VSS和VDDA,VSSA两种类型的供电引脚,其数据手册解释如下: 令我不解的是:VDDA和VSSA必须分别连接到VDD和VSS,这是什么意思?有大佬能够解答一下吗?…...
python+fpdf:创建pdf并实现表格数据写入
目录 创建pdf文件对象 新增页 添加自定义字体 设置字体 设置文字颜色和背景色 插入内容 换行 插入图片 保存pdf 完整代码 安装:pip install fpdf 创建pdf文件对象 from fpdf import FPDF, Alignpdf FPDF() # 创建pdf文件对象 获取边距 print(pdf.l_…...
亚远景-ASPICE评估:汽车软件项目的过程能力评价
ASPICE(Automotive SPICE)的评估对象主要是汽车软件研发过程。 这个评估过程不仅仅关注最终的软件产品,而是深入到软件开发的全生命周期中,从需求分析、设计、编码、测试到发布和维护等各个环节。 具体来说,ASPICE评…...
电脑提示directx错误导致玩不了游戏怎么办?dx出错的解决方法
想必大家都有过这样的崩溃瞬间:满心欢喜打开心仪的游戏,准备在虚拟世界里大杀四方或者畅游冒险,结果屏幕上突然弹出个 DirectX 错误的提示框,紧接着游戏闪退,一切美好戛然而止。DirectX 作为 Windows 系统下游戏运行的…...
【13】制作镜像以及重启实例
制作镜像 k8s集群 有两个镜像需要制作,一个是master节点,一个是node节点。 在master节点上成功部署了k8s的控制平面,在node节点上部署了worker节点的配置,不知道打包镜像重启之后集群的状态是什么样的。 确认集群在运行&#…...
electron 启动警告
1. 问题 当启动 electron 时,控制台警告 Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security 2. 解决方法 在主进程文件 main.js 中添加如下内容 process.env["ELECTRON_DISABLE_SECURI…...
wow-agent 学习笔记
wow-agent-课程详情 | Datawhale 前两课比较基础,无笔记 第三课 阅卷智能体这一块,曾经做过一点和AI助教相关的内容,也是用了一个prompt去进行CoT,但是风格和课程中的不太相同,在下面附上我的prompt 你是一名资深教…...
使用Cilium/eBPF实现大规模云原生网络和安全
大家读完觉得有帮助记得关注和点赞!!! 目录 抽象 1 Trip.com 云基础设施 1.1 分层架构 1.2 更多细节 2 纤毛在 Trip.com 2.1 推出时间表 2.2 自定义 2.3 优化和调整 2.3.1 解耦安装 2.3.2 避免重试/重启风暴 2.3.3 稳定性优先 2…...
“深入浅出”系列之C++:(4)回调函数
在写项目的时候遇见一个问题,现在的需求是主项目需要拿到子项目的结果来进行显示,那么如何集成呢,子项目里面有一个MainWindow类,类里 回调函数是一种通过函数指针将函数作为参数传递给另一个函数的编程技术。这种机制允许程序在特…...
Mysql--运维篇--主从复制和集群(主从复制I/O线程,SQL线程,二进制日志,中继日志,集群NDB)
一、主从复制 MySQL的主从复制(Master-Slave Replication)是一种数据冗余和高可用性的解决方案,它通过将一个或多个从服务器(Slave)与主服务器(Master)同步来实现。主从复制的基本原理是&#…...
设计模式 行为型 状态模式(State Pattern)与 常见技术框架应用 解析
状态模式(State Pattern)是一种行为型设计模式,它允许对象在内部状态改变时改变其行为,使得对象看起来好像修改了它的类。这种设计模式的核心思想是将对象的状态和行为封装成不同的状态类,通过状态对象的行为改变来避免…...
计算机网络 (38)TCP的拥塞控制
前言 TCP拥塞控制是传输控制协议(Transmission Control Protocol,TCP)避免网络拥塞的算法,是互联网上主要的一个拥塞控制措施。 一、目的 TCP拥塞控制的主要目的是防止过多的数据注入到网络中,使网络能够承受现有的网络…...
鸿蒙面试 2025-01-09
鸿蒙分布式理念?(个人认为理解就好) 鸿蒙操作系统的分布式理念主要体现在其独特的“流转”能力和相关的分布式操作上。在鸿蒙系统中,“流转”是指涉多端的分布式操作,它打破了设备之间的界限,实现了多设备…...
【关于for循环的几种写法】
关于for循环的几种写法 在 C 中,for(int i 0; i < n; i) 是一种常见的循环写法,用于遍历从 0 到 n-1 的索引。如果你希望简化这种写法,可以使用以下几种方法: 1. 使用范围 for 循环 如果你需要遍历一个容器(如数…...
Apache和PHP:构建动态网站的黄金组合
在当今的互联网世界,网站已经成为了企业、个人和机构展示自己、与用户互动的重要平台。而在这些动态网站的背后,Apache和PHP无疑是最受开发者青睐的技术组合之一。这一组合提供了高效、灵活且可扩展的解决方案,帮助您快速搭建出强大的网站&am…...
intv_ai_mk11效果展示:真实用户提问‘如何提高店铺转化率’获得4维度可执行策略
intv_ai_mk11效果展示:真实用户提问如何提高店铺转化率获得4维度可执行策略 1. 案例背景与问题描述 在电商运营中,店铺转化率是衡量经营效果的核心指标之一。某服装店铺运营人员向intv_ai_mk11 AI对话机器人提出了一个典型问题:"如何提…...
ZLMediaKit(webrtc)在CentOS7上的高效部署与常见问题解决指南
1. 环境准备与依赖安装 在CentOS7上部署ZLMediaKit(webrtc)前,需要先搞定基础环境。我遇到过不少新手直接克隆代码就开始编译,结果被各种报错劝退。下面这些依赖就像盖房子前要打的地基,缺一不可。 1.1 更新系统与基础工具 刚装好的CentOS7就…...
Python项目依赖管理:如何用pipreqs精准生成requirements.txt(附常见问题解决)
Python项目依赖管理实战:从pipreqs到高效协作的全链路优化 在Python项目开发中,依赖管理就像建筑的地基——它不显眼却决定了整个项目的稳定性。想象一下这样的场景:你花了三天时间调试一个诡异的问题,最后发现只是因为测试环境缺…...
OpenClaw配置文件详解:Qwen3.5-9B高级参数调优手册
OpenClaw配置文件详解:Qwen3.5-9B高级参数调优手册 1. 为什么需要手动调优OpenClaw配置 上周我尝试用OpenClaw自动处理一批技术文档的归档工作,发现同样的任务在不同时段完成速度差异巨大。有时30分钟就能搞定,有时却要卡顿近2小时。这促使…...
提升效率:用快马一键生成模块化openclaw控制代码库
最近在做一个机器人项目,需要控制openclaw机械爪完成各种抓取任务。刚开始自己从头写控制代码时,发现光是启动流程就要处理一堆底层细节,比如初始化通信、校准位置、设置默认参数等等,不仅重复劳动,还容易出错。后来尝…...
STM32精准延时实现与Keil调试技巧
1. 精准延时在单片机开发中的重要性在STM32等嵌入式系统开发中,精准延时是基础但至关重要的功能。我最近调试一块自制的STM32开发板时,就遇到了需要精确控制时序的场景。比如在驱动LCD屏幕时,某些控制信号需要维持15ms的精确延时,…...
第三届“数信杯”数据安全大赛wp之数据恢复
第三届“数信杯”数据安全大赛wp之数据恢复 缘起 先说实话,这道题比赛时没做出来😴 RSA题目一直是我的软肋,一般我都是放到最后去碰运气,这道题也是我第一次遇到,想借这次机会好好学习一下。 这里有2个基本概念&am…...
零基础封神!10行代码写渗透专用爬虫,一键扫遍靶场敏感资产
零基础封神!10行代码写渗透专用爬虫,一键扫遍靶场敏感资产 上一篇我们一起打破了认知壁垒,焊死了合规红线,用3行代码跑通了第一个渗透型爬虫。 很多粉丝后台私信我说,第一次跑通代码,看到命令行里打印出靶场…...
2026 codex 大模型 api 配置指南:auth.json、config.toml 与 401/超时排查
当 codex --version 已经能正常输出,很多人会以为接下来只剩下提问和改代码。但真正决定 Codex 能不能顺利进入项目的,往往是 codex 大模型 api 有没有按要求接好:只要 auth.json、config.toml 或网关地址有一点偏差,就可能马上碰…...
STM32智能展柜控制系统设计与实现
1. 项目概述在博物馆文物保存领域,环境参数的精确控制一直是个技术难点。我最近完成了一个基于STM32的智能展柜控制系统项目,这套方案能够实时监测并调节展柜内的温湿度及光照强度,为珍贵文物提供最佳保存环境。相比传统的人工监测方式&#…...
