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

vue3--手写手机屏组件

news 来源：原创 2025/7/2 7:20:05

在这里插入图片描述

<!--* 手机预览* @Author: Hanyang* @Date: 2022-12-09 09:13:00* @LastEditors: Hanyang* @LastEditTime: 2023-01-12 15:37:00
-->
<template><divclass="public-preview-mobile"ref="previewMobileRef":class="showMobile ? 'animation-show-mobile' : 'animation-hide-mobile'":style="{ ...mobileStyle, height: props.height }"><divv-show="showMask"class="priveiew-mask"ref="previewMaskRef"@mousedown="showMask = true"@mouseup="maskDisapear"@mouseleave="maskDisapear"@mousemove="maskMoveFn ? maskMoveFn($event) : () => {}"></div><divclass="switch":title="showMobile ? '点击收起手机' : '点击显示手机'"@click="switchMobile"></div><div class="liu-hair-wrap"><divclass="liu-hair"@mousedown="(showMask = true), (maskMoveFn = mobileMouseMove)"></div></div><divclass="mobile-fixed-container":class="{'fixed-container': props.isFixedContainer,}":style="{ width: props.width }"><divclass="mobile-wrap"@scroll="scrollMobile":class="{'hidden-scroll': !canScroll,}"><divclass="liu-hair-head":style="getStatusBarStyle(isImmersive, statusBarBg)"></div><slot></slot></div></div></div>
</template><script lang="ts" setup>
import { ref, watch } from "vue";
type MobileStatusInfo = "on" | "off";const props = defineProps({isOn: {//手机是否显示type: Boolean,default: true,},isImmersive: {//是否是沉浸式状态栏type: Boolean,default: false,},statusBarBg: {type: String,default: "#fff",},canScroll: {type: Boolean,default: true,},isFixedContainer: {//是否将手机内屏作为position:fixed;的屏幕视口type: Boolean,default: true,},width: {//手机宽度type: String,default: "300px",},height: {//手机高度type: String,default: "600px",},
});
const emit = defineEmits(["scroll"]);const previewMobileRef = ref();
const showMask = ref(false);
const maskMoveFn = ref<any>(null);
const showMobile = ref(true);
const mobileStyle = ref<any>(null);const getStatusBarStyle = (isImmersive: boolean, statusBarBg: string) => {const s: any = {};if (isImmersive == false) {s.background = statusBarBg;}return s;
};
const maskDisapear = () => {showMask.value = false;maskMoveFn.value = null;
};
const mobileMouseMove = (e: MouseEvent) => {const dom = previewMobileRef.value;let x_dis = parseFloat(window.getComputedStyle(dom).right) - e.movementX;let y_dis = parseFloat(window.getComputedStyle(dom).top) + e.movementY;(previewMobileRef.value as any).style.right = x_dis + "px";(previewMobileRef.value as any).style.top = y_dis + "px";showMobile.value = true;
};
const switchMobile = () => {showMobile.value = !showMobile.value;
};
//组件触发事件：删除事件
const scrollMobile = (e: any) => {emit("scroll", e);
};
/*** 外部调用方法：用于组件内鼠标按住移动所要执行的动作* maskMoveFn:执行的动作*/
const maskApear = (fn?: (event: MouseEvent) => void) => {showMask.value = true;if (fn) maskMoveFn.value = fn;
};
/*** 外部调用方法：获取手机状态 on-开机 off-关机*/
const getMobileStatus = (): MobileStatusInfo => {return showMobile.value ? "on" : "off";
};
/*** 外部调用方法：切换手机状态*/
const switchMobileStatus = (status: MobileStatusInfo, style?: any) => {return new Promise((resolve, reject) => {try {if ((status === "on" && showMobile.value) ||(status === "off" && !showMobile.value)) {resolve(1);} else {const dom = previewMobileRef.value as any;dom?.addEventListener("animationend",() => {resolve(1);},{once: true,});switch (status) {case "on":showMobile.value = true;break;case "off":showMobile.value = false;break;default:showMobile.value = true;}if (style) {mobileStyle.value = style;}}} catch (e) {reject(e);}});
};
watch(() => props.isOn,(val: Boolean) => {showMobile.value = !!val;},{ immediate: true }
);
</script>
<style lang="scss">
@use "sass:math";
.public-preview-mobile {cursor: pointer;position: fixed;display: block;top: 180px;right: 10px;z-index: 10;$LH_H: 20px; //刘海高度$M_B: 4px; //手机边框border: $M_B solid #000;border-radius: 12px;height: 600px;@keyframes hide-mobile {from {// top: 0px;}to {top: 97vh;}}@keyframes show-mobile {from {// top: 0px;}to {top: 97vh;}}&.animation-hide-mobile {animation-name: hide-mobile;animation-duration: 0.2s;animation-fill-mode: forwards;filter: brightness(0.2);}&.animation-show-mobile {animation-name: show-mobile;animation-duration: 0.2s;animation-fill-mode: forwards;animation-direction: reverse;}.priveiew-mask {position: fixed;cursor: pointer;z-index: 4023;top: 0;left: 0;right: 0;bottom: 0;}.switch {width: 60px;height: 25px;background: pink;position: absolute;right: 20px;top: -7px;border-radius: 6px;background: #000;transition: all 0.2s;&::before {content: "";position: absolute;top: -16px;left: -8px;right: -8px;bottom: 0px;z-index: 12;}&:hover {top: -9px;}&:active {top: -6px;}}.liu-hair-wrap {position: absolute;height: 20px;width: 36%;overflow: hidden;z-index: 4013;left: 50%;transform: translateX(-50%);margin-top: 0px;.liu-hair {cursor: move;display: inline-block;height: $LH_H;width: 100%;background: #000;border-radius: math.div($LH_H, 2);transform: translateY(-50%);}}.mobile-fixed-container {width: 300px;height: inherit;display: inline-block;overflow: hidden;user-select: none;background: transparent;box-sizing: border-box;&.fixed-container {transform: scale(1);}.mobile-wrap {position: relative;width: inherit;height: inherit;display: inline-block;border: $M_B solid #000;border-radius: 12px;overflow: auto;background: #fff;user-select: none;margin: -$M_B;&::-webkit-scrollbar {width: 2px;/*滚动条宽度*/height: 2px;/*滚动条高度*/cursor: pointer;}scrollbar-width: none;&.hidden-scroll {overflow-y: hidden !important;}.liu-hair-head {position: sticky;top: 0;left: 0px;right: 0px;z-index: 11;height: $LH_H;}}}
}
</style>

相关文章：

vue3--手写手机屏组件

<!--* 手机预览* Author: Hanyang* Date: 2022-12-09 09:13:00* LastEditors: Hanyang* LastEditTime: 2023-01-12 15:37:00 --> <template><divclass"public-preview-mobile"ref"previewMobileRef":class"showMobile ? animation-sh…...

编程日记 2025/7/2 7:20:05

【Elasticsearch】入门篇

Elasticsearch 入门 前言 官方地址&#xff1a;Elastic — 搜索 AI 公司 | Elastic ES 下载地址&#xff1a;Past Releases of Elastic Stack Software | Elastic 文档&#xff1a;什么是 Elasticsearch&#xff1f;|Elasticsearch 指南 简介 Elasticsearch 是一个分布式、…...

编程日记 2025/6/29 11:41:09

Unity 使用 ADB 实时查看手机运行性能

Unity 使用 ADB 实时查看手机运行性能 前言操作步骤ADB工具下载ADB工具配置手机进入开发者模式并开启USB调试使用ADB连接手机Unity打包设置使用Profiler实时查看性能情况优化建议 常见问题 前言 通过 ADB&#xff08;Android Debug Bridge&#xff09;连接安卓设备&#xff0c…...

编程日记 2025/7/2 6:11:39

蓝桥杯 1. 四平方和

四平方和 原题目链接 题目描述 四平方和定理&#xff08;又称拉格朗日定理&#xff09;指出&#xff1a; 每个正整数都可以表示为 至多 4 个正整数的平方和。 如果将 0 包括进去&#xff0c;则每个正整数都可以恰好表示为 4 个非负整数的平方和。 例如&#xff1a; 5 0 …...

编程日记 2025/7/2 5:46:59

Nginx 配置参数全解版：Nginx 反向代理与负载均衡；Nginx 配置规范与 Header 透传实践指南；Nginx 配置参数详解

Nginx 配置参数全解版&#xff1a;Nginx 反向代理与负载均衡&#xff1b;Nginx 配置规范与 Header 透传实践指南&#xff1b;Nginx 配置参数详解 Nginx 反向代理与负载均衡配置&#xff0c;Header 透传到后端应用&#xff08;参数全解版&#xff09;一、Nginx 反向代理与负载均…...

编程日记 2025/7/2 5:02:48

数据分析之技术干货业务价值​​ powerquery 分组排序后取TOP

在电商中&#xff0c;我们要对货品进行分析&#xff0c;由于所有的销售数据都在一起&#xff0c;货品信息也在一起&#xff0c;两个表建立了关系之后&#xff0c;要看每个品类的TOP款有哪些&#xff0c;每个品类的TOP款是什么要怎么做呢&#xff1f; 下面是我做数据的思路&…...

编程日记 2025/7/2 5:13:07

windows中kafka4.0集群搭建

参考文献 Apache Kafka windows启动kafka4.0&#xff08;不再需要zookeeper&#xff09;_kafka压缩包-CSDN博客 Kafka 4.0 KRaft集群部署_kafka4.0集群部署-CSDN博客 正文 注意jdk需要17版本以上的 修改D:\software\kafka_2.13-4.0.0\node1\config\server.properties配置文…...

编程日记 2025/7/2 5:19:05

数据分析案例：医疗健康数据分析

目录 数据分析案例：医疗健康数据分析1. 项目背景2. 数据加载与预处理2.1 加载数据2.2 数据清洗3. 探索性数据分析（EDA）3.1 再入院率概览3.2 按年龄分组的再入院率3.3 住院时长与再入院4. 特征工程与可视化5. 模型构建与评估5.1 数据划分5.2 训练逻辑回归5.3 模型评估6. 业务…...

编程日记 2025/7/2 6:08:47

数据分析之 商品价格分层之添加价格带

在分析货品数据的时候&#xff0c;我们会对商品的价格进行分层汇总&#xff0c;也叫价格带&#xff0c;​​ 一、价格带的定义​​ ​​价格带&#xff08;Price Band&#xff09;​​&#xff1a;将商品按价格区间划分&#xff08;如0-50元、50-100元、100-200元等&#xff…...

编程日记 2025/7/2 5:57:26

跨浏览器音频录制：实现兼容的音频捕获与WAV格式生成

在现代Web开发中&#xff0c;音频录制功能越来越受到开发者的关注。无论是在线会议、语音识别还是简单的语音留言&#xff0c;音频录制都是一个重要的功能。然而&#xff0c;实现一个跨浏览器的音频录制功能并非易事&#xff0c;因为不同浏览器对音频录制API的支持存在差异。本…...

编程日记 2025/6/29 9:19:48

JavaScript 的“世界模型”：深入理解对象 (Objects)

引言&#xff1a;超越简单值&#xff0c;构建复杂实体 到目前为止&#xff0c;我们学习的变量大多存储的是单一的值&#xff0c;比如一个数字 (let age 30;​)、一个字符串 (let name "Alice";​) 或一个布尔值 (let isActive true;​)。这对于简单场景足够了&am…...

编程日记 2025/6/29 9:19:31

【国产化之路】VPX-3U ：基于D2000 /FT2000的硬件架构到操作系统兼容

在国产化和高性能计算、嵌入式系统领域日益受到重视的今天&#xff0c;VPX3U架构以其标准化和模块化的特性广受关注。本文将从硬件架构、系统软件、接口拓展及典型应用等方面&#xff0c;深入剖析整体设计思路与工程实现&#xff0c;供友友们参考和讨论。 一、总体架构与设计目…...

编程日记 2025/6/29 11:34:41

深入探索RAG（检索增强生成）模型的优化技巧

&#x1f4cc; 友情提示&#xff1a; 本文内容由银河易创AI&#xff08;https://ai.eaigx.com&#xff09;创作平台的gpt-4o-mini模型生成&#xff0c;旨在提供技术参考与灵感启发。文中观点或代码示例需结合实际情况验证&#xff0c;建议读者通过官方文档或实践进一步确认其准…...

编程日记 2025/6/29 12:10:07

架构-软件架构设计

一、软件架构基础概念 1. 软件架构的定义 通俗理解&#xff1a;软件架构是软件系统的“骨架”&#xff0c;定义了系统的结构、行为和属性&#xff0c;就像盖房子的设计图纸&#xff0c;规划了房间布局、承重结构和功能分区。核心作用&#xff1a; 沟通桥梁&#xff1a;让技术…...

编程日记 2025/6/29 9:19:25

免费的 HTML 网页托管服务

字根云平台最近上线了一项新的服务&#xff1a; HTML 网页托管。 HTML 网页免费托管 免费HTML静态页面文件托管-字根秀秀​ www.cuobiezi.net/showshow/ 网页托管主要支持的功能&#xff1a; 1. 托管静态的 HTML 网页&#xff08;不包含图片&#xff0c;图片请使用专业图床&a…...

编程日记 2025/6/29 10:52:40

Ubuntu服务器上如何监控Oracle数据库

在 Ubuntu 服务器上监控 Oracle 数据库&#xff0c;虽然不像在 Windows 或某些企业 Linux&#xff08;如 RHEL&#xff09;那样有现成的 GUI 工具&#xff0c;但你完全可以通过命令行工具、脚本、开源监控平台来实现全面监控&#xff0c;包含&#xff1a; 数据库性能指标&#…...

编程日记 2025/6/29 10:32:09

什么是CMMI认证？CMMI评估内容？CMMI认证能带来哪些好处？

CMMI认证详解&#xff1a;概念、评估内容与核心价值 一、什么是CMMI认证&#xff1f; CMMI&#xff08;Capability Maturity Model Integration&#xff0c;能力成熟度模型集成&#xff09;是由美国卡内基梅隆大学软件工程研究所&#xff08;SEI&#xff09;开发的一套全球公…...

编程日记 2025/6/29 9:19:49

PySide6 GUI 学习笔记——常用类及控件使用方法（常用类矩阵QRectF）

文章目录 类描述构造方法主要方法1. 基础属性2. 边界操作3. 几何运算4. 坐标调整5. 转换方法6. 状态判断 类特点总结1. 浮点精度&#xff1a;2. 坐标系统&#xff1a;3. 有效性判断&#xff1a;4. 几何运算&#xff1a;5. 类型转换&#xff1a;6. 特殊处理&#xff1a; 典型应用…...

编程日记 2025/6/29 9:19:27

arm64适配系列文章-第五章-arm64环境上redis的部署

ARM64适配系列文章 第一章 arm64环境上kubesphere和k8s的部署 第二章 arm64环境上nfs-subdir-external-provisioner的部署 第三章 arm64环境上mariadb的部署 第四章 arm64环境上nacos的部署 第五章 arm64环境上redis的部署 第六章 arm64环境上rabbitmq-management的部署 第七章…...

编程日记 2025/6/29 9:19:46

Ubuntu / WSL 安装pipx

一、安装pipx 在 Ubuntu / WSL 上可以用两种方式安装&#xff0c;推荐第二种&#xff08;官方脚本&#xff09;或第三种&#xff08;pip 安装最新版本并自动配置 PATH&#xff09;。 1. apt 安装&#xff08;最快&#xff0c;但版本往往偏旧&#xff09; sudo apt update su…...

编程日记 2025/6/29 12:21:39

10天学会嵌入式技术之51单片机-day-6

第十五章 点阵LED 15.1 点阵 LED 概述 15.1.1 实物图 15.1.1 原理图 15.2 点阵 LED 静态显示 15.2.1 需求描述 使用点阵 LED 显示一排由左上到右下的斜线&#xff0c;具体效果如下图所示。 15.2.2 硬件设计 15.2.2.1 硬件原理图 根据内部原理可知&#xff0c;点阵 LED 的…...

编程日记 2025/6/29 9:22:39

【数据可视化-28】2017-2025 年每月产品零售价数据可视化分析

&#x1f9d1; 博主简介&#xff1a;曾任某智慧城市类企业算法总监&#xff0c;目前在美国市场的物流公司从事高级算法工程师一职&#xff0c;深耕人工智能领域&#xff0c;精通python数据挖掘、可视化、机器学习等&#xff0c;发表过AI相关的专利并多次在AI类比赛中获奖。CSDN…...

编程日记 2025/6/29 11:40:42

【JavaScript】`Object` 对象静态方法详解

在 JavaScript 中，Object 对象提供了许多静态方法，用于操作和处理对象。以下是一些常用的 Object.xxx 方法及其用途和示例： 1. 属性相关方法 Object.keys(obj) 返回对象自身的所有可枚举属性的键组成的数组。 const obj = {a: 1, b: 2 }; console.log(Object.keys(obj)); //…...

编程日记 2025/6/29 12:21:18

音视频之H.265/HEVC量化

H.265/HEVC系列文章&#xff1a; 1、音视频之H.265/HEVC编码框架及编码视频格式 2、音视频之H.265码流分析及解析 3、音视频之H.265/HEVC预测编码 4、音视频之H.265/HEVC变换编码 5、音视频之H.265/HEVC量化 量化 (Quantization) 是指将信号的连续取值(或大量可能的离散取…...

编程日记 2025/6/29 9:19:30

Tomcat：从零理解Java Web应用的“心脏”

目录 一、Tomcat是什么&#xff1f;为什么需要它&#xff1f; 二、Tomcat的核心架构&#xff08;餐厅运营图&#xff09; 1. 两大核心组件 2. 请求处理全流程&#xff08;从点餐到上菜&#xff09; 三、手把手搭建第一个网站&#xff08;厨房开张实录&#xff09; 环境准备…...

编程日记 2025/6/29 9:23:02

第七届能源系统与电气电力国际学术会议（ICESEP 2025)

