Edytor czcionek

Powrót do spisu treści

Wymagane jest zapoznanie się z następującymi podrozdziałami:

P019 - Pierwszy program dla Windows
OL031 - instalacja biblioteki SDL w środowisku Dev-C++
OL032 - inicjalizacja biblioteki SDL
OL033 - powierzchnie graficzne w SDL
OL034 - przygotowanie plików własnej biblioteki graficznej
OL035 - rysowanie po powierzchni graficznej
OL036 - algorytm Bresenhama rysowania odcinka
OL037 - obcinanie grafiki do prostokąta
OL038 - podstawowe algorytmy wypełniania obszarów
OL039 - algorytm Smitha
OL040 - praca w środowisku sterowanym zdarzeniami
OL041 - czcionka bitmapowa
OL042 - czcionka wektorowa
UWAGA!!!

Bieżące opracowanie NIE JEST KURSEM programowania biblioteki SDL. Są to materiały przeznaczone do zajęć na kole informatycznym w I LO w Tarnowie.

Przed pracą z tym rozdziałem utwórz w środowisku Dev-C++ nowy projekt SDL i dołącz do niego pliki SDL_gfx.cpp oraz SDL_gfx.h z katalogu C:\Dev-Cpp\include\SDL. Jeśli nie przeczytałeś zalecanych rozdziałów, koniecznie zrób to, a wszystko stanie się jasne. W przeciwnym razie odpuść sobie również ten rozdział. Opis funkcji bibliotecznych znajdziesz w podsumowaniu SDL008.

 

Artykuł nie jest już rozwijany


obrazek

Ręczne definiowanie czcionek bitmapowych i wektorowych jest bardzo czasochłonne. Z tych powodów zaprojektujemy prosty edytor, który w przyszłości będziemy mogli wykorzystywać do tworzenia nowych krojów pisma. Kroje nie muszą reprezentować literek - mogą np. zawierać kształty figur szachowych, żetonów, elementów elektronicznych stosowanych na schematach itp. Liczba możliwych zastosowań jest praktycznie ograniczona jedynie wyobraźnią programisty. Na początek określmy kilka "życzeń", które nasz edytor powinien spełniać.

  1. Edytor powinien być sterowany za pomocą klawiszy oraz myszką.
  2. Edytor edytuje czcionkę o nazwie font.fnt, która jest umieszczona w katalogu projektowym. Gdy czcionka będzie gotowa, możemy ją przekopiować pod inną nazwą do miejsca docelowego. Dzięki temu założeniu nie musimy programować modułu obsługi odczytu plików z systemu katalogów komputera. Oczywiście możesz sobie taki system zaprogramować rozszerzając funkcje edytora.
  3. Edytor powinien pozwalać na utworzenie nowego, pustego pliku font.fnt zarówno bitmapowego jak i wektorowego.
  4. Edytor powinien umożliwiać tworzenie kopii pliku font.fnt oraz odtwarzanie z kopii.
  5. Do pracy wybierzemy okno o rozdzielczości 800 x 600 pikseli.

Przygotowanie katalogu projektowego

Na dysku utwórz nowy katalog, w którym załóż projekt SDL edytora czcionek. Plik projektowy nazwij edit.dev. Do katalogu przekopiuj plik czcionki wektorowej vecprop9x12.fnt. Następnie przekopiuj do tego katalogu poniższy tekst pustej czcionki bitmapowej. Tekst umieść w pliku o nazwie font.fnt:

B
1 8
0 

Szablon programu edytora

Do zakładki main.cpp wprowadź poniższy tekst szablonu programu, który później odpowiednio rozbudujemy.

// I Liceum Ogólnokształcące
// w Tarnowie
// Koło informatyczne
//
// P028 - prosty edytor czcionek
//------------------------------

#include <SDL/SDL_gfx.h>

// Definicje stałych
//------------------------------------------------------------------

const int SCRX = 800;      // stałe określające szerokość i wysokość
const int SCRY = 600;      // ekranu w pikselach

