1、Rendering.RawAPI.GDI（http://www.gaclib.net/Demos/Rendering.RawAPI.GDI/Demo.html）
2、Rendering.RawAPI.Direct2D（http://www.gaclib.net/Demos/Rendering.RawAPI.Direct2D/Demo.html）

由于这两个Demo很像，而且Direct2D的比较复杂，所以我在这里介绍一下这个Direct2D的demo。

在Demo里面可以看到，我们可以使用GuiGDIElement或者GuiDirect2DElement来进行手工的绘图操作。这两个Element的使用有限制。当GacUI使用GDI绘图（SetupWindowsGDIRenderer）的时候才可以使用GuiGDIElement，对于Direct2D也是一样的。在使用它们进行绘图的时候，坐标用的是窗口的坐标。但是GacUI会在绘制的时候先加入一个clip，这样我们在绘制的时候就算绘制出了边界，也不会有任何不好的影响。而且这个clip的矩形范围会在渲染事件触发的时候给出。在这里我们先来看一下Direct2D的demo。

首先，整个程序的框架是这样子的：

#include "..\..\Public\Source\GacUI.h"
#include <math.h>
#include <Windows.h>

int CALLBACK WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int CmdShow)
{
    // SetupWindowsDirect2DRenderer() is required for GuiDirect2DElement
    return SetupWindowsDirect2DRenderer();
}

class Direct2DWindow : public GuiWindow
{
protected:

    // arguments.rt is ID2D1RenderTarget.
    void element_Rendering(GuiGraphicsComposition* sender, GuiDirect2DElementEventArgs& arguments)
    {
    }

    // The render target is going to be destroyed, any binded resources should be released.
    void element_BeforeRenderTargetChanged(GuiGraphicsComposition* sender, GuiDirect2DElementEventArgs& arguments)
    {
    }

    // The new render target is prepared, any binded resources are allowed to recreate now.
    void element_AfterRenderTargetChanged(GuiGraphicsComposition* sender, GuiDirect2DElementEventArgs& arguments)
    {
    }
public:
    Direct2DWindow()
        :GuiWindow(GetCurrentTheme()->CreateWindowStyle())
    {
        SetText(L"Rendering.RawAPI.Direct2D");
        SetClientSize(Size(640, 480));
        GetBoundsComposition()->SetPreferredMinSize(Size(640, 480));
        MoveToScreenCenter();
        {
            GuiDirect2DElement* element=GuiDirect2DElement::Create();
            element->Rendering.AttachMethod(this, &Direct2DWindow::element_Rendering);
            element->BeforeRenderTargetChanged.AttachMethod(this, &Direct2DWindow::element_BeforeRenderTargetChanged);
            element->AfterRenderTargetChanged.AttachMethod(this, &Direct2DWindow::element_AfterRenderTargetChanged);

            GuiBoundsComposition* composition=new GuiBoundsComposition;
            composition->SetAlignmentToParent(Margin(0, 0, 0, 0));
            composition->SetOwnedElement(element);
            GetContainerComposition()->AddChild(composition);
        }
    }
};

void GuiMain()
{
    Direct2DWindow window;
    GetApplication()->Run(&window);
}

在构造函数里面，我们创建了一个GuiDirect2DElement，然后把它放进一个会自动充满整个窗口的composition里面。然后我们需要监听三个事件（GDI只有一个，就是Rendering）：
1、Rendering。这个事件在窗口被绘制的时候调用。GacUI才用了一个低功耗的方法让程序不断的绘制自己，所以我们并不需要担心“如何刷新窗口”的这个问题。
2、BeforeRenderTargetChanged。在这个时候我们要清理掉我们创建出来的资源，譬如说画刷等等。
3、AfterRenderTargetChanged。在这个时候我们要建立一些绘图资源，譬如说画刷等等。

为什么下面两个函数那么蛋疼呢？因为Direct2D的类似画刷这样的东西，是必须跟一个ID2D1RenderTarget绑定在一起的，不同的render target之间的画刷不能共享。而且那个可怜的render target还有可能会失效，这个时候GacUI就要重新创建他们。所以无论如何，都必须监听这三个对象，除非我们只用GuiDirect2DElement来渲染文字（因为文字相关的资源是IDWriteFactory控制的，跟render target无关）。

在这个Demo里面，我们要画的是一个会动的钟。在这个钟里面我们要绘制4种线形：边框、时针、分针、秒针。因此我们需要4个不同的ID2D1SolidColorBrush。由于操作COM对象的时候总要去记得操作那个引用计数，特别的麻烦，而且还容易忘掉。所以我特地为大家提供了一个叫做ComPtr的东西。所以我们就可以这么声明、创建和释放他们：

ComPtr<ID2D1SolidColorBrush>            borderBrush;
ComPtr<ID2D1SolidColorBrush>            secondBrush;
ComPtr<ID2D1SolidColorBrush>            minuteBrush;
ComPtr<ID2D1SolidColorBrush>            hourBrush;

// The render target is going to be destroyed, any binded resources should be released.
void element_BeforeRenderTargetChanged(GuiGraphicsComposition* sender, GuiDirect2DElementEventArgs& arguments)
{
    borderBrush=0;
    secondBrush=0;
    minuteBrush=0;
    hourBrush=0;
}