重要信息 时间&#xff1a;2025年6月20-22日 地点&#xff1a;中国-武汉 官网&#xff1a;www.icesep.net 主题 能源系统 节能技术、能源存储技术、可再生能源、热能与动力工程 、能源工程、可再生能源技术和系统、风力发…...

编程日记 2025/6/29 12:30:57

【基础】Node.js 介绍、安装及npm 和 npx功能了解

前言 后面安装n8n要用到&#xff0c;做一点技术储备。主要是它的两个工具&#xff1a;npm 和 npx。 Node.js介绍 Node.js 是一个免费的、开源的、跨平台的 JavaScript 运行时环境&#xff0c;允许开发人员在浏览器之外编写命令行工具和服务器端脚本&#xff0c;是一个基于 C…...

编程日记 2025/6/29 9:19:29

【硬核干货】SonarQube安全功能

原文链接&#xff1a;【硬核干货】SonarQube安全功能 关于晓数神州 晓数神州坚持以“客户为中心”的宗旨&#xff0c;为客户提供专业的解决方案和技术服务&#xff0c;构建多引擎数字化体系。 核心业务1&#xff1a;聚焦DevOps全栈产品&#xff0c;打造需求管理、项目管理、开…...

编程日记 2025/6/29 9:19:33

微信小程序 tabbar底部导航栏

