u8glib自学笔记1

第一部分，u8glib标准语法格式：

本文使用的是DFRobot出品的LCD12864 Shield V1.0

端口占用情况：

SPI Com: SCK = 13, MOSI = 11, CS = 10, A0 = 9, RST = 8

背光控制占用数字口7

[mw_shl_code=c,true]//调用u8glib库
#include "U8glib.h"

//创建一个LCD对象
U8GLIB_NHD_C12864 u8g(13, 11, 10, 9, 8);

void setup(){

}

void loop(){
    u8g.firstPage();
    do{
        //display
    }while(u8g.nextPage());
}

//u8g.firstPage() 表示图像循环的开始
//u8g.nextPage() 表示图像循环的结束[/mw_shl_code]

第二部分，画出几何图形

首先是画点。

函数语法：

[mw_shl_code=c,true]void U8GLIB::drawPixel(unit8_t x, unit8_t y)
//参数为：(x:点的横坐标 y:点的纵坐标)[/mw_shl_code]
例子： u8g.drawPixel(14, 23);

完整代码：

[mw_shl_code=c,true]//调用u8glib库
#include "U8glib.h"

//创建一个LCD对象
U8GLIB_NHD_C12864 u8g(13, 11, 10, 9, 8);

void draw(){
  u8g.drawPixel(14, 23);
}

void setup() {
  // put your setup code here, to run once:
  //旋转屏幕180°
  u8g.setRot180();// rotate screen
}

void loop() {
  // put your main code here, to run repeatedly:
  u8g.firstPage();
  do{
     draw();
  }while(u8g.nextPage());
}[/mw_shl_code]

然后是画线。

函数语法：

[mw_shl_code=c,true]void U8GLIB::drawLine(u8g_uint_t x1, u8g_uint_t y1, u8g_uint_t x2, u8g_uint_t y2)
//参数为： (x1:线段起始点横坐标 y1:线段起始点纵坐标 x2:线段结束点横坐标 y2:线段结束点纵坐标)[/mw_shl_code]

例子： u8g.drawLine(7, 10, 40, 55);

完整代码：

[mw_shl_code=c,true]//画一个V
//调用u8glib库
#include "U8glib.h"

//创建一个LCD对象
U8GLIB_NHD_C12864 u8g(13, 11, 10, 9, 8);

void draw(){
  u8g.drawLine(7, 10, 40, 55);
  u8g.drawLine(40, 55, 73, 10);
}

void setup() {
  // put your setup code here, to run once:
  //旋转屏幕180°
  u8g.setRot180();// rotate screen
}

void loop() {
  // put your main code here, to run repeatedly:
  u8g.firstPage();
  do{
     draw();
  }while(u8g.nextPage());
}[/mw_shl_code]

然后是画连续点（线段）（水平线段或垂直线段）

函数语法：

[mw_shl_code=c,true]void U8GLIB::drawHLine(u8g_uint_t x, u8g_uint_t y, u8g_uint_t w) //水平线段
void U8GLIB::drawVLine(u8g_uint_t x, u8g_uint_t y, u8g_uint_t h) //垂直线段
//参数为： (x:线段起始点 y:线段结束点 w:水平宽度 h:垂直高度)(高度单位为像素点)[/mw_shl_code]

例子： u8g.drawHLine(60,12, 30); u8g.drawVLine(10,20, 20);

完整代码：
[mw_shl_code=c,true]//画一个方形
//调用u8glib库
#include "U8glib.h"

//创建一个LCD对象
U8GLIB_NHD_C12864 u8g(13, 11, 10, 9, 8);

void draw(){
    u8g.drawHLine(40,15, 30);
    u8g.drawVLine(70,15, 30);
    u8g.drawHLine(40,45, 30);
    u8g.drawVLine(40,15, 30);
}

void setup() {
  // put your setup code here, to run once:
  //旋转屏幕180°
  u8g.setRot180();// rotate screen
}

void loop() {
  // put your main code here, to run repeatedly:
  u8g.firstPage();
  do{
     draw();
  }while(u8g.nextPage());
}[/mw_shl_code]

