Open_polyline. Display Engine. window. Rectangle. draw() attach() draw() attach() draw()

(1)

Ch

t

13 Ch

t

13

Chapter 13

Chapter 13 Graphics classes

Graphics classes

Bjarne Stroustrup

www.stroustrup.com/Programming www.stroustrup.com/Programmingpp gg gg

Abstract

Chapter 12 demonstrates

Chapter 12 demonstrates how to

how to create

create simple

simple windows

windows and

and

display

display basic

basic shapes: square, circle, triangle, and ellipse;

shapes: square, circle, triangle, and ellipse; It

It

showed how to manipulate such shapes: change

showed how to manipulate such shapes: change colors and line

colors and line

showed how to manipulate such shapes: change

showed how to manipulate such shapes: change colors and line

colors and line

style, add text,

style, add text, etc.

etc.

Chapter 13 shows how these shapes and operations are

implemented, and shows a few more examples. In Chapter 12,

we were basically tool users; here we become tool builders.

(2)

Overview

Graphing

Model Model

Code organizationCode organizationgg

Interface classes

PointPoint LineLine LinesLines GridGrid

Open Open PolylinesPolylines

Closed Closed PolylinesPolylines

ColorColor

TextText

Unnamed objectsUnnamed objects

3 3 Stroustrup/Programming Stroustrup/Programming

Display model

Open_polyline

_draw()

“window”

Display

Engine

attach() attach() draw()

(3)

Code organization

FLTK headers t t P i t { } Point.h: // Graphing interface: struct Point { … }; … // window interface: class Window {…}; … FLTK code Window.h: Graph.h: struct Point { … }; // GUI interface: struct In_box { … }; … Gui.h 5 5 Graph code Window code chapter12.cpp: Window.cpp: #include "Graph.h" #include "Window.h" int main() { … } Graph.cpp: GUI code GUI.cpp: Stroustrup/Programming Stroustrup/Programming

Source files

Header

File that contains interface information (declarations)File that contains interface information (declarations)

#include#includein user and implementerin user and implementer

cpp (“code file” / “implementation file”)

.cpp ( code file / implementation file )

File that contains code implementing interfaces defined in headers File that contains code implementing interfaces defined in headers and/or uses such interfaces

and/or uses such interfaces

#include#includes headerss headers

Read the

Graph.hGraph.h

header

And later the And later the graph.cppgraph.cppimplementation fileimplementation file

Don’t read the

Window.hWindow.h

header or the

window.cppwindow.cpp

implementation file

(4)

Design note

The ideal of program design is to represent concepts

directly in code

We take this ideal very seriouslyWe take this ideal very seriouslyyy yy

For example:

WindowWindow–– a window as we see it on the screena window as we see it on the screen

Will look different on different operating systems (not our business)Will look different on different operating systems (not our business)

LineLine–– a line as you see it in a window on the screena line as you see it in a window on the screen

PointPoint–– a coordinate pointa coordinate point

ShapeShape what’s common to shapeswhat’s common to shapes

ShapeShape–– what s common to shapeswhat s common to shapes

(imperfectly explained for now; (imperfectly explained for now; all details in Chapter 14)all details in Chapter 14)

ColorColor–– as you see it on the screenas you see it on the screen

Point

namespace

namespace Graph_libGraph_lib // // our graphics interface is in our graphics interface is in Graph_libGraph_lib {{

struct

struct PointPoint //// a Point is simply a pair ofa Point is simply a pair of intsints (the coordinates)(the coordinates) struct

struct Point Point // // a Point is simply a pair of a Point is simply a pair of intsints (the coordinates)(the coordinates) {

{ int int x, y;x, y; Point(

Point(intint xx, xx, intint yyyy) : x(xx), y() : x(xx), y(yyyy) { }) { } };

(5)

Line

struct

struct Shape Shape {{ //

// hold hold lines represented as pairs of lines represented as pairs of pointspoints //

// knows how to display linesknows how to display lines };

}; }; }; struct

struct Line : Shape Line : Shape // // a a Line Line is ais a Shape Shape defined by just twodefined by just two PointsPoints {{ Line(Point p1, Point p2); Line(Point p1, Point p2); }; }; Line::Line(Point p1, Point p2)