官方文档&#xff1a;https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar 一、常规菜单格式 在app.json 文件中配置&#xff0c;其他关键点详见官方文档&#xff0c;后续更新不规则图标的写法...

编程日记 2025/6/29 9:19:28

如何将极狐GitLab 议题导出为 CSV？

极狐GitLab 是 GitLab 在中国的发行版&#xff0c;关于中文参考文档和资料有&#xff1a; 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网 导出议题到 CSV (BASIC ALL) 您可以将问题从极狐GitLab 导出为 CSV 文件&#xff0c;这些文件将作为附件发送到您的默认通知…...

编程日记 2025/6/29 9:19:34

nodejs之Express-介绍、路由

五、Express 1、express 介绍 express 是一个基于 Node.js 平台的极简、灵活的 WEB 应用开发框架，官方网址： https://www.expressjs.com.cn/ 简单来说，express 是一个封装好的工具包，封装了很多功能，便于我们开发 WEB 应用(HTTP 服务) (1)基本使用 第一步：初始化项目并…...

编程日记 2025/6/29 11:20:51

极狐GitLab 如何从 CSV 导入议题？

极狐GitLab 是 GitLab 在中国的发行版&#xff0c;关于中文参考文档和资料有&#xff1a; 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网 从 CSV 导入议题 (BASIC ALL) 您可以通过上传包含以下列的 CSV 文件将议题导入项目&#xff1a; 名称是否必需&#xff1f;…...

编程日记 2025/6/29 10:20:23

JW01三合一传感器详解（STM32）

目录 一、介绍 二、传感器原理 1.原理图 2.引脚描述 三、程序设计 main文件 usart3.h文件 usart3.c文件 四、实验效果 五、资料获取 项目分享 一、介绍 JW01三合一检测模块是一种用于检测空气中二氧化碳浓度的传感器模块。它可以广泛应用于室内空气质量检测、智能家…...

编程日记 2025/6/29 12:28:39

23种设计模式-行为型模式之策略模式（Java版本）

Java 策略模式&#xff08;Strategy Pattern&#xff09;详解 &#x1f9e0; 什么是策略模式&#xff1f; 策略模式是一种行为型设计模式&#xff0c;它定义了一系列算法&#xff0c;把它们一个个封装起来&#xff0c;并且使它们可以互相替换。策略模式让算法独立于使用它的客…...

编程日记 2025/6/29 9:23:37

ActiveMQ 快速上手：安装配置与基础通信实践（一）

一、引言 在当今分布式系统和微服务架构盛行的时代&#xff0c;消息通信作为实现系统间解耦、异步处理和可靠传输的关键技术&#xff0c;显得尤为重要。ActiveMQ 作为一款广泛应用的开源消息中间件&#xff0c;凭借其对 JMS 规范的全面支持、丰富的特性以及出色的性能&#xf…...