// The new render target is prepared, any binded resources are allowed to recreate now.
void element_AfterRenderTargetChanged(GuiGraphicsComposition* sender, GuiDirect2DElementEventArgs& arguments)
{
    ID2D1SolidColorBrush* brush;
    {
        brush=0;
        arguments.rt->CreateSolidColorBrush(D2D1::ColorF(0.0f, 0.0f, 0.0f), D2D1::BrushProperties(), &brush);
        borderBrush=brush;
    }
    {
        brush=0;
        arguments.rt->CreateSolidColorBrush(D2D1::ColorF(0.0f, 0.0f, 1.0f), D2D1::BrushProperties(), &brush);
        secondBrush=brush;
    }
    {
        brush=0;
        arguments.rt->CreateSolidColorBrush(D2D1::ColorF(0.0f, 1.0f, 0.0f), D2D1::BrushProperties(), &brush);
        minuteBrush=brush;
    }
    {
        brush=0;
        arguments.rt->CreateSolidColorBrush(D2D1::ColorF(1.0f, 0.0f, 0.0f), D2D1::BrushProperties(), &brush);
        hourBrush=brush;
    }
}

想必大家都应该看清楚了。Before和After事件里面，GacUI都会提供用来绘图的ID2D1RenderTarget，这个时候必须正确的创建和释放资源。只要这些资源都建立了起来，那么剩下的就只有把一个时钟画出来了。画一个时钟还是很容易的，只需要那么几行代码就行了：

static const int                        Radius=200;
static const int                        LongScale=10;
static const int                        ShortScale=5;
static const int                        SecondLength=180;
static const int                        MinuteLength=150;
static const int                        HourLength=120;

float GetAngle(float second)
{
    return (second-15.0f)*3.1416f/30.0f;
}

void DrawLine(ID2D1RenderTarget* rt, ComPtr<ID2D1SolidColorBrush> brush, float angle, int width, int startLength, int endLength, int x, int y)
{
    float s=sin(angle);
    float c=cos(angle);
    float x1=(c*startLength)+(float)(x+Radius);
    float y1=(s*startLength)+(float)(y+Radius);
    float x2=(c*endLength)+(float)(x+Radius);
    float y2=(s*endLength)+(float)(y+Radius);
    rt->DrawLine(D2D1::Point2F(x1, y1), D2D1::Point2F(x2, y2), brush.Obj(), (float)width);
}

// arguments.rt is ID2D1RenderTarget.
void element_Rendering(GuiGraphicsComposition* sender, GuiDirect2DElementEventArgs& arguments)
{
    int w=arguments.bounds.Width();
    int h=arguments.bounds.Height();
    int x=arguments.bounds.Left()+(w-Radius*2)/2;
    int y=arguments.bounds.Left()+(h-Radius*2)/2;

    arguments.rt->DrawEllipse(D2D1::Ellipse(D2D1::Point2F((float)(x+Radius), (float)(y+Radius)), (float)Radius, (float)Radius), borderBrush.Obj());
    for(int i=0;i<60;i++)
    {
        int scale=i%5==0?LongScale:ShortScale;
        float angle=GetAngle((float)i);
        DrawLine(arguments.rt, borderBrush, angle, 1, Radius-scale, Radius, x, y);
    }

    DateTime dt=DateTime::LocalTime();
    {
        float angle=GetAngle(dt.hour*5+dt.minute/12.0f+dt.second/720.0f);
        DrawLine(arguments.rt, hourBrush, angle, 5, 0, HourLength, x, y);
    }
    {
        float angle=GetAngle(dt.minute+dt.second/60.0f);
        DrawLine(arguments.rt, minuteBrush, angle, 3, 0, MinuteLength, x, y);
    }
    {
        float angle=GetAngle((float)dt.second);
        DrawLine(arguments.rt, secondBrush, angle, 1, 0, SecondLength, x, y);
    }
}

然后我们就获得了下图：（LiveWrite真是太好了，cppblog的傻逼编辑器每次插入图片都会插入到一个诡异的位置中去）

这样我们就完成了一个时钟的制作了，而且也学会了如何在GacUI里面直接使用GDI和Direct2D绘图了。

    fontProperties是我自定义的一个结构就不用去管它了，参考MSDN就知道CreateTextFormat如何使用了。其中fontProperties.fontFamily是字体的名字。然后IDWriteTextFormat就扮演着GDI的“字体对象”的角色，可以用ID2D1RenderTarget进行绘制。ID2D1RenderTarget除了用IDWriteTextFormat当字体以外，还可以用IDWriteTextLayout当“添加多余信息的更复杂的字体”。测量文字的关键正是在这里。

    接下来我们借助IDWriteTextFormat来创建IDWriteTextLayout：

    这里看minSize就知道如何测量文字的字体了。

    在这里放一张暂时的图片。我抄了WPF的那种方法，从布局和绘图元素直接开始可以构造GUI，因此演示了如何使用这些东西来创造一个Win7的按钮（带动画的哦）打开Vczh Library++3.0，下载代码并打开Candidate\GUI\GuiDemo\GuiDemo.sln，按F5就可以看到了效果了：



    这一个是Direct2D渲染的结果（我在工程文件指定了DXSDK的绝对路径，如果你们安装的地方不同改掉它既可编译了）。按钮基本上跟win7的效果一摸一样，但是这里使用Direct2D进行渲染。当按钮尺寸变化的时候，那个复杂的边框和里面的两个渐变和文字都可以自动对齐——但是这并不是hard code的，而是GUI的“布局功能”可以配置成这个样子。像这两个按钮一直处于右下角也是“布局功能”可以提供的功能。大家可以理解为这东西类似于C#的TableLayoutPanel。

    现在刚刚做好了按钮——跟WPF一样可以更换template，不过因为反正没人需要动态更换template所以我把template写在了构造函数里面，因此换肤这种事情就变得相当简单了——只要用布局功能跟图元拼凑成一个复杂的图形，然后实现各个控件所规定的“template接口”响应外观控制的消息就行了，内置动画支持（这个要运行的时候才能观察到）。

    为了方便，我在工程里面除了Debug和Release以外还加入了DebugDirect2D和ReleaseDirect2D两个配置，可以自由切换观看demo。