Flutter中如何在图片本体上绘制矩形而非添加视图层

你可以直接使用image包提供的绘图API修改图片本体，无需手动批量修改像素数组，这种方式更简洁可靠。

基于你已有的代码，补充绘制矩形的逻辑如下：

import 'package:image/image.dart' as img;
import 'package:flutter/services.dart' show rootBundle;

// 在你的异步方法内执行以下逻辑
ByteData byteData = await rootBundle.load('assets/images/maps/map.jpg');
Uint8List bytes = byteData.buffer.asUint8List();
img.Image photo = img.decodeImage(bytes)!;

// 定义矩形参数：坐标、尺寸、颜色
final rectColor = img.ColorRgba8(255, 0, 0, 128); // 半透明红色，参数为RGBA（0-255）
final targetRect = img.Rectangle(x1: 50, y1: 50, x2: 200, y2: 150); // x1/y1是左上角，x2/y2是右下角

// 绘制填充矩形
img.fillRect(photo, targetRect, rectColor);
// 如果只需要绘制矩形边框，替换为下面的方法
// img.drawRect(photo, targetRect, rectColor);

// 将修改后的图片转为可用于显示的Uint8List
Uint8List modifiedImageBytes = img.encodeJpg(photo);

// 后续可通过Image.memory(modifiedImageBytes)展示修改后的图片

关键说明： #

• fillRect用于绘制带填充的矩形，drawRect仅绘制矩形边框
• 修改后的photo对象就是已编辑的图片本体，编码后可直接用于显示或保存

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