- 博客(48)
- 收藏
- 关注
RSS订阅
26原创 vue canvas标注
该代码实现了一个基于Vue的图片标注组件，支持矩形、多边形和点标记三种标注方式。组件核心功能包括：1）提供工具栏切换不同标注模式；2）支持撤销和清空操作；3）可替换背景图片；4）通过Canvas实现标注图形绘制；5）将标注结果导出为图片或Blob格式。组件采用响应式设计，自动适应图片尺寸，并存储操作历史记录以支持撤销功能。标注坐标使用归一化处理，确保在不同分辨率下保持准确性。该组件适用于图片标注、编辑等场景，可通过ref调用exportCanvasAsBlob()方法获取标注结果。
2025-11-03 16:37:43
293
原创 vue字体库使用
文章摘要：本文介绍在网页中使用自定义字体的方法：1)从指定网站下载ttf字体文件；2)通过@font-face全局引用字体文件，定义字体名称为'PangMenZhengDao'；3)在CSS选择器(如.nav)中应用该字体，并设置sans-serif为备用字体。这种方法适用于需要在网页中嵌入特殊字体的场景，确保设计一致性。（150字）
2025-11-03 16:33:30
135
原创 vue 3d环图
这段代码展示了使用Vue3和ECharts实现3D饼图的技术方案。通过ECharts核心库和ECharts-GL扩展，构建了参数方程驱动的3D饼图渲染机制。代码主要包括：1)定义3D参数方程生成器，控制扇形弧度、厚度和高度；2)创建基于数据的分段3D曲面系列；3)添加隐藏的2D饼图用于交互事件处理；4)完整的图表配置，包括图例、提示框和3D视角控制；5)响应式生命周期管理，确保图表正确初始化和资源释放。实现效果是一个带自动旋转、悬停高亮、选中突出和值提示功能的8分类3D饼图。
2025-10-29 11:02:28
115
原创 宝塔部署Docmost个人知识管理
本文介绍了Docmost协作平台的Docker部署方法。首先通过一键安装Docker，然后创建docker-compose.yml配置文件。配置要点包括：使用openssl生成64位密钥，设置PostgreSQL数据库、Redis缓存，配置163邮箱SMTP服务（需获取授权码），并开放3017端口。最后执行docker-compose命令启动服务。注意：需在安全组开放3017和465端口，且必须使用163邮箱（QQ邮箱不支持）。该平台无注册功能，用户需通过邮箱邀请加入协作。
2025-09-26 10:45:44
758
原创 canvas 图片水印
本文介绍了一个基于Vue+Element UI的图片水印工具实现方案。该工具提供图片上传、水印文本设置、样式调整（字体大小、颜色、透明度、旋转角度、间距）等功能，支持实时预览并下载带水印的图片。核心功能通过Canvas API实现，包含图片处理、水印网格绘制等关键方法。界面采用响应式设计，包含上传区、控制面板和预览区，具有良好的用户体验。技术特点包括：前端图片处理、异步操作优化、预设颜色选择、组件化开发等，适合需要批量添加水印的场景使用。
2025-09-24 13:42:29
216
原创 canvas田字格签名
本文介绍了一个基于Vue 3的组合式API实现的签名组件，主要特点包括：1）采用原生Canvas实现签名功能，通过SVG网格辅助定位；2）支持高DPI适配，解决移动端显示模糊问题；3）实现撤销/清空功能，基于历史记录管理；4）兼容鼠标和触摸事件；5）实时预览签名效果。组件包含签名区域和预览区域，通过响应式设计适配不同屏幕尺寸。核心代码处理了Canvas初始化、绘制逻辑、事件监听和设备像素比适配等关键技术点，提供了流畅的签名体验。
2025-09-24 11:35:41
498
原创 vue 生成二维码
本文介绍了一个基于Vue和Element Plus的二维码生成器组件，具有以下功能特点：1.支持普通二维码和带Logo二维码两种类型；2.提供尺寸调节(100-500px)、容错级别(L/M/Q/H)和颜色设置(前景色/背景色)等自定义选项；3.实现二维码预览、下载和复制功能；4.采用响应式设计，包含表单验证和错误处理。组件使用QRCode库生成二维码，通过Canvas处理Logo叠加，并整合了Element Plus的上传、滑块、颜色选择器等UI组件，提供良好的用户交互体验。
2025-09-24 10:16:50
118
原创 vue 图片编辑功能
本文实现了一个基于tui-image-editor的图片编辑器组件，包含以下核心功能：1. 集成图片编辑器的初始化配置，支持中文界面和自定义样式；2. 提供图片编辑功能包括裁剪、旋转、绘图、添加文字等；3. 实现保存功能，将编辑后的图片转为Base64格式并生成Blob对象；4. 添加预览对话框，支持用户确认后再保存；5. 采用Element UI组件构建界面，包含按钮、对话框等交互元素。组件结构清晰，包含template模板、script逻辑和style样式三部分，实现了完整的图片编辑和保存流程。
2025-09-24 10:15:10
428
原创 vue3 图片预览
本文介绍了如何在Vue3中使用viewer.js实现图片查看功能。通过指令方式初始化Viewer实例，在mounted钩子中创建查看器，beforeUnmount钩子中销毁实例。代码展示了如何绑定图片数组、隐藏容器，并通过按钮点击触发图片查看。组件使用了TypeScript和Composition API，包含图片容器引用、图片数据源和显示方法，实现了一个简单的图片查看器功能。
2025-09-24 10:12:56
91
原创 vue3截屏及预览
本文介绍了一个基于Vue 3和Element Plus的屏幕截图工具实现方案。该工具提供区域截图、全屏截图和截图历史管理功能，支持预览、下载、复制和删除操作。主要技术特点包括：1)使用js-web-screen-shot和html2canvas双方案实现截图功能；2)采用响应式设计，适配不同设备；3)实现本地存储保存截图历史；4)提供完善的错误处理和用户反馈。工具界面采用现代化设计，包含渐变背景、卡片布局和交互动效，同时考虑到跨域图片加载等细节问题。
2025-09-23 18:01:57
308
原创 仿大疆轮播图
这段代码实现了一个基于Swiper的Vue轮播组件，主要功能包括： 使用Swiper创建可循环的3D轮播效果，默认显示3张幻灯片 中间幻灯片突出显示(50vw宽度)，两侧幻灯片缩小(25vw宽度) 底部添加导航点指示器，点击可跳转到对应幻灯片 支持触摸滑动和点击切换功能 通过@swiper和@slideChange事件监听轮播状态变化 使用动态样式控制当前激活幻灯片的视觉效果 组件包含完整的模板、脚本和样式部分，安装swiper依赖后即可使用。
2025-08-31 17:20:03
190
原创 vue 一键打包上传
本文介绍了一个自动化部署Vue项目的gulp工作流，主要实现以下功能：1）在npm run build后自动压缩dist文件夹为zip包；2）通过SCP将压缩包上传至服务器指定目录；3）在服务器端自动解压并清理临时文件；4）最后删除本地压缩包。配置包括gulpfile.js文件的编写（使用gulp-ssh和archiver模块）、服务器连接参数设置，以及修改package.json的build命令。部署时需安装gulp、gulp-ssh和archiver依赖，首次连接需确认服务器指纹，后续只需输入密码即可完
2025-08-25 23:20:29
404
原创 vue3 +天地图
Vue集成天地图API开发指南 本文介绍如何在Vue项目中集成天地图API，实现地图基本功能与高级应用。 核心功能实现 基础配置：通过pnpm安装vue-tianditu依赖，在main.ts中初始化地图实例 地图控件：支持自定义控件、版权信息显示等功能 区域绘制：实现地图描边、区域高亮、边界绘制等功能 工具集成：提供标点、画线、画面、画圆等绘图工具 高级功能 区域高亮：支持点击区域动态高亮显示 密集点处理：实现海量数据点的高效渲染 边界计算：自动计算区域面积和周长 交互优化：添加鼠标悬停效果和点击事件处理
2025-08-11 17:43:46
1272
原创 天地图，cesium，leaflet
本文介绍了基于Vue.js和多种地图库（Cesium、Leaflet、天地图）实现的地理信息可视化系统。系统包含三个地图组件：CesiumMap提供3D地球视图，LeafletMap支持交互式2D地图操作，TdMap集成天地图API展示卫星影像。各组件实现了区域边界绘制、信息弹窗、无人机管理等功能，并开发了边界高亮、随机点生成、面积测量等实用工具。系统采用模块化设计，通过pnpm管理依赖，vite构建，支持动态切换地图类型，为林业资源管理和无人机巡检提供可视化解决方案。
2025-08-09 16:28:54
276
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人