Contents. Canvas and Graphical shapes Drawing Font and Text Bitmaps and Buffer Example Animation 3D-Graphics Hardware Support

Transcription

1 Graphics

2 Contents Canvas and Graphical shapes Drawing Font and Text Bitmaps and Buffer Example Animation 3D-Graphics Hardware Support

3 Introduction 2D and 3D graphics We will see how to use the canvas to draw something the way I/we/developer wishes. Basic shapes Drawing text, font, bitmap etc. Few exercises and samples to demonstrate the whole application on ho w to use these functionality. An insight on how to work with OpenGL(R) ES. 3

4 1 Graphical shapes and Canvas

5 Color ARGB8888 model Automatic down sampling for the target device Functions Getting/setting each channel Getting/setting the color value as a whole or to each channel Comparison (==,!=) Predefined colors Color::COLOR_BLACK, Color::COLOR_BLUE,... 5

6 Basic Graphical shapes Origin Top left corner of the screen Essential classes Point x, y Dimension width, height Rectangle x, y, width, height 6

7 Drawing Graphical shapes(1/2) DrawArc(rect, startangle, endangle, arcstyle) DrawEllipse(rect) DrawLine(point1, point2) DrawPolygon(pointList) DrawPolyline(pointList) DrawRectangle(rect) DrawRoundRectangle(rect, arcdimension) DrawTriangle(point1, point2, point3) 7

8 Drawing Graphical shapes(2/2) FillEllipse(color, rect) FillPolygon(color, pointlist) FillRectangle(color, rect) FillRoundRectangle(color, rect, arcdimension) FillTriangle(color, point1, point2, point3) SetPixel(point) 8

9 Canvas What is canvas? is a drawable rectangular region. Attributes of Canvas Font Foreground/Background color The color for drawing primitives (point, line, curve,...) Clip bounds Clipping rectangle Line style Currently only LINE_STYLE_SOLID Line width 9

10 Canvas Clipping and Copy Clipping When a clip rectangle is set, any drawing is restricted within the specified rectangular area. Basically used when we do want to draw only in a certain reason of the canvas. Copy Copy the content in a rectangle of a canvas to a rectangle (or point) of the target canvas 10

11 Clipping Example // In the previous example of frame drawing // Setting clipping bound pcanvas->setclipbounds(rectangle(150,150,180,200)); // drawing text pcanvas->drawtext(point(100, 145), GetAppName()); // filling blue triangle pcanvas->filltriangle(color::color_blue, Point(100,200), Point(300,400), Point(100,300)); // Line width pcanvas->setlinewidth(5); // Line color pcanvas->setforegroundcolor(color::color_red); pcanvas->drawtriangle(point(100,200), Point(300,400), Point(100,300)); 11

12 Clipping Example 12

13 Copying Example // Draw rectangle and text on the canvas pcanvas->fillrectangle(color::color_blue, Rectangle(100, 150, 200, 100)); pcanvas->setlinewidth(5); pcanvas->setforegroundcolor(color::color_red); pcanvas->drawrectangle(rectangle(98, 152, 202, 102)); pcanvas->drawtext(point(120, 190), GetAppName()); // Copy a part of canvas onto itself while scaling pcanvas->copy(rectangle(0,300,300,300),*pcanvas, Rectangle(0,100,250,100)); 13

14 Copying Example 14

15 2 Drawing

16 Form drawing Scenario Form (or other control)-based drawing Although a form is designed to manage the controls within it We can draw something within it(custom drawing) Most controls support custom drawing 16

17 Custom Drawing The function responsible Custom drawing is to be implemented in OnDraw() Requesting redraw Control::RequestRedraw(), an asynchronous call This will invoke OnDraw() of the control and its sub controls Drawing on Canvas Canvas acts as a graphical context Each control has a Canvas All drawing must be performed on the Canvas 17

18 Example: Custom Drawing(1/3) Create a form-based application Add OnDraw() method to the form class definition Implement OnDraw() Get the Canvas from the Form Draw something with the Canvas Delete the Canvas 18

