使用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.mzph.cn/pingmian/60593.shtml

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

相关文章

Redisson的可重入锁

Redisson的可重入锁

初始状态&#xff1a; 表示系统或资源在没有线程持有锁的情况下的状态&#xff0c;任何线程都可以尝试获取锁。 线程 1 获得锁&#xff1a; 线程 1 首次获取了锁并进入受保护的代码区域。 线程 1 再次请求锁&#xff1a; 在持有锁的情况下&#xff0c;线程 1 再次请求锁&a…
阅读更多...
三周精通FastAPI：37 包含 WSGI - Flask，Django，Pyramid 以及其它

三周精通FastAPI：37 包含 WSGI - Flask，Django，Pyramid 以及其它

官方文档&#xff1a;https://fastapi.tiangolo.com/zh/advanced/wsgi/ 包含 WSGI - Flask&#xff0c;Django&#xff0c;其它 您可以挂载多个 WSGI 应用&#xff0c;正如您在 Sub Applications - Mounts, Behind a Proxy 中所看到的那样。 为此, 您可以使用 WSGIMiddlewar…
阅读更多...
Swagger UI

Swagger UI

Swagger UI 是一个开源工具&#xff0c;用于可视化、构建和交互式地探索 RESTful API。 它是 Swagger 生态系统的一部分&#xff0c;Swagger 是一套用于描述、生成、调用和可视化 RESTful Web 服务的工具和规范。 Swagger UI 可以自动生成 API 文档&#xff0c;并提供一个交互…
阅读更多...
thinkphp6 --数据库操作 增删改查

thinkphp6 --数据库操作 增删改查

一、数据库连接配置 如果是本地测试&#xff0c;它会优先读取 .env 配置&#xff0c;然后再读取 database.php 的配置&#xff1b; 如果禁用了 .env 配置&#xff0c;则会读取数据库连接的默认配置&#xff1a; # .env文件&#xff0c;部署服务器&#xff0c;请禁用我 我们可以…
阅读更多...
【蓝桥等考C++真题】蓝桥杯等级考试C++组第13级L13真题原题(含答案)-最大的数

【蓝桥等考C++真题】蓝桥杯等级考试C++组第13级L13真题原题(含答案)-最大的数

CL13 最大的数(20 分) 输入一个有 n 个无重复元素的整数数组 a&#xff0c;输出数组中最大的数。提示&#xff1a;如使用排序库函数 sort()&#xff0c;需要包含头文件#include 。输入&#xff1a; 第一行是一个正整数 n(2<n<20)&#xff1b; 第二行包含 n 个不重复的整…
阅读更多...
让Git走代理

让Git走代理

有时候idea提交代码或者从github拉取代码&#xff0c;一直报错超时或者:Recv failure: Connection was reset,下面记录一下怎么让git走代理从而访问到github。 1.打开梯子 2.打开网络和Internet设置 3.设置代理 记住这个地址和端口 4.打开git bash终端 输入以下内容 git c…
阅读更多...
vivo 游戏中心包体积优化方案与实践

vivo 游戏中心包体积优化方案与实践

作者&#xff1a;来自 vivo 互联网大前端团队- Ke Jie 介绍 App 包体积优化的必要性&#xff0c;游戏中心 App 在实际优化过程中的有效措施&#xff0c;包括一些优化建议以及优化思路。 一、包体积优化的必要性 安装包大小与下载转化率的关系大致是成反比的&#xff0c;即安装…
阅读更多...
Struts扫盲

Struts扫盲

Struts扫盲 这里的struts是struts1。以本文记录我的那些复习JavaEE的痛苦并快乐的晚上 Struts是什么 框架的概念想必大家都清楚&#xff0c;框架即“半成品代码”&#xff0c;是为了简化开发而设计的。一个项目有许多分层&#xff0c;拿一个MVC架构的Web应用来说&#xff0c;有…
阅读更多...
【AiPPT-注册/登录安全分析报告-无验证方式导致安全隐患】

【AiPPT-注册/登录安全分析报告-无验证方式导致安全隐患】

前言 由于网站注册入口容易被机器执行自动化程序攻击&#xff0c;存在如下风险&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露&#xff0c;不符合国家等级保护的要求。短信盗刷带来的拒绝服务风险 &#xff0c;造成用户无法登陆、注册&#xff0c;大量收到垃圾短信的…
阅读更多...
自动驾驶系列—从数据采集到存储：解密自动驾驶传感器数据采集盒子的关键技术

自动驾驶系列—从数据采集到存储：解密自动驾驶传感器数据采集盒子的关键技术

&#x1f31f;&#x1f31f; 欢迎来到我的技术小筑&#xff0c;一个专为技术探索者打造的交流空间。在这里&#xff0c;我们不仅分享代码的智慧&#xff0c;还探讨技术的深度与广度。无论您是资深开发者还是技术新手&#xff0c;这里都有一片属于您的天空。让我们在知识的海洋中…
阅读更多...
【月之暗面kimi-注册/登录安全分析报告】

