NAppGUI 2D绘图教程用draw2d绘制图表与自定义界面告别死板控件【免费下载链接】nappgui_srcSDK for building cross-platform desktop apps in ANSI-C项目地址: https://gitcode.com/gh_mirrors/na/nappgui_src很多用 C 语言做桌面开发的朋友往往被困在只有按钮、文本框这些基础控件的尴尬局面里。NAppGUI 作为一个纯 ANSI-C 的跨平台桌面应用 SDK内置了功能强大的 draw2d 二维绘图模块让你可以用几十行代码画出专业的折线图、柱状图和完全自定义的界面组件。这篇 NAppGUI 2D绘图教程将带你快速掌握 draw2d 的核心用法从运行官方 Demo 到亲手绘制图表告别千篇一律的死板控件。NAppGUI 是什么C 语言跨平台 GUI 开发利器NAppGUI 是一套用 ANSI-C 编写的跨平台桌面应用 SDK一套代码即可编译运行在 Windows、macOS 和 Linux 三大系统上无需 C、无需脚本语言。它最大的亮点在于所有绘图能力都通过统一的 draw2d 抽象层暴露给开发者底层自动适配 GDIWindows、QuartzmacOS和 CairoGTK/Linux你写的绘图代码在三个平台上呈现完全一致的效果。想快速体验克隆仓库后按官方文档编译即可git clone --depth 1 https://gitcode.com/gh_mirrors/na/nappgui_src cd nappgui_src cmake -S . -B build -DCMAKE_BUILD_TYPEDebug cmake --build build -j 4编译完成后build/Debug/bin目录下就有大量可直接运行的示例程序。draw2d 核心 API 一览绘图原语全掌握draw2d 的所有绘图命令都集中在 draw.h 这个头文件里函数以draw_前缀命名非常好记。下面这张表可以帮你快速建立整体印象类别API作用线条draw_line/draw_polyline/draw_arc/draw_bezier直线、折线、圆弧、贝塞尔曲线图形draw_rect/draw_rndrect/draw_circle/draw_ellipse/draw_polygon矩形、圆角矩形、圆形、椭圆、多边形样式draw_line_color/draw_line_width/draw_line_dash线条颜色、粗细、虚线模式填充draw_fill_color/draw_fill_linear纯色填充、线性渐变填充文字draw_text/draw_text_path/draw_font绘制文字、文字路径特效、字体设置图片draw_image/draw_image_frame绘制图片、逐帧绘制动画帧更贴心的是几乎每个图形都支持ekFILL填充、ekSTROKE描边、ekSKFILL先描边后填充等绘制模式组合起来可以做出非常丰富的视觉效果。最快上手方法直接运行 drawhello 官方绘图 Demo与其对着文档空想不如先跑起来看效果。demo/drawhello目录下的 drawhello.c 是一个绘图图元博物馆它用一个 View 画布加上左侧的 PopUp 选择器提供了 14 种不同的绘图演示Lines不同粗细、线帽、线连接方式、虚线模式的直线效果Shapes矩形、圆角矩形、圆形、椭圆、多边形的填充与描边Gradient-1 到 6全局渐变、局部渐变、图形渐变填充等 6 种渐变玩法Text-1 到 5单行文字对齐、换行、宽度约束、艺术字路径绘制Image图片的对齐与旋转绘制示例中大量使用draw_line(ctx, ...)、draw_circle(ctx, ekFILL, ...)这类简洁调用配合滑块实时调整参数非常适合作为你学习 draw2d 的活教材。从零绘制第一个图表Bode 图绘制流程拆解如果你想知道NAppGUI 2D绘图如何真正派上用场demo/bode这个波特图Bode plot示例就是最佳范本。它的绘制代码全部集中在 bdplot.c实现了一个完整的数据图表双坐标系、虚线网格、刻度标签、鼠标悬停取点样样齐全。第一步准备数据点图表绘制的起点是数据。在plot_update()中示例把计算好的频率响应数据存入V2Df点数组再用box2d_addnf()求出数据的包围盒最小值与最大值作为后续坐标映射的依据bode_db_graph(plot-graph.db.points, plot-graph.db.n); box2d_addnf(plot-graph.db.box, plot-graph.db.points, plot-graph.db.n);第二步数据坐标与画布坐标互相转换这是绘图图表最核心的一步。bdplot.c里的i_xy_to_canvas()和i_xy_from_canvas()两个函数把数据的数值范围线性映射到画布的像素范围norm.x (p-x - graph-box.min.x) / (graph-box.max.x - graph-box.min.x); canvas_p-x rect-pos.x norm.x * rect-size.width;有了这组转换函数无论窗口怎么拉伸图表都能正确铺满画布。第三步绘制网格、坐标轴与曲线绘制阶段就完全交给 draw2d 原语了用draw_line_dash(ctx, pattern, 2)画虚线网格用draw_line_color()区分不同曲线最后用draw_line()逐段连接数据点形成折线。鼠标悬停时还通过draw_circle(ctx, ekFILL, x, y, 4)高亮当前数据点并调用draw_text()实时显示数值——一个专业的交互式图表就这么诞生了。绘制自定义界面让控件为你所用而不是被控件束缚除了画图表draw2d 还能帮你突破标准控件的限制。比如想要一个产品图片展示区域、一个带网格的仪表盘、或者一个自定义的进度环都不需要依赖第三方控件库——直接创建一个View在它的OnDraw事件回调里用 draw2d 绘制即可。以demo/products示例为例它的产品管理界面就大量使用了图片展示左侧是产品缩略图列表右侧是产品详情表单工具栏上的前进、后退、筛选一应俱全。产品图片通过imageview_create()配合资源打包机制加载界面看起来远比单纯的文本列表生动得多。这种画布 绘图命令的模式让你可以随心所欲地实现任何视觉设计渐变的按钮背景、带圆角的卡片、自绘的仪表指针……只要你能想到draw2d 就能画出来。图片绘制与高级技巧渐变、变换与文字特效图片加载与绘制在 NAppGUI 中图片通过资源打包系统加载先用image_from_resource()从资源包取图再用draw_image(ctx, image, x, y)绘制到画布上。draw_image_frame()还支持逐帧绘制适合做 GIF 动画和精灵动画。线性渐变填充draw_fill_linear()可以创建两点之间的线性渐变配合draw_fill_wrap()的三种环绕模式ekFCLAMP、ekFTILE、ekFFLIP能做出细腻的质感背景color_t c[2] {kCOLOR_RED, kCOLOR_BLUE}; real32_t stop[2] {0, 1}; draw_fill_linear(ctx, c, stop, 2, 0, 0, 600, 400); draw_rect(ctx, ekFILL, 0, 0, 600, 400);矩阵变换draw_matrixf()配合几何模块的t2d_movef()、t2d_rotatef()、t2d_scalef()可以对后续所有绘制进行平移、旋转、缩放。在 drawhello.c 里文字旋转 45 度、图片缩放 3 倍都只是几行矩阵运算的事。常见问题与避坑指南图表坐标翻转屏幕坐标系 Y 轴向下而数学坐标系 Y 轴向上。绘制图表时记得用height - y翻转Bode 示例中大量使用这种处理。绘制前先清屏在OnDraw回调开头用draw_clear(ctx, color_rgb(...))清空画布否则上一帧的图形会残留。中文与多语言文字draw2d 的draw_text()完整支持 Unicodedrawhello 示例里甚至直接绘制了中、英、希腊三种文字混排的效果。窗口拉伸后图表变形不要在OnDraw里写死坐标务必使用文中介绍的坐标映射方法根据画布实际宽高动态计算。结语从今天开始用 draw2d 画出你的专属界面NAppGUI 的 draw2d 模块把复杂的跨平台图形编程简化成了draw_line、draw_rect、draw_text这样一组直观的命令。无论是绘制专业的数据图表还是打造完全自定义的界面组件它都能让你在纯 C 的语法体系里游刃有余。建议你按照本教程的路径先跑 drawhello 熟悉 API再研读 bdplot.c 掌握图表绘制套路最后大胆地在自己的项目里实践——很快你也能做出告别死板控件的漂亮应用【免费下载链接】nappgui_srcSDK for building cross-platform desktop apps in ANSI-C项目地址: https://gitcode.com/gh_mirrors/na/nappgui_src创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/8/21 19:00:50 · 阅读 1.2k NAppGUI 2D绘图教程：用draw2d绘制图表与自定义界面，告别死板控件
NAppGUI 2D绘图教程用draw2d绘制图表与自定义界面告别死板控件【免费下载链接】nappgui_srcSDK for building cross-platform desktop apps in ANSI-C项目地址: https://gitcode.com/gh_mirrors/na/nappgui_src很多用 C 语言做桌面开发的朋友往往被困在只有按钮、文本框这些基础控件的尴尬局面里。NAppGUI 作为一个纯 ANSI-C 的跨平台桌面应用 SDK内置了功能强大的 draw2d 二维绘图模块让你可以用几十行代码画出专业的折线图、柱状图和完全自定义的界面组件。这篇 NAppGUI 2D绘图教程将带你快速掌握 draw2d 的核心用法从运行官方 Demo 到亲手绘制图表告别千篇一律的死板控件。NAppGUI 是什么C 语言跨平台 GUI 开发利器NAppGUI 是一套用 ANSI-C 编写的跨平台桌面应用 SDK一套代码即可编译运行在 Windows、macOS 和 Linux 三大系统上无需 C、无需脚本语言。它最大的亮点在于所有绘图能力都通过统一的 draw2d 抽象层暴露给开发者底层自动适配 GDIWindows、QuartzmacOS和 CairoGTK/Linux你写的绘图代码在三个平台上呈现完全一致的效果。想快速体验克隆仓库后按官方文档编译即可git clone --depth 1 https://gitcode.com/gh_mirrors/na/nappgui_src cd nappgui_src cmake -S . -B build -DCMAKE_BUILD_TYPEDebug cmake --build build -j 4编译完成后build/Debug/bin目录下就有大量可直接运行的示例程序。draw2d 核心 API 一览绘图原语全掌握draw2d 的所有绘图命令都集中在 draw.h 这个头文件里函数以draw_前缀命名非常好记。下面这张表可以帮你快速建立整体印象类别API作用线条draw_line/draw_polyline/draw_arc/draw_bezier直线、折线、圆弧、贝塞尔曲线图形draw_rect/draw_rndrect/draw_circle/draw_ellipse/draw_polygon矩形、圆角矩形、圆形、椭圆、多边形样式draw_line_color/draw_line_width/draw_line_dash线条颜色、粗细、虚线模式填充draw_fill_color/draw_fill_linear纯色填充、线性渐变填充文字draw_text/draw_text_path/draw_font绘制文字、文字路径特效、字体设置图片draw_image/draw_image_frame绘制图片、逐帧绘制动画帧更贴心的是几乎每个图形都支持ekFILL填充、ekSTROKE描边、ekSKFILL先描边后填充等绘制模式组合起来可以做出非常丰富的视觉效果。最快上手方法直接运行 drawhello 官方绘图 Demo与其对着文档空想不如先跑起来看效果。demo/drawhello目录下的 drawhello.c 是一个绘图图元博物馆它用一个 View 画布加上左侧的 PopUp 选择器提供了 14 种不同的绘图演示Lines不同粗细、线帽、线连接方式、虚线模式的直线效果Shapes矩形、圆角矩形、圆形、椭圆、多边形的填充与描边Gradient-1 到 6全局渐变、局部渐变、图形渐变填充等 6 种渐变玩法Text-1 到 5单行文字对齐、换行、宽度约束、艺术字路径绘制Image图片的对齐与旋转绘制示例中大量使用draw_line(ctx, ...)、draw_circle(ctx, ekFILL, ...)这类简洁调用配合滑块实时调整参数非常适合作为你学习 draw2d 的活教材。从零绘制第一个图表Bode 图绘制流程拆解如果你想知道NAppGUI 2D绘图如何真正派上用场demo/bode这个波特图Bode plot示例就是最佳范本。它的绘制代码全部集中在 bdplot.c实现了一个完整的数据图表双坐标系、虚线网格、刻度标签、鼠标悬停取点样样齐全。第一步准备数据点图表绘制的起点是数据。在plot_update()中示例把计算好的频率响应数据存入V2Df点数组再用box2d_addnf()求出数据的包围盒最小值与最大值作为后续坐标映射的依据bode_db_graph(plot-graph.db.points, plot-graph.db.n); box2d_addnf(plot-graph.db.box, plot-graph.db.points, plot-graph.db.n);第二步数据坐标与画布坐标互相转换这是绘图图表最核心的一步。bdplot.c里的i_xy_to_canvas()和i_xy_from_canvas()两个函数把数据的数值范围线性映射到画布的像素范围norm.x (p-x - graph-box.min.x) / (graph-box.max.x - graph-box.min.x); canvas_p-x rect-pos.x norm.x * rect-size.width;有了这组转换函数无论窗口怎么拉伸图表都能正确铺满画布。第三步绘制网格、坐标轴与曲线绘制阶段就完全交给 draw2d 原语了用draw_line_dash(ctx, pattern, 2)画虚线网格用draw_line_color()区分不同曲线最后用draw_line()逐段连接数据点形成折线。鼠标悬停时还通过draw_circle(ctx, ekFILL, x, y, 4)高亮当前数据点并调用draw_text()实时显示数值——一个专业的交互式图表就这么诞生了。绘制自定义界面让控件为你所用而不是被控件束缚除了画图表draw2d 还能帮你突破标准控件的限制。比如想要一个产品图片展示区域、一个带网格的仪表盘、或者一个自定义的进度环都不需要依赖第三方控件库——直接创建一个View在它的OnDraw事件回调里用 draw2d 绘制即可。以demo/products示例为例它的产品管理界面就大量使用了图片展示左侧是产品缩略图列表右侧是产品详情表单工具栏上的前进、后退、筛选一应俱全。产品图片通过imageview_create()配合资源打包机制加载界面看起来远比单纯的文本列表生动得多。这种画布 绘图命令的模式让你可以随心所欲地实现任何视觉设计渐变的按钮背景、带圆角的卡片、自绘的仪表指针……只要你能想到draw2d 就能画出来。图片绘制与高级技巧渐变、变换与文字特效图片加载与绘制在 NAppGUI 中图片通过资源打包系统加载先用image_from_resource()从资源包取图再用draw_image(ctx, image, x, y)绘制到画布上。draw_image_frame()还支持逐帧绘制适合做 GIF 动画和精灵动画。线性渐变填充draw_fill_linear()可以创建两点之间的线性渐变配合draw_fill_wrap()的三种环绕模式ekFCLAMP、ekFTILE、ekFFLIP能做出细腻的质感背景color_t c[2] {kCOLOR_RED, kCOLOR_BLUE}; real32_t stop[2] {0, 1}; draw_fill_linear(ctx, c, stop, 2, 0, 0, 600, 400); draw_rect(ctx, ekFILL, 0, 0, 600, 400);矩阵变换draw_matrixf()配合几何模块的t2d_movef()、t2d_rotatef()、t2d_scalef()可以对后续所有绘制进行平移、旋转、缩放。在 drawhello.c 里文字旋转 45 度、图片缩放 3 倍都只是几行矩阵运算的事。常见问题与避坑指南图表坐标翻转屏幕坐标系 Y 轴向下而数学坐标系 Y 轴向上。绘制图表时记得用height - y翻转Bode 示例中大量使用这种处理。绘制前先清屏在OnDraw回调开头用draw_clear(ctx, color_rgb(...))清空画布否则上一帧的图形会残留。中文与多语言文字draw2d 的draw_text()完整支持 Unicodedrawhello 示例里甚至直接绘制了中、英、希腊三种文字混排的效果。窗口拉伸后图表变形不要在OnDraw里写死坐标务必使用文中介绍的坐标映射方法根据画布实际宽高动态计算。结语从今天开始用 draw2d 画出你的专属界面NAppGUI 的 draw2d 模块把复杂的跨平台图形编程简化成了draw_line、draw_rect、draw_text这样一组直观的命令。无论是绘制专业的数据图表还是打造完全自定义的界面组件它都能让你在纯 C 的语法体系里游刃有余。建议你按照本教程的路径先跑 drawhello 熟悉 API再研读 bdplot.c 掌握图表绘制套路最后大胆地在自己的项目里实践——很快你也能做出告别死板控件的漂亮应用【免费下载链接】nappgui_srcSDK for building cross-platform desktop apps in ANSI-C项目地址: https://gitcode.com/gh_mirrors/na/nappgui_src创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考