然后是画出实心的三角形

函数语法：

[mw_shl_code=c,true]void U8GLIB::drawTriangle(uint16_t x0, uint16_t y0, uint16_t x1, uint16_t y1, uint16_t x2, uint16_t y2)
//参数为：(x0:一个角的横坐标 y0:一个角的纵坐标 x1:另一个角的横坐标 y1:另一个角的纵坐标 x2:最后一个角的横坐标 y2:最后一个角的纵坐标)[/mw_shl_code]

例子： u8g.drawTriangle(14,9, 45,32, 9,42);

完整代码：

[mw_shl_code=c,true]//画一个实心三角形
//调用u8glib库
#include "U8glib.h"

//创建一个LCD对象
U8GLIB_NHD_C12864 u8g(13, 11, 10, 9, 8);

void draw(){
    u8g.drawTriangle(14,9, 45,32, 9,42);
}

void setup() {
  // put your setup code here, to run once:
  //旋转屏幕180°
  u8g.setRot180();// rotate screen
}

void loop() {
  // put your main code here, to run repeatedly:
  u8g.firstPage();
  do{
     draw();
  }while(u8g.nextPage());
}[/mw_shl_code]

然后是画出空心矩形，刚才我们用画线段的方式实现了画空心矩形，现在用更简单的方法就可以画出空心矩形。

函数语法：

[mw_shl_code=c,true]void U8GLIB::drawFrame(u8g_uint_t x, u8g_uint_t y, u8g_uint_t w, u8g_uint_t h)
//参数是：(x:矩形左上角横坐标 y:矩形左上角纵坐标 w:矩形的宽 h:矩形的高)(高和宽的单位都是像素)[/mw_shl_code]

例子： u8g.drawFrame(10, 12, 30, 20);

完整代码：

[mw_shl_code=c,true]//画一个空心矩形
//调用u8glib库
#include "U8glib.h"

//创建一个LCD对象
U8GLIB_NHD_C12864 u8g(13, 11, 10, 9, 8);

void draw(){
    u8g.drawFrame(10, 12, 30, 20);
}

void setup() {
  // put your setup code here, to run once:
  //旋转屏幕180°
  u8g.setRot180();// rotate screen
}

void loop() {
  // put your main code here, to run repeatedly:
  u8g.firstPage();
  do{
     draw();
  }while(u8g.nextPage());
}[/mw_shl_code]

然后是画圆角空心矩形

函数语法：

[mw_shl_code=c,true]void U8GLIB::drawRFrame(u8g_uint_t x, u8g_uint_t y, u8g_uint_t w, u8g_uint_t h, u8g_uint_t r)
//参数是： (x:圆角矩形左上角横坐标 y:圆角矩形左上角纵坐标 w:圆角矩形宽度 h:圆角矩形高度 r:圆角弧度的半径)[/mw_shl_code]

注意：最好要满足两个公式，使用时最好加上if来判断是否符合要求
w > = 2 * x * ( r + 1 )
h > = 2 * x * ( r + 1 )

例子： u8g.drawRFrame(10 ,12 ,30 ,20 ,5);

完整代码：

[mw_shl_code=c,true]//画一个圆角空心矩形
//调用u8glib库
#include "U8glib.h"

//创建一个LCD对象
U8GLIB_NHD_C12864 u8g(13, 11, 10, 9, 8);

void draw(){
    u8g.drawRFrame(10,12, 30,20, 5);
}

void setup() {
  // put your setup code here, to run once:
  //旋转屏幕180°
  u8g.setRot180();// rotate screen
}

void loop() {
  // put your main code here, to run repeatedly:
  u8g.firstPage();
  do{
     draw();
  }while(u8g.nextPage());
}[/mw_shl_code]

然后画实心矩形，和画空心的一样。注意语法区别！！！

函数语法：

[mw_shl_code=c,true]void U8GLIB::drawBox(u8g_uint_t x, u8g_uint_t y, u8g_uint_t w, u8g_uint_t h)[/mw_shl_code]