【月之暗面kimi-注册/登录安全分析报告】

前言 由于网站注册入口容易被机器执行自动化程序攻击&#xff0c;存在如下风险&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露&#xff0c;不符合国家等级保护的要求。短信盗刷带来的拒绝服务风险 &#xff0c;造成用户无法登陆、注册&#xff0c;大量收到垃圾短信的…
阅读更多...
时序预测 | 改进图卷积+informer时间序列预测，pytorch架构

时序预测 | 改进图卷积+informer时间序列预测，pytorch架构

时序预测 | 改进图卷积informer时间序列预测&#xff0c;pytorch架构 目录 时序预测 | 改进图卷积informer时间序列预测&#xff0c;pytorch架构预测效果基本介绍参考资料 预测效果 基本介绍 改进图卷积informer时间序列预测代码 CTR-GC卷积,informer&#xff0c;CTR-GC 图卷积…
阅读更多...
从入门到精通：一文掌握 Dockerfile 的用法！（多阶段构建与缓存优化）

从入门到精通：一文掌握 Dockerfile 的用法！（多阶段构建与缓存优化）

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 Dockerfile基础用法 📒📝 什么是 Dockerfile？📝 Dockerfile 的常见指令🔖 构建指令🔖 命令指令🎈 完整示例：构建一个 Python Flask 应用🔖 1. 项目结构🔖 2. 编写 Dockerfile🔖 3. 构建和运行 Docker 镜像�…
阅读更多...
Go语言开发基于SQLite数据库实现用户表修改接口(四)

Go语言开发基于SQLite数据库实现用户表修改接口(四)

背景 上一章 Go语言开发基于SQLite数据库实现用户表查询详情接口(三) 这一章我们实现用户表的修改接口 代码实现 mapper层 type UserMapper interface {UpdateById(user *model.User, id uint64) error}type userMapper struct { }func (m *userMapper) UpdateById(user *m…
阅读更多...
【C++学习（35）】在Linux中基于ucontext实现C++实现协程（Coroutine），基于C++20的co_await 协程的关键字实现协程

【C++学习（35）】在Linux中基于ucontext实现C++实现协程（Coroutine），基于C++20的co_await 协程的关键字实现协程

文章目录 为什么使用协程协程的理解协程优势协程的原语操作yield 与 resume 是一个switch操作&#xff08;三种实现方式&#xff09;&#xff1a; 基于 ucontext 的协程基于 XFiber 库的操作1 包装上下文2 XFiber 上下文调度器2.1 CreateFiber2.2 Dispatch 基于C20的co_return …
阅读更多...
844.比较含退格的字符串

844.比较含退格的字符串

java用 O&#xff08;1&#xff09;空间这个方法&#xff0c;容易挺多bug的… O&#xff08;1&#xff09;空间 #&#xff1a;删除前一个字符 》 从后面开始判断&#xff08;这样可以用跳过的思想&#xff09;不能使用两次 i- - 来处理 # 的操作&#xff0c;会造成误删了前面…
阅读更多...
大数据实训室建设的必要性

大数据实训室建设的必要性

一、大数据发展的背景 大数据作为当今信息技术领域的核心驱动力&#xff0c;正在深刻地改变着社会的各个方面。它不仅仅是指数据量庞大&#xff0c;更重要的是指数据的多样性、实时性和复杂性。随着云计算、物联网等技术的迅猛发展&#xff0c;大数据已成为推动经济社会发展的…
阅读更多...
MyBatis——增删查改（XML 方式）

MyBatis——增删查改（XML 方式）

1. 查询 1.1. 简单查询 使用注解的方式主要是完成一些简单的增删查改功能&#xff0c;如果要实现复杂的 SQL 功能&#xff0c;还是建议使用 XML 来配置映射语句&#xff0c;将 SQL 语句写在 XML 配置文件中 如果要操作数据库&#xff0c;需要做以下的配置&#xff0c;与注解…
阅读更多...
K8S如何基于Istio实现全链路HTTPS

K8S如何基于Istio实现全链路HTTPS

K8S如何基于Istio实现全链路HTTPS Istio 简介Istio 是什么？为什么选择 Istio？Istio 的核心概念Service Mesh(服务网格)Data Plane(数据平面)Sidecar Mode(边车模式)Ambient Mode(环境模式)Control Plane(控制平面)Istio 的架构与组件Envoy ProxyIstiod其他组件Istio 的流量管…
阅读更多...
51c大模型~合集44

51c大模型~合集44

我自己的原文哦~ https://blog.51cto.com/whaosoft/11884382 #DR4SR 最佳学生论文解读&#xff0c;中科大、华为诺亚&#xff1a;序列推荐新范式DR4SR 本工作由认知智能全国重点实验室 IEEE Fellow 陈恩红团队与华为诺亚方舟实验室完成。陈恩红教授团队深耕数据挖掘、机器学…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023