ตุลาคม 19, 2017, 12:35:24 pm *
ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน
ส่งอีเมล์ยืนยันการใช้งาน?

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น
   หน้าแรก   ช่วยเหลือ เข้าสู่ระบบ สมัครสมาชิก  
หน้า: [1]   ลงล่าง
  พิมพ์  
ผู้เขียน หัวข้อ: Qt : Basic Drawing (วาดรูปสัญญาณ)  (อ่าน 1311 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
ShadowMan
Administrator
Hero Member
*****
ออฟไลน์ ออฟไลน์

เพศ: ชาย
กระทู้: 8267


ShadowWares


| |
« เมื่อ: มิถุนายน 06, 2015, 01:31:08 pm »

Qt : Basic Drawing (วาดรูปสัญญาณ)
จาก Qt : QLinearGradient ได้นำเสนอการลงสีแบบไล่เฉด
ตอนนี้เป็นภาคต่อ นั่นคือหลังจากมี Background เป็นสีสดใสแล้ว จะทำการวาดรูปสัญญาณ sine wave ลงไป ผลสุกท้ายที่ได้ ดังนี้:



และนี่คือ source code:
Code:
#include <QApplication>
#include <QGraphicsScene>
#include <QGraphicsView>
#include <QtMath>
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    int draw_w = 500;
    int draw_h = 200;

    // Draw Board
    QPixmap   pix(draw_w, draw_h);
    QPainter *paint = new QPainter(&pix);

    // Gradient Brush
    QLinearGradient gradient(QPointF(0,0), QPointF(0,draw_h));
    gradient.setSpread(QGradient::PadSpread);
    gradient.setColorAt(0.0,QColor::fromRgbF(1,0,0,1));
    gradient.setColorAt(0.3,QColor::fromRgbF(1,1,0,1));
    gradient.setColorAt(0.7,QColor::fromRgbF(0,1,1,1));
    gradient.setColorAt(1.0,QColor::fromRgbF(0,0,1,1));
    QBrush brush(gradient);

    // Paint on the Draw Board with the Gradient Brush
    paint->fillRect(0, 0, draw_w, draw_h, brush);

    // Generate 10 cycles of sine wave and create Path
    QVector<qreal> y (pix.width());
    qreal nc = 10.0;
    qreal ga = pix.height()/2;
    for(int x = 0; x<y.size(); x++) {
        y[x] = ga + (-ga * qSin(2.0*M_PI * nc * (qreal)x / (qreal)y.size()));
    }

    // Vector to Path object
    QPainterPath path;
    path.moveTo(0,y[0]);
    for(int x = 0; x < y.size(); x++) {
        path.lineTo(QPointF(x, y[x]));
    }

    // Black Pen, 2 pixels width
    QPen pen(Qt::black, 2);
    paint->setPen(pen);

    // Draw the Path (Sine wave) on the Draw Board
    //paint->setRenderHint(QPainter::Antialiasing, true);
    paint->drawPath(path);
    delete paint;

    // Create a Scene and add the Pixmap to the Scene
    QGraphicsScene *scene = new QGraphicsScene();
    scene->addPixmap(pix);

    // Create a View and add the Scene to the View
    QGraphicsView * view = new QGraphicsView();
    view->setScene(scene);
    view->setWindowTitle("Sine-Wave /w Linear Gradient Bg");
    view->show();

    return a.exec();
    delete view;
}

ต่อยอดจาก Qt : QLinearGradient เพียงเล็กน้อย นั่นคือ:

การสร้างสัญญาณ sine wave (Vector)
Code:
// Generate 10 cycles of sine wave and create Path
QVector<qreal> y (pix.width());
qreal nc = 10.0;
qreal ga = pix.height()/2;
for(int x = 0; x<y.size(); x++) {
y[x] = ga + (-ga * qSin(2.0*M_PI * nc * (qreal)x / (qreal)y.size()));
}
คณิตศาสตร์ พื้นฐานมัธยมต้น ร่วมกับ Scaling and Shifting เล็กน้อย เพื่อให้เข้ากันกับรูปแบบการแสดงผลในระบบคอมพิวเตอร์ นั่นเอง

ส่วนต่อไปคือเปลี่ยนจาก x,y data เป็น Path เพื่อให้ง่ายต่อการวาด:
Code:
// Vector to Path object
QPainterPath path;
path.moveTo(0,y[0]);
for(int x = 0; x < y.size(); x++) {
path.lineTo(QPointF(x, y[x]));
}
จากข้อมูลดิบใน Vector y ทำการเปลี่ยนเป็น PointF เพื่อกำหนดต่ำแหน่งในระนาบการวาด หรือทางเดินของ Path object นั่นเอง

สุดท้่ายคือการสร้างปากกามาใช้วาดเส้น แล้วส่งต่อ ทั้ง Pen และ Path ให้กับ Painter เพื่อทำการวาด:
Code:
// Black Pen, 2 pixels width
QPen pen(Qt::black, 2);
paint->setPen(pen);

// Draw the Path (Sine wave) on the Draw Board
//paint->setRenderHint(QPainter::Antialiasing, true);
paint->drawPath(path);
delete paint;

ลองทำการ un-comment บรรทัด:
Code:
//paint->setRenderHint(QPainter::Antialiasing, true);
และเปรียบเทียบเส้นสัญญาณนี้ กับรูปด้านบน ความแตกต่างนี้คือผลของการใช้ Antialiasing นั่นเอง


บันทึกการเข้า

By SDW: Do No Wrong Is Do Nothing
          If you want to increase your success rate, double your failure rate
caso
Newbie
*
ออฟไลน์ ออฟไลน์

กระทู้: 2


| |
« ตอบ #1 เมื่อ: เมษายน 27, 2017, 01:47:19 pm »

ขอบคุณครับ              smiley                goldenslot
บันทึกการเข้า
หน้า: [1]   ขึ้นบน
  พิมพ์  
 
กระโดดไป: