使用Java绘制图片边框，解决微信小程序map组件中marker与label层级关系问题，label增加外边框后显示不能置与marker上面

今天上线的时候发现系统不同显示好像不一样，苹果手机打开的时候是正常的，但是一旦用安卓手机打开就会出现label不置顶的情况。尝试了很多种办法，也在官方查看了map相关的文档，发现并没有给label设置zIndex的属性，只看到了一个叫什么碰撞类型的属性，但是这个东西设置了如果两个目标有接触就会被隐藏掉，并不是我们想要的结果。

在这里插入图片描述
想了一下，如果我们不使用label生成边框呢，直接在服务器那边把图片绘制成有边框的不就好了，这样子只用marker就行了，就能得到iOS的效果了

问题截图

在这里插入图片描述

原本js代码

getBallCourtInfoByPoint(info).then((res) => {const len = res.length;for (let i = 0; i < len; i++) {const element = res[i];//获取质量最小的图片用于展示let newUrl = element.ballCourtImageList[0].ballCourtImage.replace(/(\.(jpg|jpeg|png|gif))$/, '-min100\$1');element['id'] = Number(element.id)element['markerId'] = Number(element.id)element['title'] = element.ballCourtNameelement['latitude'] = Number(element.lat)element['longitude'] = Number(element.lng)element['lat'] = Number(element.lat)element['lng'] = Number(element.lng)element['iconPath'] = newUrlelement['width'] = 38element['height'] = 38let label = {borderRadius: 8,borderWidth: 4,borderColor: '#fff',width: 38,height: 38,anchorX: -18,anchorY: -36,}element['label'] = label
});

在后端绘制好图片，编写ImageWithRoundedCorners类

import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.geom.RoundRectangle2D;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;public class ImageWithRoundedCorners {public static void main(String[] args) {try {// 加载原始图像BufferedImage originalImage = ImageIO.read(new File("C:\\Users\\Admin\\Desktop\\feitu\\img100\\tmp_8abe0efd9e58dfd1608a6f9affd987ef-e67efe7a-3fd8-482f-8f5d-30e686491a73.jpg"));// 设置padding和圆角半径int padding = 50; // 白色圆角区域的内边距（可以根据需求调整）int cornerRadius = 120; // 圆角的半径// 将图像裁剪成正方形，设置宽高400*400 （注意：一定要固定宽高）BufferedImage squareImage = cropToSquare(originalImage, 400, 400);// 创建带padding的圆角图像BufferedImage paddedRoundedImage = createPaddedRoundedImage(squareImage, cornerRadius, padding, Color.WHITE);// 保存结果图像ImageIO.write(paddedRoundedImage, "PNG", new File("C:\\Users\\Admin\\Desktop\\feitu\\img100\\1tmp_8abe0efd9e58dfd1608a6f9affd987ef-e67efe7a-3fd8-482f-8f5d-30e686491a73.jpg"));} catch (IOException e) {e.printStackTrace();}}//调用时候使用这个方法，把main注释掉
//    public static BufferedImage startImageWithRounded(BufferedImage originalImage) {
//
//        // 设置padding和圆角半径
//        int padding = 50; // 白色圆角区域的内边距（可以根据需求调整）
//        int cornerRadius = 120; // 圆角的半径
//
//        // 将图像裁剪成正方形，设置宽高400*400 （注意：一定要固定宽高）
//        BufferedImage squareImage = cropToSquare(originalImage, 400, 400);
//
//        // 创建带padding的圆角图像
//        BufferedImage paddedRoundedImage = createPaddedRoundedImage(squareImage, cornerRadius, padding, Color.WHITE);
//
//        return paddedRoundedImage;
//
//    }public static BufferedImage cropToSquare(BufferedImage originalImage, int targetWidth, int targetHeight) {int width = originalImage.getWidth();int height = originalImage.getHeight();// 计算目标区域与图像的宽高比double widthRatio = (double) targetWidth / width;double heightRatio = (double) targetHeight / height;// 选择较大的比例来保持图像的长宽比double scaleRatio = Math.max(widthRatio, heightRatio); // 使用较大的比例// 计算缩放后的图像尺寸int newWidth = (int) (width * scaleRatio);int newHeight = (int) (height * scaleRatio);// 创建一个新的图像用于缩放BufferedImage scaledImage = new BufferedImage(newWidth, newHeight, originalImage.getType());Graphics2D g2d = scaledImage.createGraphics();g2d.drawImage(originalImage, 0, 0, newWidth, newHeight, null);g2d.dispose();// 创建目标图像（固定宽高）BufferedImage finalImage = new BufferedImage(targetWidth, targetHeight, originalImage.getType());Graphics2D g2dFinal = finalImage.createGraphics();// 计算裁剪区域的位置，居中显示int xOffset = (newWidth - targetWidth) / 2;int yOffset = (newHeight - targetHeight) / 2;// 将缩放后的图像裁剪并绘制到目标图像上g2dFinal.drawImage(scaledImage, -xOffset, -yOffset, null);g2dFinal.dispose();return finalImage;}// 创建带padding和圆角的图像public static BufferedImage createPaddedRoundedImage(BufferedImage originalImage, int cornerRadius, int padding, Color backgroundColor) {int originalWidth = originalImage.getWidth();int originalHeight = originalImage.getHeight();// 计算新图像的宽度和高度，包含paddingint newWidth = Math.max(originalWidth, originalHeight) + 2 * padding; // 选择最大宽度或高度，确保裁剪时是正方形int newHeight = newWidth;  // 确保是正方形的裁剪区域// 动态调整cornerRadius，确保不会超过图像的宽度或高度的一半int maxCornerRadius = Math.min(originalWidth, originalHeight) / 2;cornerRadius = Math.min(cornerRadius, maxCornerRadius);  // 防止圆角半径太大// 创建一个新的BufferedImage来包含带有padding的图像BufferedImage paddedRoundedImage = new BufferedImage(newWidth, newHeight, BufferedImage.TYPE_INT_ARGB);// 获取Graphics2D对象Graphics2D g2d = paddedRoundedImage.createGraphics();// 启用抗锯齿渲染提示g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); // 启用抗锯齿g2d.setRenderingHint(RenderingHints.KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BICUBIC); // 设置高质量插值g2d.setRenderingHint(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY); // 优化质量// 填充背景颜色g2d.setColor(backgroundColor);g2d.fillRoundRect(0, 0, newWidth, newHeight, cornerRadius, cornerRadius); // 绘制带圆角的背景// 设置裁剪区域为圆角矩形，确保裁剪区域大小是填充后的正方形区域g2d.setClip(new RoundRectangle2D.Double(padding, padding, originalWidth, originalHeight, cornerRadius, cornerRadius));// 在新的图像上绘制原始图像（原图绘制到内边距后的区域）g2d.drawImage(originalImage, padding, padding, null);// 清理资源g2d.dispose();return paddedRoundedImage;}}

在这里插入图片描述

这个时候我们只需要读取生成好的图片即可，直接使用marker把label注释即可。

在这里插入图片描述

修改后的js代码

getBallCourtInfoByPoint(info).then((res) => {const len = res.length;for (let i = 0; i < len; i++) {const element = res[i];//获取质量最小的图片用于展示let newUrl = element.ballCourtImageList[0].ballCourtImage.replace(/(\.(jpg|jpeg|png|gif))$/, '-min100\$1');element['id'] = Number(element.id)element['markerId'] = Number(element.id)element['title'] = element.ballCourtNameelement['latitude'] = Number(element.lat)element['longitude'] = Number(element.lng)element['lat'] = Number(element.lat)element['lng'] = Number(element.lng)element['iconPath'] = newUrlelement['width'] = 38element['height'] = 38
//    let label = {
//      borderRadius: 8,
//      borderWidth: 4,
//      borderColor: '#fff',
//      width: 38,
//      height: 38,
//      anchorX: -18,
//      anchorY: -36,
//    }
//    element['label'] = label
});

还有一个问题，就是微信小程序读取较大的图片的时候会非常的慢，比如1M左右的图片就非常的慢了。我这里使用了MinIO文件系统存储图片，我会将用户上传的图片分割成两张图片，一张是原图，另一张是质量最小的图片，大概就是几十KB，读取的时候只需要读取几十KB的图片即可，等到用户查看详情再读取原图，所以为什么我这里读取了-min64结尾的图片。

//获取质量最小的图片用于展示
let newUrl = element.ballCourtImageList[0].ballCourtImage.replace(/(\.(jpg|jpeg|png|gif))$/, '-min100\$1');

详细请参考我的另一篇MinIO文章：https://blog.csdn.net/weixin_44912902/article/details/140353870

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/472867.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

微信小程序 https://thirdwx.qlogo.cn 不在以下 downloadFile 合法域名列表中

微信小程序 https://thirdwx.qlogo.cn 不在以下 downloadFile 合法域名列表中

授权登录后&#xff0c;拿到用户头像进行加载&#xff0c;但报错提示&#xff1a; https://thirdwx.qlogo.cn 不在以下 downloadFile 合法域名列表中 解决方法一&#xff08;未完全解决&#xff0c;临时处理&#xff09;&#xff1a;在微信开发者工具将不校验...勾上就可以访问…
阅读更多...
【HAProxy09】企业级反向代理HAProxy高级功能之压缩功能与后端服务器健康性监测

【HAProxy09】企业级反向代理HAProxy高级功能之压缩功能与后端服务器健康性监测

HAProxy 高级功能 介绍 HAProxy 高级配置及实用案例 压缩功能 对响应给客户端的报文进行压缩&#xff0c;以节省网络带宽&#xff0c;但是会占用部分CPU性能 建议在后端服务器开启压缩功能&#xff0c;而非在HAProxy上开启压缩 注意&#xff1a;默认Ubuntu的包安装nginx开…
阅读更多...
zabbix7.0实操指南：基于麒麟V10操作系统部署zabbix7.0

zabbix7.0实操指南：基于麒麟V10操作系统部署zabbix7.0

在当今信息技术飞速发展的时代&#xff0c;企业对于IT基础设施的监控管理需求日益增长。为了确保系统的稳定性和高效性&#xff0c;我们需要一个强大的监控工具来实时监控各种硬件和软件资源的状态。Zabbix作为一个开源的企业级监控解决方案&#xff0c;因其强大的功能和灵活的…
阅读更多...
Android笔记(三十七)：封装一个RecyclerView Item曝光工具——用于埋点上报

Android笔记(三十七)：封装一个RecyclerView Item曝光工具——用于埋点上报

背景 项目中首页列表页需要统计每个item的曝光情况&#xff0c;给产品运营提供数据报表分析用户行为&#xff0c;于是封装了一个通用的列表Item曝光工具&#xff0c;方便曝光埋点上报 源码分析 核心就是监听RecyclerView的滚动&#xff0c;在滚动状态为SCROLL_STATE_IDLE的时…
阅读更多...
微服务瞎写

微服务瞎写

1.微服务解决的问题 1、如何发现新节点以及检查各节点的运行状态&#xff1f; 2、如何发现服务及负载均衡如何实现&#xff1f; 3、服务间如何进行消息通信&#xff1f; 4、如何对使用者暴露服务API&#xff1f; 5、如何集中管理各节点配置文件&#xff1f; 6、如何收集各…
阅读更多...
群控系统服务端开发模式-应用开发-前端图片格式功能开发

群控系统服务端开发模式-应用开发-前端图片格式功能开发

一、添加视图 在根目录下src文件夹下views文件夹下param文件夹下grade文件夹下&#xff0c;新建index.vue&#xff0c;代码如下 <template><div class"app-container"><div class"filter-container" style"float:left;"><…
阅读更多...
创建vue+electron项目流程

创建vue+electron项目流程

一个vue3和electron最基本的环境搭建步骤如下&#xff1a;// 安装 vite vue3 vite-plugin-vue-setup-extend less normalize.css mitt pinia vue-router npm create vuelatest npm i vite-plugin-vue-setup-extend -D npm i less -D npm i normalize.css -S &#xff0…
阅读更多...
Android Studio 控制台输出的中文显示乱码

Android Studio 控制台输出的中文显示乱码

1. Android Studio 控制台输出的中文显示乱码 1.1. 问题 安卓在调试阶段&#xff0c;需要查看app运行时的输出信息、出错提示信息。乱码&#xff0c;会极大的阻碍开发者前进的信心&#xff0c;不能及时的根据提示信息定位问题&#xff0c;因此我们需要查看没有乱码的打印信息。…
阅读更多...
常见的测试方法

常见的测试方法

软件测试是软件⽣命周期中的⼀个重要环节&#xff0c;具有较⾼的复杂性&#xff0c;对于软件测试&#xff0c;可以从不同的⻆度加以分类&#xff0c;使开发者在软件开发过程中的不同层次、不同阶段对测试⼯作进⾏更好的执⾏和管理测试的分类⽅法。 按照测试目标分类 界面测试…
阅读更多...
Linux驱动开发第2步_“物理内存”和“虚拟内存”的映射

Linux驱动开发第2步_“物理内存”和“虚拟内存”的映射

“新字符设备的GPIO驱动”和“设备树下的GPIO驱动”都要用到寄存器地址&#xff0c;使用“物理内存”和“虚拟内存”映射时&#xff0c;非常不方便&#xff0c;而pinctrl和gpio子系统的GPIO驱动&#xff0c;非常简化。因此&#xff0c;要重点学习pinctrl和gpio子系统下的GPIO驱…
阅读更多...
【0x001C】HCI_Write_Page_Scan_Activity详解

【0x001C】HCI_Write_Page_Scan_Activity详解

目录 一、命令概述 二、命令格式和参数说明 2.1. HCI_Write_Page_Scan_Activity命令格式 2.2. Page_Scan_Interval 2.3. Page_Scan_Window 三、响应事件及参数说明 3.1. HCI_Command_Complete事件 3.2. Status 3.3. 示例 四、命令执行流程 4.1. 命令发起阶段（主机端…
阅读更多...
【AI图像生成网站Golang】雪花算法

【AI图像生成网站Golang】雪花算法

AI图像生成网站 目录 一、项目介绍 二、雪花算法 三、JWT认证与令牌桶算法 四、项目架构(等待更新) 五、图床上传与图像生成API搭建(等待更新) 六、项目测试与调试(等待更新) 雪花算法 雪花算法 (Snowflake) 是一种高效、可扩展的分布式唯一ID生成算法&#xff0c;最早…
阅读更多...
JMeter与大模型融合应用之JMeter日志分析服务化实战应用

JMeter与大模型融合应用之JMeter日志分析服务化实战应用

JMeter与大模型融合应用之JMeter日志分析服务化 引言 在当今的互联网时代，网站和应用程序的性能直接影响到用户的体验和业务的成功。为了保证系统的稳定性和高效性，性能测试成为了软件开发过程中的一个重要环节。在这其中，Apache JMeter作为一款开源的性能测试工具，凭借其…
阅读更多...
Docker环境搭建Cloudreve网盘服务（附shell脚本一键搭建）

Docker环境搭建Cloudreve网盘服务（附shell脚本一键搭建）

Docker搭建Cloudreve Cloudreve介绍&#xff1a; Cloudreve 是一个基于 ThinkPHP 框架构建的开源网盘系统&#xff0c;旨在帮助用户以较低的成本快速搭建起既能满足个人也能满足企业需求的网盘服务。Cloudreve 支持多种存储介质&#xff0c;包括但不限于本地存储、阿里云OSS、…
阅读更多...
浪浪云轻量服务器搭建vulfocus网络安全靶场

浪浪云轻量服务器搭建vulfocus网络安全靶场

什么是网络安全靶场 网络安全靶场是一个模拟真实网络环境的训练平台&#xff0c;旨在为网络安全专业人员提供一个安全的环境来测试和提高他们的技能。靶场通常包括各种网络设备、操作系统、应用程序和安全工具&#xff0c;允许用户在其中进行攻击和防御练习。以下是网络安全靶…
阅读更多...
对称加密算法DES的实现

对称加密算法DES的实现

一、实验目的 1、了解对称密码体制基本原理 2、掌握编程语言实现对称加密、解密 二、实验原理 DES 使用一个 56 位的密钥以及附加的 8 位奇偶校验位&#xff0c;产生最大 64 位的分组大小。这是一个迭代的分组密码&#xff0c;使用称为 Feistel 的技术&#xff0c;其中将加密…
阅读更多...
【linux学习指南】VSCode部署Ubantu云服务器，与Xshell进行本地通信文件编写

【linux学习指南】VSCode部署Ubantu云服务器，与Xshell进行本地通信文件编写

文章目录 &#x1f4dd;前言&#x1f320; 步骤&#x1f309;测试同步 &#x1f6a9;总结 &#x1f4dd;前言 本文目的是讲使用Vscode连接Ubantu,与本地Xshell建立通信同步文件编写。 查看本机系统相关信息&#xff1a; cat /etc/lsb*DISTRIB_IDUbuntu: 表示这是 Ubuntu 发行…
阅读更多...
实战：一文讲透模糊匹配的三种方式的区别

实战：一文讲透模糊匹配的三种方式的区别

在 SQL 查询中，模糊查询是我们常用的工具之一。LIKE 关键字配合 % 符号，可以实现前缀匹配、后缀匹配和包含匹配等多种查询方式。然而，不同的匹配方式对查询性能会有显著影响。本文将详细探讨在 SQL 查询中，字符串前后加 % 与只在后面加 % 的性能差异及其应用场景。 一、SQL…
阅读更多...
利用Blackbox AI让编程更轻松

利用Blackbox AI让编程更轻松

引言 随着人工智能技术的发展&#xff0c;AI已经成为工作中不可缺少的工具之一。俗话讲“术业有专攻”&#xff0c;对AI来说当然也是如此。由于训练集、调教等方面的差别&#xff0c;不同的AI适用的工作也不尽相同。在编程辅助方面&#xff0c;已经有一系列比较成熟的平台&…
阅读更多...
Vue学习记录03

Vue学习记录03

响应式基础 声明响应式状态 ref() 在组合式API中&#xff0c;推荐使用ref()函数来声明响应式状态&#xff1a; import { ref } from vueconst count ref(0) ref()接收参数&#xff0c;并将其包裹在一个带有.value属性的ref对象中返回&#xff1a; const count ref(0)con…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023