编程日记 2025/6/29 11:30:14

究竟什么是自动化测试？

自动化测试是一种软件测试方法&#xff0c;旨在通过使用自动化工具和脚本来执行测试任务&#xff0c;以减少人工操作&#xff0c;提高测试效率和准确性。 以下是对自动化测试的详细介绍&#xff1a; 一、定义与特点 定义&#xff1a;自动化测试是指利用自动化工具和脚本来执…...

编程日记 2025/6/29 10:43:56

【LLM+Code】Github Copilot Agent/VsCode Agent 模式PromptTools详细解读

一、前言 github copilot agent mode现在和vscode是强绑定的关系&#xff0c; 其实是一个东西&#xff1a; https://github.blog/news-insights/product-news/github-copilot-the-agent-awakens/https://code.visualstudio.com/docs/copilot/chat/chat-agent-mode 二、Syste…...

编程日记 2025/6/29 12:19:11

IDEA将本地的JAR文件手动安装到 Maven的本地仓库

例如这是要导入的依赖&#xff1a; mvn install:install-file -DfileD:\aliyun-java-sdk-ding.jar -DgroupIdcom.aliyun -DartifactIdaliyun-java-sdk-ding -Dversion1.0.0 -Dpackagingjar-DfileD:\aliyun-java-sdk-ding.jar 含义&#xff1a;指定要安装到本地 Maven 仓库的 …...