Line::Line(Point p1, Point p2) // // construct a line from p1 to p2construct a line from p1 to p2 {{

add(p1);

add(p1); // // add p1 to this shape (add() is provided by Shape)add p1 to this shape (add() is provided by Shape) add(p2);

add(p2); // // add p2 to this shapeadd p2 to this shape }} 9 9 Stroustrup/Programming Stroustrup/Programming

Line example

//

// draw two lines:draw two lines: using

using namespace namespace Graph_libGraph_lib;;

Si l i d

Si l i d i (P i t(100 100) 600 400 "Ci (P i t(100 100) 600 400 "C ")") //// kk i di d Simple_window

Simple_window win(Point(100,100),600,400,"Canvas"); // win(Point(100,100),600,400,"Canvas"); // make amake a windowwindow Line horizontal(Point(100,100),Point(200,100));

Line horizontal(Point(100,100),Point(200,100)); // // make a make a horizontal linehorizontal line Line vertical(Point(150,50),Point(150,150));

Line vertical(Point(150,50),Point(150,150)); // // make a make a vertical linevertical line win.attach

win.attach(horizontal);(horizontal); // // attach the lines to the windowattach the lines to the window win.attach

win.attach(vertical);(vertical); win.wait_for_button

(6)

Line example

_{Individual lines are independent}

horizontal.set_color

horizontal.set_color(Color::red);(Color::red); vertical.set_color

(7)

Lines

struct

