Java实现图像可点击分段绘制及屏幕适配与分段ID获取

一、解决跨屏幕分段错位问题 #

• 用相对坐标替代绝对像素：放弃固定像素坐标，基于原始图像宽高比例计算实际显示坐标。比如原始图像宽为1000px，某分段左边界是200px，当实际显示图像宽为500px时，实际左边界就是200*(500/1000)=100px，以此类推计算所有坐标点。
• 强制图像等比缩放：设置图像缩放模式为等比适配（如Android的fitCenter、iOS的ScaleAspectFit），避免图像拉伸变形导致分段错位。
• 动态刷新坐标：监听图像加载完成、屏幕旋转或尺寸变化事件，重新计算分段坐标并刷新绘制，确保分段始终贴合图像。

二、实现点击分段获取ID功能 #

• 定义分段数据结构：给每个分段绑定ID和相对坐标范围，示例：

// Web端示例数据
const segments = [
  { id: "seg1", relLeft: 0.1, relTop: 0.2, relRight: 0.3, relBottom: 0.4 },
  { id: "seg2", relLeft: 0.4, relTop: 0.2, relRight: 0.6, relBottom: 0.4 }
];

• 处理点击判断逻辑：将屏幕点击坐标转换为图像相对坐标，再匹配对应分段：

// Web端示例点击处理
imgElement.addEventListener('click', (e) => {
  const rect = imgElement.getBoundingClientRect();
  const relX = (e.clientX - rect.left) / rect.width;
  const relY = (e.clientY - rect.top) / rect.height;
  
  const clickedSegment = segments.find(seg => 
    relX >= seg.relLeft && relX <= seg.relRight &&
    relY >= seg.relTop && relY <= seg.relBottom
  );
  
  if (clickedSegment) {
    console.log("点击的分段ID：", clickedSegment.id);
    // 执行后续业务逻辑
  }
});

• 绘制与逻辑同步：绘制分段时严格使用数据结构中的相对坐标计算实际位置，保证绘制区域和点击判断区域完全一致。

内容的提问来源于stack exchange，提问作者Mohit Chaudhary