编程日记 2025/6/29 10:26:25

redis集群的三种部署方式

一、主从同步 redis的主从同步工作原理简单概括为： 1、从服务器（Slave Server）向（主服务器，Master）发送sync（同步）命令 2、master启动后台存盘进程，并收集所有修改数据命令 3、master完成存盘后，传送整个数据文件到slave 4、slave接受数据文件，加载到内存中完成首次…...

编程日记 2025/6/29 11:42:03

【GIT】github中的仓库如何删除？

你可以按照以下步骤删除 GitHub 上的仓库&#xff08;repository&#xff09;&#xff1a; &#x1f6a8; 注意事项&#xff1a; ❗️删除仓库是不可恢复的操作&#xff0c;所有代码、issue、pull request、release 等内容都会被永久删除。 &#x1f9ed; 删除 GitHub 仓库步骤…...

编程日记 2025/6/29 12:00:11

CIFAR10图像分类学习笔记（三）---数据加载load_cifar10

新创建一个load_cifar10源文件 需要导入的包 import glob from torchvision import transforms from torch.utils.data import DataLoader ,Dataset import os #读取工具 from PIL import Image import numpy as np 01同样定义10个类别的标签名数组 label_name ["airpl…...

编程日记 2025/6/29 9:53:33

基于Matlab的车牌识别系统