// Deklaracje zmiennych globalnych
//------------------------------------------------------------------

SDL_Surface * screen;      // powierzchnia graficzna

SDL_Event event;           // struktura obsługi zdarzeń

// Funkcje
//------------------------------------------------------------------


// Program główny
//------------------------------------------------------------------

int main(int argc, char * argv[])
{

  if(SDL_Init(SDL_INIT_VIDEO)) exit(-1);

  atexit(SDL_Quit);
  
  if(!(screen = SDL_SetVideoMode(SCRX, SCRY, 32, SDL_HWSURFACE))) exit(-1);


//*****************************
// Tutaj umieścimy kod programu
//*****************************
  
  while(SDL_WaitEvent(&event))
  {
      switch(event.type)
      {
        case SDL_KEYDOWN:
        case SDL_QUIT: exit(0);
      }
  }

  return 0;
}

Na tym etapie program tworzy okno 800 x 600 pikseli i czeka na dowolny klawisz, po naciśnięciu którego okno jest zamykane.

Zmiana tytułu okna

Standardowo na pasku tytułowym okna SDL pojawia się napis SDL_app (aplikacja SDL). Bardzo prosto zmieniamy go na nasz własny przy pomocy wywołania funkcji bibliotecznej o nazwie SDL_WM_SetCaption(). Wstaw funkcję we wskazanym miejscu w programie:

