tutoriel - introduction à...

10
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.

Upload: others

Post on 24-May-2020

3 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Tutoriel - Introduction à DirectWritedownload.microsoft.com/documents/France/technet/2009/win... · 2018-12-05 · Tutoriel - Introduction à DirectWrite DirectWrite Microsoft France

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.

Page 2: Tutoriel - Introduction à DirectWritedownload.microsoft.com/documents/France/technet/2009/win... · 2018-12-05 · Tutoriel - Introduction à DirectWrite DirectWrite Microsoft France

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

Page 3: Tutoriel - Introduction à DirectWritedownload.microsoft.com/documents/France/technet/2009/win... · 2018-12-05 · Tutoriel - Introduction à DirectWrite DirectWrite Microsoft France

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

Page 4: Tutoriel - Introduction à DirectWritedownload.microsoft.com/documents/France/technet/2009/win... · 2018-12-05 · Tutoriel - Introduction à DirectWrite DirectWrite Microsoft France

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.

Page 5: Tutoriel - Introduction à DirectWritedownload.microsoft.com/documents/France/technet/2009/win... · 2018-12-05 · Tutoriel - Introduction à DirectWrite DirectWrite Microsoft France

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,

Page 6: Tutoriel - Introduction à DirectWritedownload.microsoft.com/documents/France/technet/2009/win... · 2018-12-05 · Tutoriel - Introduction à DirectWrite DirectWrite Microsoft France

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.

Page 7: Tutoriel - Introduction à DirectWritedownload.microsoft.com/documents/France/technet/2009/win... · 2018-12-05 · Tutoriel - Introduction à DirectWrite DirectWrite Microsoft France

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;

Page 8: Tutoriel - Introduction à DirectWritedownload.microsoft.com/documents/France/technet/2009/win... · 2018-12-05 · Tutoriel - Introduction à DirectWrite DirectWrite Microsoft France

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);

Page 9: Tutoriel - Introduction à DirectWritedownload.microsoft.com/documents/France/technet/2009/win... · 2018-12-05 · Tutoriel - Introduction à DirectWrite DirectWrite Microsoft France

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 :

Page 10: Tutoriel - Introduction à DirectWritedownload.microsoft.com/documents/France/technet/2009/win... · 2018-12-05 · Tutoriel - Introduction à DirectWrite DirectWrite Microsoft France

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