例子： u8g.drawBox(10,12,20,30);

然后画出圆角实心矩形，和画圆角空心矩形一样，但注意语法区别！！！

函数语法：

[mw_shl_code=c,true]void U8GLIB::drawRBox(u8g_uint_t x, u8g_uint_t y, u8g_uint_t w, u8g_uint_t h, u8g_uint_t r)[/mw_shl_code]

例子： u8g.drawRBox(10 ,12 ,30 ,20 ,5);

然后画出空心圆

函数语法：

[mw_shl_code=c,true]void U8GLIB::drawCircle(u8g_uint_t x0, u8g_uint_t y0, u8g_uint_t rad, uint8_t opt = U8G_DRAW_ALL)
//参数是：(x0:圆心的横坐标 y0:圆心的纵坐标 rad:圆的半径 opt:见下表)[/mw_shl_code]

• U8G_DRAW_UPPER_RIGHT        上部右侧 1/4 圆弧
• U8G_DRAW_UPPER_LEFT         上部左侧 1/4 圆弧
• U8G_DRAW_LOWER_LEFT         下部左侧 1/4 圆弧
• U8G_DRAW_LOWER_RIGHT        下部右侧 1/4 圆弧
• U8G_DRAW_ALL                整圆（默认）
  

例子： u8g.drawCircle(20,20, 14); //整圆
          u8g.drawCircle(20,20, 14, U8G_DRAW_UPPER_RIGHT); //1/4圆

完整代码：

[mw_shl_code=c,true]//画一个空心圆
//调用u8glib库
#include "U8glib.h"

//创建一个LCD对象
U8GLIB_NHD_C12864 u8g(13, 11, 10, 9, 8);

void draw(){
    u8g.drawCircle(20,20, 14);
}

void setup() {
  // put your setup code here, to run once:
  //旋转屏幕180°
  u8g.setRot180();// rotate screen
}

void loop() {
  // put your main code here, to run repeatedly:
  u8g.firstPage();
  do{
     draw();
  }while(u8g.nextPage());
}[/mw_shl_code]

然后画出实心圆

函数语法：

[mw_shl_code=c,true]void U8GLIB::drawDisc(u8g_uint_t x0, u8g_uint_t y0, u8g_uint_t rad, uint8_t opt = U8G_DRAW_ALL)
//参数是：(x0:圆心的横坐标 y0:圆心的纵坐标 rad:圆的半径 opt:见下表)[/mw_shl_code]

• U8G_DRAW_UPPER_RIGHT        上部右侧 1/4 扇形
• U8G_DRAW_UPPER_LEFT         上部左侧 1/4 扇形
• U8G_DRAW_LOWER_LEFT         下部左侧 1/4 扇形
• U8G_DRAW_LOWER_RIGHT        下部右侧 1/4 扇形
• U8G_DRAW_ALL                整圆（默认）
  

例子： u8g.drawDisc(20,20, 14); //整圆
          u8g.drawDisc(20,20, 14, U8G_DRAW_UPPER_RIGHT); //1/4圆

完整代码：

[mw_shl_code=c,true]//画一个实心圆
//调用u8glib库
#include "U8glib.h"

//创建一个LCD对象
U8GLIB_NHD_C12864 u8g(13, 11, 10, 9, 8);

void draw(){
    u8g.drawDisc(20,20, 14);
}

void setup() {
  // put your setup code here, to run once:
  //旋转屏幕180°
  u8g.setRot180();// rotate screen
}

void loop() {
  // put your main code here, to run repeatedly:
  u8g.firstPage();
  do{
     draw();
  }while(u8g.nextPage());
}[/mw_shl_code]

然后画出椭圆(空心)

函数语法：

[mw_shl_code=c,true]void drawEllipse(u8g_uint_t x0, u8g_uint_t y0, u8g_uint_t rx, u8g_uint_t ry, uint8_t opt)
//参数是：(x0:椭圆圆心的横坐标 y0:椭圆圆心的纵坐标 rx:水平方向半径 ry:垂直方向半径 rad:圆的半径 opt:见下表)[/mw_shl_code]