struct Lines : Shape Lines : Shape {{ // // a a Lines Lines object is a object is a set linesset lines //

// We use Lines when we want to manipulateWe use Lines when we want to manipulate //

// all the lines as one shape, e.g. move them allall the lines as one shape, e.g. move them all void add(Point p1, Point p2);

void add(Point p1, Point p2); // // add line from p1 to p2add line from p1 to p2 void

void draw_linesdraw_lines() const;() const; // // to be called byto be called by Window Window to drawto draw LinesLines };

};

Terminology:

Lines is “derived from” ShapeLines is “derived from” Shape

Lines is derived from ShapeLines is derived from Shape

Lines “inherit from” ShapeLines “inherit from” Shape

Lines is “a kind of” ShapeLines is “a kind of” Shape

Shape is “the base” of LinesShape is “the base” of Lines

This is the key to what is called “object

This is the key to what is called “object--oriented programming”

oriented programming”

We’ll We’ll get back to get back to this in Chapter 14this in Chapter 14

Lines Example

Lines x; Lines x; ( i (100 100) i (200 100)) ( i (100 100) i (200 100)) //// hh l ll l x.add

x.add(Point(100,100), Point(200,100));(Point(100,100), Point(200,100)); // // horizontal linehorizontal line x.add

x.add(Point(150,50), Point(150,150));(Point(150,50), Point(150,150)); // // vertical linevertical line win.attach

win.attach(x);(x); // // attach Lines x to Window winattach Lines x to Window win win.wait_for_button

(8)

Lines example

Looks exactly like the two

Line

s example

Implementation: Lines

void Lines::add(Point p1, Point p2)

void Lines::add(Point p1, Point p2) // // use Shape’s add()use Shape’s add() {{ Shape::add(p1); Shape::add(p1); Sh dd( 2) Sh dd( 2) Shape::add(p2); Shape::add(p2); }} void Lines::

void Lines::draw_linesdraw_lines() const() const // // to somehow be called from Shapeto somehow be called from Shape {{

for (

(9)

Draw Grid

(Why bother with

Lines

when we have

Line

?)

//

// A A Lines Lines object may hold many related linesobject may hold many related lines //

// Here we construct a grid:Here we construct a grid: i t

i t ii ii ()()

int

int x_sizex_size = = win.x_maxwin.x_max();(); int

int y_sizey_size = = win.y_maxwin.y_max(); (); int

int x_gridx_grid = 80;= 80; int

int y_gridy_grid = 40;= 40; Lines grid Lines grid;; for (

for (intint x=x=x_gridx_grid; x<; x<x_sizex_size; x+=; x+=x_gridx_grid)) //// veritcalveritcal lineslines grid.add

grid.add(Point(x,0(Point(x,0),Point(),Point(x,y sizex,y size));)); grid.add

grid.add(Point(x,0(Point(x,0),Point(),Point(x,y_sizex,y_size));)); for (

for (intint y = y = y_gridy_grid; y<; y<y_sizey_size; y+=; y+=y_gridy_grid)) // // horizontal lineshorizontal lines grid.add

grid.add(Point(0,y(Point(0,y),Point(),Point(x_size,yx_size,y));)); win.attach

win.attach(grid(grid); // ); // attach our grid to our attach our grid to our window (note grid is one objectwindow (note grid is one object

Grid

(10)

Color

struct

struct Color Color {{ //// Map FLTK colors and scope them;Map FLTK colors and scope them; //

// deal with visibility/transparencydeal with visibility/transparency enum

enum Color_typeColor_type { red=FL_RED, blue=FL_BLUE, /* { red=FL_RED, blue=FL_BLUE, /* …… */ };*/ }; enum

enum Transparency { visible=0 invisible=255 };Transparency { visible=0 invisible=255 }; enum

enum Transparency { visible=0, invisible=255 };Transparency { visible=0, invisible=255 }; Color(

Color(Color_typeColor_type cc) :c(cc) :c(Fl_ColorFl_Color(cc(cc)), v(visible) )), v(visible) { }{ } Color(

Color(intint cc) :c(cc) :c(Fl_ColorFl_Color(cc(cc)), v(visible) )), v(visible) { { }} Color(

Color(Color_typeColor_type cc, Transparency t) :c(cc, Transparency t) :c(Fl_ColorFl_Color(cc)), v(t) { }(cc)), v(t) { } int

int as_intas_int() const { return c; () const { return c; }}

Transparency visibility() { return v; } Transparency visibility() { return v; } void

void set visibilityset visibility(Transparency t) { v = t; }(Transparency t) { v = t; } void

void set_visibilityset_visibility(Transparency t) { v = t; }(Transparency t) { v = t; } private

private:: Fl_Color Fl_Color cc;; Transparancy

Transparancy v;v; // // visibility (transparency not yet implemented)visibility (transparency not yet implemented) }; }; 19 19 Stroustrup/Programming Stroustrup/Programming

Draw

Draw red

red grid

grid

grid.set_color

(11)

Line_style

struct

struct Line_styleLine_style {{ enum

enum Line_style_typeLine_style_type {{ solid=FL_SOLID, solid=FL_SOLID, // // --- ---dash=FL_DASH, dash=FL_DASH, // // --dot=FL DOT, dot=FL DOT, //// ...... dot FL_DOT, dot FL_DOT, // // ... ... dashdot dashdot=FL_DASHDOT,=FL_DASHDOT, // // -- . . -- . . dashdotdot dashdotdot=FL_DASHDOTDOT,=FL_DASHDOTDOT, // // --....--.... }; }; Line_style Line_style((Line_style_typeLine_style_type ssss) :s() :s(ssss), w(0) { }), w(0) { } Line_style

Line_style((Line_style_typeLine_style_type lstlst, , intint wwww) :s() :s(lstlst), w(), w(wwww) { }) { } Line_style

Line_style((intint ssss) :s() :s(ssss), w(0) { }), w(0) { } int

int width() const { return w; }width() const { return w; } int

int style() const { return s; }style() const { return s; } private: private: int int s;s; int int w;w; }; }; 21 21 Stroustrup/Programming Stroustrup/Programming

Example: colored fat dash grid

grid.set_style

(12)

Polylines

struct

struct Open_polylineOpen_polyline : Shape {: Shape { // // open sequence of linesopen sequence of lines void add(Point p) { Shape::add(p); }

void add(Point p) { Shape::add(p); } };

}; struct

struct Closed_polylineClosed_polyline : : Open_polylineOpen_polyline {{ // // closed sequence of linesclosed sequence of lines void

void draw_linesdraw_lines() const() const {{

Open_polyline

Open_polyline::::draw_linesdraw_lines(); // (); // draw lines (except the closing one)draw lines (except the closing one) //

// draw the closing line:draw the closing line: fl_line

fl_line(point((point(number_of_pointsnumber_of_points()()--1).x,1).x, point(

point(number_of_pointsnumber_of_points()()--11).y,).y, i t(0)

i t(0) i ti t(0)(0) )) point(0).

point(0).x,pointx,point(0).y );(0).y ); }}

void add(Point p) { Shape::add(p); } void add(Point p) { Shape::add(p); } }; }; 23 23 Stroustrup/Programming Stroustrup/Programming

Open_polyline

Open_polyline Open_polyline oplopl;; opl.add opl.add(Point(100,100(Point(100,100));)); opl.add opl.add(Point(150,200(Point(150,200));)); opl.add opl.add(Point(250,250(Point(250,250));)); opl.add opl.add(Point(300,200(Point(300,200)); ));

(13)

Closed_polyline

Closed_polyline Closed_polyline cplcpl;; cpl.add cpl.add(Point(100,100));(Point(100,100)); cpl.add cpl.add(Point(150,200));(Point(150,200)); cpl.add cpl.add(Point(250,250));(Point(250,250)); cpl.add cpl.add(Point(300,200)); (Point(300,200)); 25 25 Stroustrup/Programming Stroustrup/Programming

Closed_polyline

cpl.add cpl.add(Point(100,250));(Point(100,250));

(14)

Text

struct

struct Text : Shape Text : Shape {{

Text(Point x, const string& s

Text(Point x, const string& s)) //// xx is the bottom left of the first letteris the bottom left of the first letter Text(Point x, const string& s

Text(Point x, const string& s) ) // // xx is the bottom left of the first letteris the bottom left of the first letter :

: lab(slab(s),), fnt

fnt((fl_fontfl_font()),()), // // default character fontdefault character font fnt_sz

fnt_sz((fl_sizefl_size())()) // // default character sizedefault character size {

{ add(x); add(x); }} // // store x in the Shape part of the Textstore x in the Shape part of the Text void

void draw_linesdraw_lines() const;() const; //

// … the usual “getter and setter” member functions …… the usual “getter and setter” member functions … private:

private: string lab;

string lab; // // labellabel Font

Font fntfnt;; // // character font of labelcharacter font of label int

int fnt_szfnt_sz;; // // size of characterssize of characters }; }; 27 27 Stroustrup/Programming Stroustrup/Programming

Add text

Text t(Point(200,200), "A closed

Text t(Point(200,200), "A closed polylinepolyline that isn’t a polygon");that isn’t a polygon");

t t l

t t l (C l(C l blbl )) t.set_color

(15)

Implementation: Text

void Text::

void Text::draw_linesdraw_lines() const() const {{

fl draw

fl draw((lab.c strlab.c str(), point(0).x, point(0).y);(), point(0).x, point(0).y); fl_draw

fl_draw((lab.c_strlab.c_str(), point(0).x, point(0).y);(), point(0).x, point(0).y); }}

//

// fl_drawfl_draw() is a basic text drawing function from FLTK() is a basic text drawing function from FLTK

Color matrix

Let’s draw a color matrix

(16)

Color Matrix (16*16)

Simple_window

Simple_window win20(pt,600,400,"16*16 color matrix");win20(pt,600,400,"16*16 color matrix"); Vector ref

Vector ref<Rectangle><Rectangle> vrvr; //; // use like vectoruse like vector Vector_ref

Vector_ref<Rectangle> <Rectangle> vrvr; // ; // use like vectoruse like vector //

// but imagine that it holds references to objectsbut imagine that it holds references to objects for (int i = 0; i<16; ++i) {

for (int i = 0; i<16; ++i) { // // i is the horizontal coordinatei is the horizontal coordinate for (

for (intint j = 0; j<16; ++j) {j = 0; j<16; ++j) { // // j is the vertical coordinatej is the vertical coordinate vr.push_back

vr.push_back(new Rectangle(Point((new Rectangle(Point(ii*20,j*20),20,20));*20,j*20),20,20)); vr

vr[[vr.sizevr.size()()--1].1].set_fill_colorset_fill_color((ii*16+j);*16+j); win20.attach(

win20.attach(vrvr[[vr.sizevr.size()()--1]);1]); }}

//

// new new makes an object that you can give to a makes an object that you can give to a Vector_refVector_ref to holdto hold //

// Vector_refVector_ref is built using is built using std::vectorstd::vector, but is not in the standard library, but is not in the standard library