【花雕动手做】CanMV K230 AI 视觉模块之绘制一个矩形图案

什么是 CanMV K230？
CanMV K230是一款高性价比的RISC-V边缘AI平台，凭借低功耗、强视觉处理能力和开放的开发生态，成为嵌入式AI开发的理想选择，尤其适合需要快速部署视觉与AI功能的创客、中小企业及教育场景。CanMV 是一套 AI 视觉开发平台，K230 是其核心芯片。该模块结合了图像采集、AI推理、边缘计算等能力，适合嵌入式视觉应用开发。

CanMV：类似 OpenMV 的图像处理框架，支持 Python 编程，简化视觉识别开发流程。
K230 芯片：嘉楠科技推出的 AIoT SoC，采用 RISC-V 架构，内置第三代 KPU（AI加速单元），算力高达 6 TOPS，性能是 K210 的 13.7 倍。

API 文档
draw_rectangle函数

image.draw_rectangle(x, y, w, h[, color[, thickness=1[, fill=False]]])
复制代码

在图像上绘制一个矩形。可以分别传入参数 x, y, w, h，也可以作为元组 (x, y, w, h) 一起传递。

color: 表示颜色的 RGB888 元组，适用于灰度或 RGB565 图像，默认为白色。对于灰度图像，还可以传递像素值（范围 0-255）；对于 RGB565 图像，可以传递字节翻转的 RGB565 值。
thickness: 控制矩形边框的像素宽度，默认为 1。
fill: 设置为 True 时，将填充矩形内部，默认为 False。
该方法返回图像对象，允许通过链式调用其他方法。

不支持压缩图像和 Bayer 格式图像。

测试实验代码

# 【花雕动手做】CanMV K230 AI 视觉识别模块之使用draw_rectangle()方法绘制矩形
# 该代码演示了如何在CanMV K230开发板上使用draw_rectangle()方法绘制各种矩形图案，并在显示屏上显示

# Import required modules
# 导入所需的模块
import time, os, urandom, sys, math  # 基础工具模块：时间、操作系统、随机数、系统、数学运算

# Import display and media related modules
# 导入显示和媒体相关模块
from media.display import *  # 显示驱动模块，用于控制显示屏
from media.media import *    # 媒体管理模块，用于管理图像资源

# Define display resolution constants
# 定义显示分辨率常量（根据实际使用的显示屏参数设置）
DISPLAY_WIDTH = 640    # 显示屏宽度（像素）
DISPLAY_HEIGHT = 480   # 显示屏高度（像素）

def display_test():
    """
    Function to test display functionality
    测试显示功能的函数：创建图像并绘制矩形图案，最终在屏幕上显示
    """

    # Create main background image with white color
    # 创建白色背景的主图像：参数分别为宽度、高度、像素格式（ARGB8888表示每个像素包含Alpha、红、绿、蓝四个通道，各8位）
    img = image.Image(DISPLAY_WIDTH, DISPLAY_HEIGHT, image.ARGB8888)
    img.clear()  # 清空图像缓存
    # 绘制全屏白色矩形作为背景：参数为x起点、y起点、x终点、y终点、颜色、是否填充
    img.draw_rectangle(0, 0, DISPLAY_WIDTH, DISPLAY_HEIGHT, color=(255,255,255), fill=True)

    # Initialize display with ST7701 driver
    # 使用ST7701驱动初始化显示器：指定驱动型号、分辨率、是否输出到IDE（方便调试）
    Display.init(Display.ST7701, width=DISPLAY_WIDTH, height=DISPLAY_HEIGHT, to_ide=True)
    # Initialize media manager
    # 初始化媒体管理器：负责管理图像、显示等资源的分配与释放
    MediaManager.init()

    try:
        # 主要的装饰性矩形图案 - 居中调整
        # 使用不同深浅的天蓝色营造层次感（RGB颜色值：(红, 绿, 蓝)，值范围0-255）
        
        # 深色天蓝色 - 中央水平线（未填充，仅边框）
        # 参数：x1=120, y1=160, x2=400, y2=160（由于y1=y2，实际为一条水平线），颜色(0,191,255)，线宽2
        img.draw_rectangle(120, 160, 400, 160, color=(0, 191, 255), thickness=2)

        # 左侧装饰性小矩形
        # 浅天蓝色填充矩形：x1=120, y1=160, x2=170（120+50）, y2=210（160+50），颜色(135,206,235)，填充
        img.draw_rectangle(120, 160, 50, 50, color=(135, 206, 235), fill=True)
        # 天蓝色填充矩形：x1=120, y1=270, x2=170, y2=320，颜色(0,191,255)，填充
        img.draw_rectangle(120, 270, 50, 50, color=(0, 191, 255), fill=True)

        # 右侧装饰性小矩形
        # 天蓝色填充矩形：x1=470, y1=160, x2=520, y2=210，颜色(0,191,255)，填充
        img.draw_rectangle(470, 160, 50, 50, color=(0, 191, 255), fill=True)
        # 浅天蓝色填充矩形：x1=470, y1=270, x2=520, y2=320，颜色(135,206,235)，填充
        img.draw_rectangle(470, 270, 50, 50, color=(135, 206, 235), fill=True)

        # 中央装饰性矩形
        # 天蓝色边框矩形（未填充）：x1=220, y1=200, x2=420（220+200）, y2=280（200+80），线宽2
        img.draw_rectangle(220, 200, 200, 80, color=(0, 191, 255), thickness=2)
        # 浅天蓝色填充矩形（内部）：x1=240, y1=220, x2=400（240+160）, y2=260（220+40），填充
        img.draw_rectangle(240, 220, 160, 40, color=(135, 206, 235), fill=True)

        # 连接线效果的细长矩形
        # 天蓝色填充矩形（左连接）：x1=170, y1=235, x2=220（170+50）, y2=245（235+10），填充
        img.draw_rectangle(170, 235, 50, 10, color=(0, 191, 255), fill=True)
        # 天蓝色填充矩形（右连接）：x1=420, y1=235, x2=470（420+50）, y2=245，填充
        img.draw_rectangle(420, 235, 50, 10, color=(0, 191, 255), fill=True)

        # 点缀性的小方块
        # 最浅天蓝色填充方块：x1=200, y1=180, x2=215（200+15）, y2=195（180+15），填充
        img.draw_rectangle(200, 180, 15, 15, color=(173, 216, 230), fill=True)
        img.draw_rectangle(425, 180, 15, 15, color=(173, 216, 230), fill=True)  # 右上小方块
        img.draw_rectangle(200, 285, 15, 15, color=(173, 216, 230), fill=True)  # 左下小方块
        img.draw_rectangle(425, 285, 15, 15, color=(173, 216, 230), fill=True)  # 右下小方块
        
        # Update display with background image
        # 更新显示背景图像：将绘制好的img图像输出到显示屏
        Display.show_image(img)
        # 无限循环保持显示（每2秒休眠一次，降低CPU占用）
        while True:
            time.sleep(2)

    except KeyboardInterrupt as e:
        # 捕获用户中断（如Ctrl+C），打印信息
        print("user stop: ", e)
    except BaseException as e:
        # 捕获其他异常，打印错误信息
        print(f"Exception {e}")

    # Cleanup and deinitialize display
    # 清理并反初始化显示器：释放显示资源
    Display.deinit()
    # 启用系统退出点，允许进入休眠状态
    os.exitpoint(os.EXITPOINT_ENABLE_SLEEP)
    time.sleep_ms(100)  # 等待100毫秒确保资源释放完成
    # Release media resources
    # 释放媒体资源：关闭媒体管理器
    MediaManager.deinit()

if __name__ == "__main__":
    # 程序入口：当脚本直接运行时执行
    # Enable exit points and run display test
    # 启用系统退出点（用于安全关闭）并运行显示测试函数
    os.exitpoint(os.EXITPOINT_ENABLE)
    display_test()
复制代码

基于 CanMV K230 AI 视觉识别模块的显示测试程序，核心功能是通过draw_rectangle()方法在屏幕上绘制一系列矩形图案，展示了图像创建、显示控制和图形绘制的基本流程。以下是代码解读：

一、整体结构
代码分为三个主要部分：
模块导入：引入必要的系统工具和显示相关库
核心函数display_test()：实现图像创建、矩形绘制、显示控制的完整逻辑
程序入口：启动显示测试流程

二、关键代码逐段解读
1. 模块导入与常量定义
python

import time, os, urandom, sys, math  # 基础工具模块

from media.display import *  # 显示驱动模块（控制显示屏）

from media.media import *    # 媒体管理模块（管理图像资源）



DISPLAY_WIDTH = 640    # 显示屏宽度（像素）

DISPLAY_HEIGHT = 480   # 显示屏高度（像素）
复制代码

导入time用于延时，os用于系统资源管理，media.display和media.media是 CanMV K230 控制显示的核心库。
定义显示屏分辨率常量（需与实际硬件匹配，这里为 640×480）。