• U8G_DRAW_UPPER_RIGHT        上部右侧 1/4 椭圆弧
• U8G_DRAW_UPPER_LEFT         上部左侧 1/4 椭圆弧
• U8G_DRAW_LOWER_LEFT         下部左侧 1/4 椭圆弧
• U8G_DRAW_LOWER_RIGHT        下部右侧 1/4 椭圆弧
• U8G_DRAW_ALL                整圆（默认）
  

例子： u8g.drawEllipse(20,20, 14,17);

完整代码：

[mw_shl_code=c,true]//画一个椭圆
//调用u8glib库
#include "U8glib.h"

//创建一个LCD对象
U8GLIB_NHD_C12864 u8g(13, 11, 10, 9, 8);

void draw(){
    u8g.drawEllipse(20,20, 14,17);
}

void setup() {
  // put your setup code here, to run once:
  //旋转屏幕180°
  u8g.setRot180();// rotate screen
}

void loop() {
  // put your main code here, to run repeatedly:
  u8g.firstPage();
  do{
     draw();
  }while(u8g.nextPage());
}[/mw_shl_code]

然后画出椭圆(空心)，和画空心椭圆是一样的，但注意语法格式区别

函数语法：

[mw_shl_code=c,true]void drawFilledEllipse(u8g_uint_t x0, u8g_uint_t y0, u8g_uint_t rx, u8g_uint_t ry, uint8_t opt)
//参数是：(x0:椭圆圆心的横坐标 y0:椭圆圆心的纵坐标 rx:水平方向半径 ry:垂直方向半径 rad:圆的半径 opt:见下表)[/mw_shl_code]

• U8G_DRAW_UPPER_RIGHT        上部右侧 1/4 椭圆弧
• U8G_DRAW_UPPER_LEFT         上部左侧 1/4 椭圆弧
• U8G_DRAW_LOWER_LEFT         下部左侧 1/4 椭圆弧
• U8G_DRAW_LOWER_RIGHT        下部右侧 1/4 椭圆弧
• U8G_DRAW_ALL                整圆（默认）
  

例子： u8g.drawFilledEllipse(20,20, 14,17);

以上就是使用u8glib库画出几何图形。 整理一下：

[mw_shl_code=c,true]u8g.drawPixel(14, 23);                     //画点
u8g.drawLine(7, 10, 40, 55);            //画线
u8g.drawHLine(60,12, 30);                 //画水平线段
u8g.drawVLine(10,20, 20);                //画垂直线段
u8g.drawTriangle(14,9, 45,32, 9,42);    //画实心三角形
u8g.drawFrame(10, 12, 30, 20);            //画空心矩形
u8g.drawRFrame(10 ,12 ,30 ,20 ,5);        //画空心圆角矩形
u8g.drawBox(10,12,20,30);                //画实心矩形
u8g.drawRBox(10 ,12 ,30 ,20 ,5);        //画实心圆角矩形
u8g.drawCircle(20,20, 14);                 //整空心圆
u8g.drawCircle(20,20, 14, U8G_DRAW_UPPER_RIGHT); //1/4空心圆
u8g.drawDisc(20,20, 14);                 //整实心圆
u8g.drawDisc(20,20, 14, U8G_DRAW_UPPER_RIGHT); //1/4扇形
u8g.drawEllipse(20,20, 14,17);            //空心椭圆
u8g.drawFilledEllipse(20,20, 14,17);    //实心椭圆[/mw_shl_code]

上述代码已测试过，均可运行。如果有输入或者拼写错误，请麻烦留言，以便我及时可以修改过来。谢谢

这个好，学习了

LCD12864 Shield V1.0  这个已买不到了

谢谢

感谢大神分享，认真的学习了笔记，收获很大。

终于知道这个怎么用的了

micro：bit怎么用

shzrzxlee 发表于 2017-4-28 23:42
LCD12864 Shield V1.0  这个已买不到了

嗯，买不到了