1.程序简介 本模型基于MATLAB,通过编程创建GUI界面&#xff0c;基于Matlab的数字图像处理&#xff0c;对静止的车牌图像进行分割并识别&#xff0c;通过编写matlab程序对图像进行灰度处理、二值化、腐蚀膨胀和边缘化处理等&#xff0c;并定位车牌的文字&#xff0c;实现字符的…...

编程日记 2025/6/29 12:28:20

【农气项目】基于适宜度的产量预报

直接上干货&#xff08;复制到开发工具即可运行的代码&#xff09; 1. 适宜度模型及作物適宜度计算方法 2. 产量分离 3. 基于适宜度计算产量预报 1. 适宜度模型及作物適宜度计算方法 // 三基点温度配置private final double tempMin;private final double tempOpt;private f…...

编程日记 2025/6/29 12:27:38

C#中实现JSON解析器

JSON&#xff08;JavaScript Object Notation&#xff09;即 JavaScript 对象表示法&#xff0c;是一种轻量级的数据交换格式。 起源与发展 JSON 源于 JavaScript 编程语言&#xff0c;是 JavaScript 对象字面量语法的一个子集。但如今它已经独立于 JavaScript&#xff0c;成…...

编程日记 2025/6/29 11:37:46

Android studio进阶开发（四）--okhttp的网络通信的使用

我们之前学过了socket服务器&#xff0c;这次我们继续来学习网络热门编程http/https的使用与交互 1&#xff09;什么是Http协议&#xff1f; 答&#xff1a;hypertext transfer protocol&#xff08;超文本传输协议&#xff09;&#xff0c;TCP/IP协议的一个应用层协议&#x…...

编程日记 2025/6/29 10:05:46

untiy 实现点击按钮切换天空盒子

1.新建材质DaySkybox和NightSkybox 设置 ​​Shader​​ 为 Skybox/6 Sided 2.创建ui 切换按钮,编写天空 盒子的脚本 using UnityEngine; using UnityEngine.UI;public class SkyboxSwitcher : MonoBehaviour {public Material daySkybox; // 拖入白天的天空盒材质publi…...

编程日记 2025/6/29 11:42:44

Docker从0-1搭建个人云盘（支持Android iOS PC）

一、Docker位置配置【遇到再大的事&#xff0c;先备份MYSQL数据库&#xff0c;说了多少遍】 ******************************************************************************************************************************************* docker rm -f $(docker ps -a -q…...

编程日记 2025/6/29 12:15:56

Java Agent 注入 WebSocket 篇

Agent 如果要对其进行Agent注入的编写&#xff0c;需要先理解三个名字premain&#xff0c;agentmain&#xff0c;Instrumentation premain方法在 JVM 启动阶段调用&#xff0c;一般维持权限的时候不会使用 agentmain方法在 JVM 运行时调用 常用的 Instrumentation实例为代理…...

编程日记 2025/6/29 12:26:57

Linux：git和gdb/cgdb

一&#xff1a;在XShell上使用git 步骤1&#xff1a;安装git命令行 sudo yum install git 步骤2&#xff1a;注册git账户和仓库&#xff0c;并点击克隆/下载&#xff0c;把HTTPS复制 步骤3&#xff1a; 在显示屏上输入下面命令&#xff0c;然后按提示输入自己的用户名和邮箱…...

编程日记 2025/6/29 9:23:03

深度对比评测：n8n vs Coze（扣子） vs Dify - 自动化工作流工具全解析

引言 在当今数字化转型的浪潮中&#xff0c;自动化工作流工具已成为企业和个人提升效率的关键利器。n8n、Coze&#xff08;扣子&#xff09;和Dify作为三款各具特色的自动化工具&#xff0c;在开发者社区和商业用户中都引起了广泛关注。本文将为您带来这三款工具的深度对比评测…...

编程日记 2025/6/29 9:23:29