19 Example: Custom Drawing(2/3) // In the class definition add OnDraw function virtual result OnDraw(); // In the Cpp file, implement OnDraw function using namespace Osp::Graphics; result DrawingForm::OnDraw(void) { // Getting canvas from the form Canvas* pcanvas = GetCanvasN(); // Drawing something with the canvas pcanvas->fillrectangle(color::color_red, Rectangle(100,100,100,100)); // delete the canvas it delete pcanvas; return E_SUCCESS; } 19

20 Example: Custom Drawing(3/3) 20

21 3 Font and Text

22 Drawing Text Constructing Font Font font; font.construct( style, size ); Setting Font pcanvas->setfont( font ); Drawing text pcanvas->drawtext( Blablabla ); 22

23 More about Font Construct Font name: get from static Font::GetSystemFontListN() Style FONT_STYLE_PLAIN, ITALIC, BOLD bitwise-or Size in point Settings Character space, strike out, underline Font metric Left/right bear, ascender, descender, max width/height 23

24 Text Drawing Example // At the same old function Font font; // Set font properties font.construct(font_style_italic,32); font.setunderline(true); // Set current font to use pcanvas->setfont(font); // Draw text at some position Point pt(30,30); pcanvas->drawtext(pt, Text Test ); 24

25 EnrichedText What is EnrichedText? is a class that enables application to support text with various styles, such as Fonts, colors, and layouts. Text element class Combination of String, text color, outline color, background color, and font Enriched text A set of text elements Layout support Vertical alignment (TEXT_ALIGNMENT_TOP, MIDDLE, BOTTOM) Horizontal alignment (TEXT_ALIGNMENT_LEFT, RIGHT, CENTER) Text warp (TEXT_WARP_NONE, CHARACTER_WARP, WORD_WARP) Line space & text abbreviation Supports Bitmaps, Various link types e.g. URL, etc. 25

26 EnrichedText Example // Create and construct enriched text EnrichedText etext; etext.construct(dimension(200,200)); // Setup the enriched text etext.sethorizontalalignment(text_alignment_right); etext.setverticalalignment(text_alignment_middle); etext.settextwrapstyle(text_wrap_character_wrap); etext.settextabbreviationenabled(true); // Preparing text elements TextElement& em1 =*(new TextElement); em1.construct( This is a string ); em1.settextcolor(color::color_blue); TextElement& em2 =*(new TextElement); em2.construct( to be drawn in\n ); em2.settextcolor(color::color_white); TextElement& em3 =*(new TextElement); em3.construct( enriched text ); em3.settextcolor(color::color_red); 26

27 EnrichedText Example // Adding text elements etext.add(em1); etext.add(em2); etext.add(em3); // Drawing Point pt(30,30); pcanvas->drawtext(pt, etext); // Deleting elements etext.removealltextelements(true); 27

28 4 Bitmaps and Buffer

29 Bitmap A raster image that can be Constructed from a part of another bitmap a part of a canvas a ByteBuffer a Osp::Media::Image class (by decoding an image file) and from scratch Drawn on Canvas (and is automatically scaled when necessary) Locked/Unlocked to get BufferInfo by direct pixel access 29

30 Bitmap Drawing Drawing as it is Canvas::DrawBitmap(point, bmp) Drawing with scaling Canvas::DrawBitmap(rect, bmp) Canvas::DrawBitmap(destRect, srcbmp, srcrect) Drawing with rotating Canvas::DrawBitmap(point, bmp, pivot, deg) Drawing with flipping Canvas::DrawBitmap(point, bitmap, flipdir) 30

