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

devtools/2024/11/18 9:52:39/

今天上线的时候发现系统不同显示好像不一样,苹果手机打开的时候是正常的,但是一旦用安卓手机打开就会出现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.ppmy.cn/devtools/134929.html

相关文章

ubuntu没有了有线网络如何修复

今天打开ubuntu之后发现有线网络连接没有了&#xff0c;如下图&#xff0c;此时是修复好之后的&#xff0c;“有线”部分存在&#xff0c;出现问题时是不存在的 此时只需要修改NetworkManager.conf配置文件&#xff0c;将managedfalse更改为managedtrue,保存退出就可以了 sudo…

OceansGallerie趣味游戏:带领Web2用户无缝融入Web3世界

引言 随着区块链技术的飞速发展&#xff0c;Web3生态正在逐渐成为数字世界的核心。然而&#xff0c;对于全球10亿Web2用户来说&#xff0c;区块链和Web3的概念依然晦涩难懂。OceansGallerie平台通过设计一个趣味性和奖励性的休闲游戏模块&#xff0c;旨在为这些用户提供一个简…

机器学习周报(transformer学习1)

文章目录 摘要Abstract 1 Transformer1.1 数据部分&#xff0c;输入处理和Embedding1.2 位置编码总结 摘要 本文介绍了Transformer模型的输入结构&#xff0c;包括Embedding层和位置编码的作用与实现。深入了解如何将原始数据转换为模型能够处理的嵌入向量&#xff0c;并探讨了…

树形dp总结

这类题型在 dp 中很常见&#xff0c;于是做一个总结吧&#xff01;&#xff01;&#xff01; 最经典的题&#xff1a;没有上司的舞会 传送门&#xff1a;没有上司的舞会 - 洛谷 状态表示&#xff1a; dp[i][0] 为 以 i 为根的子树中&#xff0c;选择 i 节点的最大欢乐值 d…

git push时报错! [rejected] master -> master (fetch first)error: ...

错误描述&#xff1a;在我向远程仓库push代码时&#xff0c;即执行 git push origin master命令时发生的错误。直接上错误截图。 错误截图 错误原因&#xff1a; 在网上查了许多资料&#xff0c;是因为Git仓库中已经有一部分代码&#xff0c;它不允许你直接把你的代码覆盖上去…

Git_2024/11/16

文章目录 前言Git是什么核心概念工作流程常见术语解读Git的优势 Git与SVN对比SVNGit总结 Git配置流程及指令环境配置获取Git仓库本地初始化远程克隆 工作目录、暂存区、版本库文件的两种状态本地仓库操作远程仓库操作Git分支Git标签IntelliJ IDEA使用Git回滚代码 GitHub配置流程…

StarRocks Summit Asia 2024 全部议程公布!

随着企业数字化转型深入&#xff0c;云原生架构正成为湖仓部署的新标准。弹性扩展、资源隔离、成本优化&#xff0c;帮助企业在云上获得了更高的灵活性和效率。与此同时&#xff0c;云原生架构也为湖仓与 AI 的深度融合奠定了基础。 在过去一年&#xff0c;湖仓技术与 AI 的结…

ssm105基于JAVAEE技术校园车辆管理系统+jsp(论文+源码)_kaic

毕 业 设 计&#xff08;论 文&#xff09; 题目&#xff1a;校园车辆管理系统设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本校园车辆管理系统…