//*****************************
// Tutaj umieścimy kod programu
//*****************************

 SDL_WM_SetCaption("Edytor Czcionek SDL_gfx (C)2007 I-LO","Edytor"); 

 while(SDL_WaitEvent(&event))
 {
    switch(event.type)

Pierwszy parametr funkcji SDL_WM_SetCaption() określa napis pojawiający się na pasku tytułowym. Drugi ma określać nazwę programu w postaci zminimalizowanej, ale w systemie Windows nie za bardzo to działa. Nie będziemy z tym walczyć (zainteresowanych rozwiązaniem odsyłam do funkcji bibliotecznej SDL_WM_SetIcon()).

Jeśli teraz skompilujesz i uruchomisz program, na pasku tytułowym pojawi się napis:

Edytor Czcionek SDL_gfx (C)2007 I-LO

Otwarcie czcionek

Edytor będzie pracował z dwoma czcionkami. Systemową vecprop9x12.fnt, którą wykorzystamy do tworzenia napisów oraz z czcionką edytowaną font.fnt. Na początku programu czcionki muszą być odczytane ze swoich plików. Dodaj do tekstu programu poniższy kod:


// Deklaracje zmiennych globalnych
//------------------------------------------------------------------

SDL_Surface * screen; // powierzchnia graficzna

SDL_Event event;      // struktura obsługi zdarzeń

gfxFont * sysfont = gfxOpenFont("vecprop9x12.fnt");

gfxFont * edtfont = gfxOpenFont("font.fnt");

// Funkcje
//------------------------------------------------------------------

Ekran powitalny

Ekran powitalny programu może nie jest najważniejszym elementem, ale pozwala na faktyczne rozpoczęcie pracy. Skoro mamy już ekran powitalny, to nie ma odwrotu - pracę musimy doprowadzić do końca. Ekran zrealizujemy w postaci funkcji, która wyświetli w oknie odpowiednią treść, odczeka, aż użytkownik kliknie myszką lub naciśnie dowolny klawisz, po czym wymaże cały ekran i powróci.

W programie wstaw następujący kod:

//*****************************
// Tutaj umieścimy kod programu
//*****************************

 SDL_WM_SetCaption("Edytor Czcionek SDL_gfx (C)2007 I-LO","Edytor");

 TitleScreen();

 while(SDL_WaitEvent(&event))
 {
    switch(event.type)

Następnie na początku programu wpisujemy definicję funkcji TitleScreen():

// Funkcje
//------------------------------------------------------------------

// Wyświetla ekran powitalny
//--------------------------
void TitleScreen()
{
  char * t[] = {"E D Y T O R   C Z C I O N E K",
                "dla biblioteki graficznej SDL_gfx",
                "(C)2007 Koło Informatyczne w I-LO w Tarnowie",
                "Naciśnij dowolny klawisz lub kliknij myszką."};
  
  if(SDL_MUSTLOCK(screen)) SDL_LockSurface(screen);
  
// wyznaczamy środek ekranu

  Sint32 x = screen->w >> 1;
  Sint32 y = screen->h >> 1;
  
// Obliczamy największą szerokość tekstu

  Sint32 maxlen = 0;
  Sint32 tlen[4];
 
  for(int i = 0; i < 4; i++)
  {
    tlen[i] = gfxTextLength(sysfont,t[i]);
    if(maxlen < tlen[i]) maxlen = tlen[i];
  }

// Rysujemy prostokąt obejmujący tekst

  SDL_Rect r;
  r.x = x - (maxlen >> 1) - sysfont->h;
  r.y = y - ((9 * sysfont->h) >> 1);
  r.w = maxlen + (sysfont->h << 1);
  r.h = 9 * sysfont->h;
  SDL_FillRect(screen, &r, 0x007fff);
  
// Zmniejszamy prostokąt i rysujemy go w nowym kolorze

  r.x += 3; r.y += 3; r.w -= 6; r.h -= 6;
  SDL_FillRect(screen, &r, 0x00ffff);
    
// Zmniejszamy prostokąt i rysujemy go w nowym kolorze

  r.x += 3; r.y += 3; r.w -= 6; r.h -= 6;
  SDL_FillRect(screen, &r, 0xffffff);
    
// napisy rysujemy z cieniami

  for(int i = 0; i < 4; i++)
  {
    Uint32 color;
    switch(i)
    {
      case 0 : color = 0xff0000; break;
      case 1 :
      case 2 : color = 0x000000; break;
      case 3 : color = 0x0000ff; break;
    }
    Sint32 xp = x - (tlen[i] >> 1);
    Sint32 yp = y - ((7 * sysfont->h) >> 1) + (i << 1) * sysfont->h;
    if(!i)
    {
      for(int j = 0; j < 2; j++)
        for(int k = 0; k < 2; k++)
          gfxDrawText(screen, sysfont, t[i], xp + j, yp + k, color, -1);
    }
    else
    {
      gfxDrawText(screen, sysfont, t[i], xp + 1, yp + 1, 0xafafaf, -1);
      gfxDrawText(screen, sysfont, t[i], xp, yp, color, -1);
    }
  }

  if(SDL_MUSTLOCK(screen)) SDL_UnlockSurface(screen);

  SDL_UpdateRect(screen, 0, 0, 0, 0);
  
// czekamy na klawisz myszki lub klawiatury

  while(SDL_WaitEvent(&event))
    if((event.type == SDL_KEYDOWN) || 
       (event.type == SDL_MOUSEBUTTONDOWN)) break;

// czyścimy ekran

  if(SDL_MUSTLOCK(screen)) SDL_LockSurface(screen);
  SDL_FillRect(screen, NULL, 0);
  if(SDL_MUSTLOCK(screen)) SDL_UnlockSurface(screen);

  SDL_UpdateRect(screen, 0, 0, 0, 0);
}

// Program główny
//------------------------------------------------------------------
obrazek

 

 

 

 

 


   I Liceum Ogólnokształcące   
im. Kazimierza Brodzińskiego
w Tarnowie

©2024 mgr Jerzy Wałaszek

Dokument ten rozpowszechniany jest zgodnie z zasadami licencji
GNU Free Documentation License.

Pytania proszę przesyłać na adres email: i-lo@eduinf.waw.pl

W artykułach serwisu są używane cookies. Jeśli nie chcesz ich otrzymywać,
zablokuj je w swojej przeglądarce.
Informacje dodatkowe