31 Capture from Canvas Example MyApp::OnForeground(void) {... // Drawing things on the frame pcanvas->drawtext(point(30,30), GetAppName()); pcanvas->fillrectangle(color::color_blue, Rectangle(100,100,100,100)); } // Capture the frame into bitmap (0,0)-(200,200) Bitmap* pbitmap = new Bitmap(); pbitmap->construct(*pcanvas, Rectangle(0,0,200,200)); // Draw that bitmap onto the frame into its half size pcanvas->drawbitmap(rectangle(200,200,100,100), *pbitmap); 31

32 Capture from Canvas Example 32

33 Bitmap from Resource File // Create Osp::Media::Image to decode image file Image* pimage = new Image(); pimage->construct(); // Decode a file in Res of the project // to get bitmap Bitmap* pbitmap = pimage ->DecodeN("/Res/image.png", BITMAP_PIXEL_FORMAT_ARGB8888); //Alternatively can use AppResource::GetBitmapN( ) to load the Bitmap // Draw the image on the canvas pcanvas->drawbitmap(point(50,50),*pbitmap); pcanvas->drawbitmap(rectangle(150,150,100,100),*pbitmap); delete pimage; delete pbitmap; image.png 33

34 Bitmap from Resource File 34

35 Nine-Patched Bitmap Bitmap image with Non-stretchable four corners Stretchable five patches at left, right, top, bottom and center Stretchable part indicator one or more 1-pixel wide black lines 35

36 BufferInfo Buffer information for canvases and bitmaps Attributes BitPerPixel PixelFormat PIXEL_FORMAT_RGB565, PIXEL_FORMAT_ARGB8888, PIXEL_FORMAT_R8G8B8A8 PIXEL_FORMAT_YCbCr420_PLANAR PIXEL_FORMAT_JPEG Width, Height ppixels (pointer to the memory) Pitch (offset to the next scanline) 36

37 5 Examples

38 Drag Image Example A form-based application Show a picture User can drag the picture around the screen using touch Steps Create a form-based application Add and implement touch event listener to the form Implement OnDraw method on the form 38

39 Adding Data & Listeners on the Form class DragImageForm : public Osp::Ui::Controls::Form, public Osp::Ui::ITouchEventListener {... Protected: // Add some data to keep Osp::Graphics:: Point initialoffset; // the vector from the origin of picture to touch Osp::Graphics::Point position; // the current picture position Osp::Graphics::Bitmap* pbitmap; // bitmap image to draw bool moving; // if it is moving Public: // add a few methods result OnDraw(void); void OnTouchMoved (...); void OnTouchPressed (...); void OnTouchReleased (...); void OnTouchDoublePressed(... ); void OnTouchLongPressed(... ); void OnTouchFocusIn(... ); 39

40 Initialize Data and handle touch result DragImageForm::OnInitializing(void) {... // Adding touch event listener AddTouchEventListener(*this); // Creating image class to load image into bitmap // initialize other values position = Osp::Graphics::Point(100,100); moving = false;... } void DragImageForm::OnTouchPressed(const Control &src, const Point &pt, const TouchEventInfo &info) { // test if the user touch is on the image Rectangle rect(position, Dimension(pBitmap->GetHeight(), pbitmap->getheight())); if( rect.contains(pt) ) { // compute the offset of touch from the image offset = pt - position; moving = true; // set to start moving } }... 40

41 Finally OnDraw result DragImageForm::OnDraw(void) { // Get canvas from the form Osp::Graphics::Canvas* pcanvas = GetCanvasN(); // Clear the form pcanvas->clear(); // Draw the bitmap at the right place pcanvas->drawbitmap(position,*pbitmap); // Delete canvas delete pcanvas; } return E_SUCCESS; 41

42 You ve Done. Drag it 42

43 Animating Image Form-based application An image continuously moving Steps Prepare an image Add timer & timer listener At timer listener, tweak the position of image Draw image at the position 43

44 Adding Data & Listeners on the Form #include <FMedia.h> #include <FGraphics.h> // In the custom form class, class DragForm : public Osp::Ui::Controls::Form, public Osp::Base::Runtime::ITimerEventListener {... protected: // Add some data to keep // timer Osp::Base::Runtime::Timer* ptimer; // bitmap image to draw Osp::Graphics::Bitmap* pbitmap; // if it is moving float ypos; } 44

45 Adding Data & Listeners on the Form // Custom drawing function result OnDraw(void); // Timer event listener void OnTimerExpired( Osp::Base::Runtime::Timer& timer );... }; 45

46 Initialize Data result DragForm::OnInitializing(void) {... // Creating image class to load image Osp::Media::Image image; image.construct(); // Loading image into bitmap pbitmap = image.decoden( "/Res/image.png", Osp::Graphics::BITMAP_PIXEL_FORMAT_ARGB8888); // initialize other values ypos = 0.0; // Creating timer ptimer = new Osp::Base::Runtime::Timer; // Adding timer event listener ptimer->construct( *this ); ptimer->start(50); return r; } 46

47 At Each Time Tick // Timer event listener function void AnimForm::OnTimerExpired (Osp::Base::Runtime::Timer& atimer) { // Changing the position of image ypos+=0.05; // Repeat timer atimer.start(50); // Don t forget to request redraw RequestRedraw(); } 47

48 OnTerminating result DragForm::OnTerminating(void) { result r = E_SUCCESS; } // don t forget to delete the bitmap delete pbitmap; // and the timer ptimer->stop(); delete ptimer; return r; 48

49 Finally OnDraw result DragForm::OnDraw(void) { // Get canvas from the form Osp::Graphics::Canvas* pcanvas = GetCanvasN(); // Clear the form pcanvas->clear(); // Draw the bitmap at the right place Position pos(220,0); // Using sine function, the image will move up & down pos.y = Osp::Base::Utility::Math::Sin(ypos)* ; pcanvas->drawbitmap(pos,*pbitmap); // Delete canvas delete pcanvas; } return E_SUCCESS; 49

50 6 3D-Graphics

51 3D rendering in bada bada supports OpenGL ES 1.1/2.0 EGL 1.1 Fixed function pipeline 2.0 Fully programmable 3D graphics Graphics context management, surface/buffer binding, rendering synchronization Timer-based rendering loop 51

52 3D rendering in bada Timer-based rendering loop Step 1: Create a timer ptimer = new Timer; ptimer->construct(*this); ptimer->start(time_out); Step 2: Implement event listener class GlesCube11 : public Osp::Base::Runtime::ITimerEventListener void OnTimerExpired(Osp::Base::Runtime::Timer& timer); Step 3: Handle timer event void GlesCube11::OnTimerExpired(Timer& timer){ ptimer->start(time_out); Draw(); // draw something.. } 52

53 3D rendering in bada Initialize EGL bool GlesCube11::InitEGL() { EGLint numconfigs = 1; EGLint eglconfiglist[] = {/* */}; EGLint eglcontextlist[] = {/* */}; eglbindapi(egl_opengl_es_api); egldisplay = eglgetdisplay( (EGLNativeDisplayType)EGL_DEFAULT_DISPLAY); eglinitialize(egldisplay, null, null); eglchooseconfig(egldisplay, eglconfiglist, &eglconfig, 1, &numconfigs); eglsurface = eglcreatewindowsurface(egldisplay, eglconfig, (EGLNativeWindowType)pForm, null);... } 53

54 3D rendering in bada Checks OpenGLES version of device void Test1::CheckGLES(void) { String key(l"openglesversion"); String GLESVersion; } SystemInfo::GetValue(key,GLESVersion); AppLog("%ls", GLESVersion.GetPointer()); Result string Device Result Wave 1.1 Wave II 2 Wave525 NULL 54

55 Summary Canvas class is responsible for drawing something on controls Canvases support many geometric primitives bada text function covers simple and enriched texts Bitmap is a class to store a raster image that can be drawn on a Canvas scaled, flipped, rotated and 9-patch stretched. 55

56 Practice #1 Sketch app User can draw something with finger (sketch) Guide Basic algorithm draw line between the current position of touch and the previous position For efficiency, repeat Draw something on the memory canvas Copy memory canvas to window canvas Optionally add option menu to choose pen color 56

57 Practice #2 Photo previewer app Show pictures in the resource folder Guide Add five to ten pictures in the resource folder Using the touch event listener, respond to sweep motion Move picture back & forth on touch moves Optional When the touch is released, animate the picture so that one picture is visible on the screen 57

58 Practice #3 Labyrinth Drag the ball to the goal while keeping it away from the wall Guide Prepare ball image and brick image On draw, draw the bricks (maze) and the ball On touch event listener, track the touch to move ball Test if the ball is touching a brick (using only positions) If it does, move back the ball to start position Optional: count life 58