2. 核心函数display_test()
该函数是程序的主体，负责创建图像、绘制矩形、初始化显示并处理异常。
（1）创建背景图像
python

img = image.Image(DISPLAY_WIDTH, DISPLAY_HEIGHT, image.ARGB8888)

img.clear()

img.draw_rectangle(0, 0, DISPLAY_WIDTH, DISPLAY_HEIGHT, color=(255,255,255), fill=True)
复制代码

image.Image()：创建一个图像对象，参数为宽度、高度、像素格式（ARGB8888表示每个像素包含透明度 + 红、绿、蓝三原色，各 8 位精度）。
img.clear()：清空图像缓存（初始化为黑色）。
img.draw_rectangle()：绘制全屏白色矩形作为背景，参数说明：
0, 0：矩形左上角坐标（x, y）
DISPLAY_WIDTH, DISPLAY_HEIGHT：矩形的宽和高（此处铺满整个屏幕）
color=(255,255,255)：白色（RGB 值，范围 0-255）
fill=True：矩形内部填充指定颜色

（2）初始化显示与媒体资源
python

Display.init(Display.ST7701, width=DISPLAY_WIDTH, height=DISPLAY_HEIGHT, to_ide=True)

MediaManager.init()
复制代码

Display.init()：初始化显示屏，参数包括：
Display.ST7701：显示屏驱动型号（根据硬件选择，此处为 ST7701）
width/height：显示分辨率（与图像尺寸一致）
to_ide=True：支持将图像输出到开发工具（方便调试时在电脑上预览）。
MediaManager.init()：初始化媒体管理器，负责分配图像缓存、显示资源等底层硬件资源。

（3）绘制装饰性矩形图案
通过多次调用draw_rectangle()绘制不同位置、大小、颜色的矩形，构建层次感图案：
python

# 中央水平线（深色天蓝色，仅边框）

img.draw_rectangle(120, 160, 400, 160, color=(0, 191, 255), thickness=2)



# 左侧小矩形（浅天蓝色填充）

img.draw_rectangle(120, 160, 50, 50, color=(135, 206, 235), fill=True)



# 其他矩形...（右侧、中央、连接线、小方块等）
复制代码

draw_rectangle()参数详解：
x1, y1, width, height, color, thickness, fill
x1, y1：矩形左上角坐标（屏幕左上角为原点 (0,0)）
width, height：矩形的宽度和高度（像素）
color：RGB 颜色元组（如(0,191,255)为天蓝色）
thickness：边框线宽（仅当fill=False时有效，默认 1）
fill：是否填充内部（True填充，False仅画边框）

（4）显示图像并保持
python

Display.show_image(img)  # 将绘制好的图像输出到显示屏

while True:

    time.sleep(2)  # 无限循环保持显示（每2秒休眠一次，降低功耗）
复制代码

Display.show_image(img)：将图像数据发送到显示屏，完成显示刷新。
无限循环确保图像持续显示（否则程序结束后屏幕会关闭）。

（5）异常处理与资源释放
python

except KeyboardInterrupt as e:

    print("user stop: ", e)  # 捕获用户中断（如Ctrl+C）

except BaseException as e:

    print(f"Exception {e}")  # 捕获其他异常



# 清理资源

Display.deinit()  # 关闭显示屏，释放显示资源

os.exitpoint(os.EXITPOINT_ENABLE_SLEEP)  # 允许系统进入休眠

time.sleep_ms(100)

MediaManager.deinit()  # 释放媒体资源
复制代码

异常处理确保程序在意外中断时不会崩溃。
资源释放步骤（deinit()）是硬件控制的关键，避免占用硬件资源导致下次运行出错。

3. 程序入口
python

if __name__ == "__main__":

    os.exitpoint(os.EXITPOINT_ENABLE)  # 启用系统退出点（安全关闭机制）

    display_test()  # 执行显示测试
复制代码

当脚本直接运行时，启用系统退出机制并调用display_test()函数启动流程。

三、核心技术点
draw_rectangle()方法：CanMV K230 绘制矩形的核心 API，通过坐标、尺寸、颜色和填充参数控制图形样式。
显示流程：创建图像→绘制内容→初始化显示→输出图像→释放资源，是嵌入式显示开发的通用流程。
资源管理：硬件设备（显示屏）需要显式初始化（init()）和释放（deinit()），否则可能导致硬件冲突。

四、功能总结
该代码通过组合不同矩形图案，在 CanMV K230 的显示屏上展示了一个具有层次感的装饰性图形，验证了显示驱动和图形绘制功能的正确性，可作为入门示例理解 K230 的图像显示原理。

实验场景图