Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
Tutoriel - Introduction à DirectWrite DirectWrite
Microsoft France Division DPE:
Mentions légales
Ce document est un projet et peut faire l’objet de modifications avant d'être mis en vente sur le marché de logiciels qui y sont décrits.
Les informations contenues dans ce document représentent l'opinion actuelle de Microsoft Corporation sur les questions analysées à la date
de publication. Étant donné que Microsoft doit répondre aux conditions changeantes du marché, il ne devrait pas être interprété comme un
engagement de la part de Microsoft, et Microsoft ne peut garantir l'exactitude de toute information présentée après la date de publication.
Ce tutoriel est diffusé à titre informatif uniquement. MICROSOFT NE DONNE AUCUNE GARANTIE, EXPRESSE, IMPLICITE OU STATUTAIRE, DE
L'INFORMATION DANS CE DOCUMENT.
Le respect de toutes les lois applicables en matière de droits d'auteur relève de la responsabilité de l'utilisateur.
Sans limiter les droits d'auteur, aucune partie de ce document ne peut être reproduite, stockée ou introduite dans un système d'extraction ou
transmise sous aucune forme ou par quelque moyen que ce soit (électronique, mécanique, par photocopie, enregistrement ou autre), ou pour
toute effet, sans l'autorisation expresse et écrite de Microsoft Corporation.
Microsoft peut déposer des brevets, demandes de brevets, marques, droits d'auteur ou autres droits de propriété intellectuelle couvrant les
sujets de ce document. Sauf dans les cas expressément prévus par un contrat de licence conclu avec Microsoft, la fourniture de ce document
ne vous donne aucun droit de licence sur ces brevets, marques, droits d'auteur ou autres droits de propriété intellectuelle.
© 2008 Microsoft Corporation. Tous droits réservés.
Microsoft, MS-DOS, Windows, Windows NT, Windows Server, Windows Vista, Active Directory, ActiveSync, ActiveX, Direct3D, DirectDraw,
DirectInput, DirectMusic, DirectPlay, DirectShow, DirectSound, DirectX, Expression, FrontPage, HighMAT, Internet Explorer, JScript , Microsoft
Press, MSN, Outlook, PowerPoint, SideShow, Silverlight, Visual Basic, Visual C + +, Visual InterDev, Visual J + +, Visual Studio, WebTV,
médias de Windows, Win32, Win32s, et Zune sont des marques déposées ou des marques déposées de Microsoft Corporation aux les États-
Unis et / ou dans d'autres pays.
Les noms de sociétés et de produits mentionnés dans ce document sont des marques déposées de leurs propriétaires respectifs.
Sommaire
RESUME ...................................................................................................................................................... 3
INTRODUCTION .......................................................................................................................................... 3
OBJECTIFS .................................................................................................................................................. 3
PRE REQUIS ................................................................................................................................................ 3
AUDIENCE ................................................................................................................................................... 4
EXERCICE 1: DESSINER UN SIMPLE TEXTE .......................................................................................... 4 L'interface IDWriteFactory .................................................................................................................................4
L'interface IDWriteTextFormat ...........................................................................................................................4
Contexte de rendu Direct2D et brosses .............................................................................................................4
EXERCICE 2 : DESSINER UN TEXTE AVEC PLUSIEURS FORMATAGES. ........................................... 6 L'interface IDWriteTextLayout 6
L'interface IDWriteTypography 7
CONCLUSION ............................................................................................................................................ 10
Résumé Ce tutoriel vous montre la manière d'utiliser les nouvelles API DirectWrite, afin de formater et d'afficher un
texte à l'écran, ainsi que la façon de les utiliser avec Direct2D pour un rendu graphique.
Ce tutoriel est constitué de 2 parties,
Dans la première, nous créerons et formaterons un texte simple.
Dans la seconde, nous manipulerons de multiple formats
Introduction DirectWrite est une nouvelle API DirectX, qui permet aux applications de supporter un rendu texte de haute
qualité et qui supporte les fonctionnalités suivantes :
Indépendante du périphérique, DirectWrite améliore la lisibilité des documents (Text Layout)
Rendu des textes, en High-Quality, subpixel, et ClearType®, qui peuvent utiliser des techniques telles que
le GDI, Direct2D, ou un rendu spécifique à l'application.
Un jeu d'API conforme à Unicode
Accélération Matériel du texte, lorsque DirectWrite est utilisé avec Direct2D
Formatage de texte multiple
Support de typographie avancée de type OpenType®
Compatible avec le GDI
Objectifs
Temps estimé pour compléter ce tutoriel : 30–35 minutes
Dans ce tutoriel vous allez apprendre à :
Formater et disposer un texte
Modifier un formatage et utiliser de la typographie
Pré requis Pour compléter cet exercice vous devez avoir :
Microsoft Visual Studio 2008 (ou supérieure)
Windows 7 SDK
Audience Avant de travailler sur ce tutoriel, il serait utile de connaitre :
Le développement Win32 et le langage C++
D'avoir des bases sur la programmation COM et ses concepts
Visual Studio
Exercice 1: Dessiner un simple texte Dans cet exercice, nous allons utiliser les API DirectWrite et Direct2D afin d'afficher un texte simple.
Informations :
Nous ciblons uniquement Windows 7. Vous noterez alors que dans le fichier d'entête targetver.h, nous
somme passé à une version 0x0610 correspondant à Windows 7.
Tous les fichiers de cet exercice sont localisés dans le répertoire C:\Windows 7 Labs\06 -
Graphiques\DirectWrite\Exercice 1\"
**Note: dans ce tutoriel, le code qui existe déjà dans les fichiers sources seront colorisés en gris (exemple).
Ceci afin de donner plus de sens au contexte lorsque vous suivrez les instructions d'ajout de nouveau code dans
Pour utiliser les API DirectWrite, il faut inclure dans le fichier DWrite.h et ajoutez la librairie DWrite.LIB
Le projet Visual Studio contient du code commenté. Vous pouvez soit le dé commenter, soit écrire le votre.
L'interface IDWriteFactory
L'interface IDWriteFactory est l'interface racine de tous objets DirectWrite qui est utilisée pour instancier
d'autres ressources DirectWrite. Pour créer cette interface on utilise la fonction DWriteCreateFactory
HRESULT DWriteCreateFactory(
__in DWRITE_FACTORY_TYPE factoryType,
__in REFIID iid,
__out IUnknown **factory
);
Le paramètre factoryType spécifie si la fabrique sera partagée ou isolée. Une fabrique partagée peu réutiliser
des fontes en cache et partagées entre différent composants. Lors du retour de la fonction le paramètre de
sortie factory contient la nouvelle fabrique.
L'interface IDWriteTextFormat
Une interface IDWriteTextFormat décrit les propriétés du formatage de texte, la fonte, sa taille, son
épaisseur de traits son style, etc.
Contexte de rendu Direct2D et brosses
Nous avons décrit en détail les Interface Direct2D que vous pourrez retrouver dans le tutoriel C:\Windows 7
Labs\06 - Graphiques\Direct2D\Introduction Tutoriel - Direct2D.docx.
Maintenant
c'est à vous !
Pour afficher un contenu DirectWrite, il nous faut utiliser des objets Direct2D tels que le contexte de rendu ainsi
qu'une brosse, ne soyez pas surpris alors de voir dans ces exercices des appels à Direct2D.
Note : Les méthodes de création de la fabrique Direct2D et le contexte de rendu sont
déjà disponibles respectivement dans les méthodes CreerFabrique et CreerRessourceDependanteHwndContext, pour de plus amples informations sur
la création de ses deux composants voir le tutoriel Direct2D (C:\Windows 7 Labs\06 -
Graphiques\Direct2D\Introduction Tutoriel - Direct2D.docx)
A la fin de cet exercice nous devrions obtenir le rendu suivant :
1. Ouvrez la solution Visual Studio : C:\Windows 7 Labs\06 - Graphiques\DirectWrite\Exercice
1\DirectWriteTutoriel\DirectWriteTutoriel.sln
2. Nous allons utiliser la fonction DWriteCreateFactory pour créer ue fabrique DirectWrite. Ajoutez
cet appel à la méthode DessinerUnSimpleTexteHwndContext HRESULT hr=S_OK;
CComPtr<IDWriteFactory> fabriqueDWrite;
hr=DWriteCreateFactory (DWRITE_FACTORY_TYPE_SHARED,
__uuidof(IDWriteFactory),
reinterpret_cast<IUnknown**>(&fabriqueDWrite));
if (FAILED(hr)) return -1;
3. Ensuite nous allons créer la chaîne Unicode à formater et à afficher par DirectWrite. On applique le
format à partir de l'interface IDWriteTextFormat comme ceci : LPCWSTR lpzMonTexte=L"Bonjour et Bienvenue dans ce tutoriel\n consacré à
DirectWrite";
size_t sizeTexte= wcslen(lpzMonTexte);
CComPtr<IDWriteTextFormat > textFormat;
hr=fabriqueDWrite->CreateTextFormat (L"Gabriola", NULL,
DWRITE_FONT_WEIGHT_REGULAR,
DWRITE_FONT_STYLE_NORMAL,
DWRITE_FONT_STRETCH_NORMAL,
65.0f,
L"fr-fr",
&textFormat);
if (FAILED(hr)) return -1;
La chaine de caractères aura pour fonte, Gabriola de taille 65, de densité normal
DWRITE_FONT_WEIGHT_REGULAR (epaisseur des traits), de style droit DWRITE_FONT_STYLE_NORMAL
(par opposition à Italique ou Gras) , et d'un indice d'étirement normale par rapport à ça taille de base.
DirectWrite est capable d'étirer ou de diminuer automatiquement la fonte en fonction du
redimenssionnement de la zone cliente.
4. Ensuite nous allons aligner notre texte horizontalement et verticalement à l'aide des fonctions
SetTextAlignment et SetParagraphAlignment de l'interface IDWriteTextFormat
hr=textFormat->SetTextAlignment (DWRITE_TEXT_ALIGNMENT_LEADING);
if (FAILED(hr)) return -1;
hr=textFormat->SetParagraphAlignment (DWRITE_PARAGRAPH_ALIGNMENT_NEAR);
if (FAILED(hr)) return -1;
5. Avant de dessiner le texte, nous allons définir le rectangle dans lequel nous allons dessiner notre texte. RECT rc;
GetClientRect(_hwndParent,&rc);
D2D1_RECT_F layoutRect = D2D1::RectF(
static_cast<FLOAT>(rc.top),
static_cast<FLOAT>(rc.left),
static_cast<FLOAT>(rc.right - rc.left),
static_cast<FLOAT>(rc.bottom - rc.top));
6. Enfin nous utilisons la méthode DrawText du contexte de rendu _contextHwnd->DrawTextW (lpzMonTexte,
sizeTexte,
textFormat,
layoutRect,
_brosseBleue);
7. Enfin nous allons appeler notre méthode DessinerUnSimpleTexteHwndContext dans la procèdure
de fenêtre WndProc, pour la commande ID_DESSINER_UNSIMPLETEXTE. case ID_DESSINER_UNSIMPLETEXTE:
DessinerUnSimpleTexteHwndContext();
break;
Exercice 2 : Dessiner un texte avec plusieurs formatages. Dans cet exercice, nous décrivons la manière d'appliquer différent formatage à une chaine de caractères. Nous
utiliserons alors les interfaces IDWriteTextLayout et IDWriteTypography
L'interface IDWriteTextLayout L'interface décrit le formatage et la disposition de bloque de texte. Il est alors possible d'appliquer différent
formats à une portion de texte ainsi qu'une typographie particulière.
Maintenant
c'est à vous !
Pour créer une interface IDWriteTextLayout on utilise la fonction CreateTextLayout
HRESULT CreateTextLayout(
__in const WCHAR * string,
UINT32 stringLength,
IDWriteTextFormat * textFormat,
FLOAT maxWidth,
FLOAT maxHeight,
__out IDWriteTextLayout ** textLayout
);
Le paramètre string spécifie le texte à formater. Le paramètre stringLength spécifie le nombre de caractères
dans la chaine. Le paramètre textFormat décrit la famille de la police, l'épaisseur de trait, le style, l'étirement et
la taille de la police. Les paramètres maxWidth et maxHeight spécifies la dimension de la zone qui contiendra le
texte. Lors du retour de la fonction, le paramètre textLayout contient un pointeur sur l'objet à afficher.
L'interface IDWriteTypography DirectWrite supporte la possibilité d'ajouter des fonctionnalités typographique. Pour les utiliser, il faut créer un
objet IDWriteTypography et les ajouter avec la méthode AddFontFeature
Note : Les méthodes de création de la fabrique Direct2D et Le contexte de rendu sont déjà
disponibles respectivement dans les méthodes CreerFabrique (appelée dans
InitInstance) et CreerRessourceDependanteHwndContext, pour de plus
amples informations sur la création de ses deux composants voir le tutoriel Direct2D
(C:\Windows 7 Labs\06 - Graphiques\Direct2D\Introduction Tutoriel - Direct2D.docx)
Pour des soucis de clarté et de réutilisation, la création de la fabrique DirectWrite et du
Formatage de Texte ce fait dans les méthodes CreerFabriqueDirectWrite et CreerRessourceDirectWrite.
Le rendu de texte ce fait dans la méthode DessinerTexte appelée dans la procèdure
WndProc pour les messages WM_PAINT et WM_DISPLAYCHANGE
1. Ouvrez la solution Visual Studio C:\Windows 7 Labs\06 - Graphiques\DirectWrite\Exercice
2\DirectWriteTutoriel\DirectWriteTutoriel.sln
2. Pour modifier une portion d'un texte nous devons utiliser l'interface IDWriteTextLayout.
Ouvrez le fichier d'entête DirectWriteTutoriel.h et ajoutez-y les déclarations suivantes : CComPtr<IDWriteTextFormat > _textFormat;
CComPtr<ID2D1SolidColorBrush> _brosseBleue;
D2D1_RECT_F _layoutRect;
CComPtr<IDWriteTextLayout> _textLayout;
D2D1_POINT_2F _origine;
3. Ensuite nous allons créer l'interface IDWriteTextLayout. Ouvrez le fichier
DirectWriteTutoriel.cpp et dans la fonction CreerRessourceDirectWrite ajoutez-y à la fin
le code suivant :
_layoutRect = D2D1::RectF(
static_cast<FLOAT>(rc.top),
static_cast<FLOAT>(rc.left),
static_cast<FLOAT>(rc.right - rc.left),
static_cast<FLOAT>(rc.bottom - rc.top));
_origine= D2D1::Point2F(static_cast<FLOAT>(rc.top),
static_cast<FLOAT>(rc.left));
hr=_fabriqueDWrite->CreateTextLayout (_lpzTexte,
_sizeTexte,
_textFormat,
640.0f,
480.0f,
&_textLayout);
if (FAILED(hr)) return hr;
ici nous instancions dans la structure _origine de type D2D1_POINT_2F le point de départ du rendu
de la chaine. Enfin nous créons l'interface _textLayout, avec les caractèristiques suivantes :
La chaine a afficher, sa taille, le formatage à appliquer à la chaine, la largeur et la hauteur de la surface
de rendu.
4. Ensuite nous allons préciser la position et le nombre de caractères sur lesquels nous souhaitons
appliquer un formatage différent. hr=_fabriqueDWrite->CreateTextLayout (_lpzTexte,
_sizeTexte,
_textFormat,
640.0f,
480.0f,
&_textLayout);
DWRITE_TEXT_RANGE texteRange;
texteRange.startPosition =26;
texteRange.length =13;
Ici nous modifirons 13 caractères à partir de la 26ième positions.
5. Enfin, nous allons appliquer différents styles à notre selection texteRange. Tels que, une taille de
100, un surlignage, et un style gras. DWRITE_TEXT_RANGE texteRange;
texteRange.startPosition =18;
texteRange.length =2;
hr=_textLayout->SetFontSize (100.f,texteRange);
hr=_textLayout->SetUnderline(TRUE,texteRange);
hr=_textLayout->SetFontWeight(DWRITE_FONT_WEIGHT_BOLD, texteRange);
6. Maintenant nous allons indiquer à notre contexte de rendu que nous souhaitons dessiner ce nouveau
formatage en utilisant sa méthode DrawTextLayout. Dans la méthode DessinerTexte, ajoutez
l'appel suivant : _contextHwnd->DrawTextLayout (_origine,_textLayout,_brosseBleue);
7. Compilez et testez l'application, vous devriez voir la sortie suivante :
8. Pour embellir notre texte, nous allons y appliquer une typographie en utilisant l'interface
IDWriteTypography. .
- Dans le fichier d'entête DirectWriteTutoriel.h ajoutez la déclaration suivante : CComPtr<IDWriteTypography> _typography;
- Dans la méthode CreerRessourceDirectWrite ajoutez-y le code de création de l'objet
Typographique. hr=_fabriqueDWrite->CreateTypography (&_typography);
- Puis nous allons définir la typographie à utiliser. DWRITE_FONT_FEATURE fontFeature;
fontFeature.nameTag = DWRITE_FONT_FEATURE_TAG_STYLISTIC_SET_7;
fontFeature.parameter =1;
hr=_typography->AddFontFeature (fontFeature);
- Enfin nous définissons la région sur laquelle nous voulons affecter la typographie. DWRITE_TEXT_RANGE texteRange2={0,_sizeTexte};
hr=_textLayout->SetTypography (_typography,texteRange2);
Ici nous voulons que la typographie s'applique à l'intégralité du texte
9. Compilez et lancez l'application, vous devriez avoir le rendu suivant :
Conclusion Dans ce tutoriel, nous avons abordé les principes de bases le DirectWrite, , mais nous espérons qu'il vous a
donné envie de continuer