使用Composition API在带有C++；超宽带应用 我正在用VisualStudio 2017从空白模板开始使用一个示例通用Windows程序。我的目标是编写一个简单的UWP应用程序，它将显示一个模拟时钟面，显示当前时间以及时间更新和指针移动。一旦我在我的桌面PC上使用x86，我将把构建更改为ARM，并部署到运行Windows 10 IoT的Raspberry Pi 3 Model B 我发现了这个博客发布，但是它看起来是使用C++而不是C++。它有以下说明，这表明有一种使用合成界面的方法：

在本文中，我们将探讨Windows.UI.compositionAPI。这个 CompositionAPI是一个位于Windows 10之间的可视层 XAML框架和DirectX。它提供通用的Windows平台应用程序 轻松访问较低级别的Windows图形堆栈。API 专注于绘制矩形和图像–使用或不使用XAML 曲面-并在这些曲面上应用动画和效果

<>我也发现了这个博客文章，但它也似乎是C而不是C++。我找到了这篇文章

我在这些文章中遇到的问题是，不同的XAML对象和类在C和C++之间是不一样的，而且我对这个新事物没有帮助。

这篇文章似乎有C++版本的一些C源，但是我不确定这是否是我真正需要的。 其思想是使用椭圆（）函数绘制一个圆，然后为指针绘制两条线，一条（时针）较短且较粗，另一条（在时针之后绘制的分针，使其位于顶部）比第一条线更长且较细，以便在指针重叠时可以看到

在MainPage.xaml文件中，我有以下测试代码：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="60,4,1348,712" RenderTransformOrigin="0.5,0.5">
    <Canvas x:Name="MyCanvas" HorizontalAlignment="Left" Height="300" Margin="61,27,0,0" VerticalAlignment="Top" Width="424"/>
</Grid>

在MainPage.xaml.cpp中，我有以下代码。这段代码先画一个椭圆，然后在画布上画一条线，然后启动一个周期计时器，每隔2秒更改一次椭圆的颜色

MainPage::MainPage()
{
    InitializeComponent();

    // See https://xamlbrewer.wordpress.com/2016/01/04/using-the-composition-api-in-uwp-apps/
//  m_root = MyCanvas->GetVisual();
//  m_compositor = m_root->Compositor;

    m_BrushList[0] = ref new SolidColorBrush(Windows::UI::Colors::Red);
    m_BrushList[1] = ref new SolidColorBrush(Windows::UI::Colors::Purple);
    m_BrushList[2] = ref new SolidColorBrush(Windows::UI::Colors::Blue);
    m_BrushList[3] = ref new SolidColorBrush(Windows::UI::Colors::Green);
    m_BrushList[4] = ref new SolidColorBrush(Windows::UI::Colors::Yellow);
    m_BrushList[5] = ref new SolidColorBrush(Windows::UI::Colors::Orange);
    m_icount = 0;

    m_r = ref new Windows::UI::Xaml::Shapes::Ellipse();
    m_r->Width = 200;
    m_r->Height = 200;
    m_r->Stroke = m_BrushList[m_icount];
    //  r->Fill = ref new SolidColorBrush(Windows::UI::Colors::Blue);
    m_r->StrokeThickness = 4;
    m_r->Margin = Thickness(20, 20, 0, 0);
    MyCanvas->Children->Append(m_r);

    m_line1 = ref new Windows::UI::Xaml::Shapes::Line();
    m_line1->Stroke = ref new SolidColorBrush(Windows::UI::Colors::Red);
    m_line1->StrokeThickness = 6;
    m_line1->Y1 = 30;
    m_line1->X1 = 100;
    m_line1->X2 = 400;

    MyCanvas->Children->Append(m_line1);
    StartTimerAndRegisterHandler();
}

void App2_ArmTest::MainPage::StartTimerAndRegisterHandler()
{
    // create our time task so that we can change the clock periodically.
    auto timer = ref new Windows::UI::Xaml::DispatcherTimer();
    TimeSpan ts;
    // right now we are using a 2 second timer as part of prototyping this out.
    // this allows us to check that the timer is in fact working.
    // this needs to be changed from every two seconds to every minute once we
    // have the hands of the clock displaying properly.
    ts.Duration = 2 * 10000000;  // 10,000,000 ticks per second as value units is 100 nanoseconds
    timer->Interval = ts;
    timer->Start();
    auto registrationtoken = timer->Tick += ref new EventHandler<Object^>(this, &MainPage::OnTick);
}

void App2_ArmTest::MainPage::OnTick(Object^ sender, Object^ e)
{
    // change the color of our clock.
    m_icount = (m_icount + 1) % 6;
    m_r->Stroke = m_BrushList[m_icount];

    // get the current local time which will be used for positioning the
    // clock hands once we have that figured out.
    std::time_t result = std::time(nullptr);
    std::tm localTime;
    localtime_s (&localTime, &result);
}

MainPage:：MainPage（）
{
初始化组件（）；
//看https://xamlbrewer.wordpress.com/2016/01/04/using-the-composition-api-in-uwp-apps/
//m_root=MyCanvas->GetVisual（）；
//m_合成器=m_根->合成器；
m_BrushList[0]=参考新的SolidColorBrush（Windows:：UI:：Colors:：Red）；
m_BrushList[1]=参考新的SolidColorBrush（Windows:：UI:：Colors:：Purple）；
m_BrushList[2]=参考新的SolidColorBrush（Windows:：UI:：Colors:：Blue）；
m_BrushList[3]=参考新的SolidColorBrush（Windows:：UI:：Colors:：Green）；
m_BrushList[4]=参考新的SolidColorBrush（Windows:：UI:：Colors:：Yellow）；
m_BrushList[5]=参考新的SolidColorBrush（Windows:：UI:：Colors:：Orange）；
m_i计数=0；
m_r=ref新窗口：：UI：：Xaml：：形状：：椭圆（）；
m_r->宽度=200；
m_r->高度=200；
m_r->Stroke=m_笔刷列表[m_icount]；
//r->Fill=ref新建SolidColorBrush（Windows:：UI:：Colors:：Blue）；
m_r->冲程厚度=4；
m_r->边距=厚度（20,20,0,0）；
MyCanvas->Children->Append（m_r）；
m_line1=ref new Windows:：UI:：Xaml:：Shapes:：Line（）；
m_line1->Stroke=ref新建SolidColorBrush（Windows:：UI:：Colors:：Red）；
m_line1->StrokeThickness=6；
m_line1->Y1=30；
m_line1->X1=100；
m_line1->X2=400；
MyCanvas->Children->Append（m_line1）；
StartTimerAndRegisterHandler（）；
}
void App2_ArmTest:：MainPage:：StartTimerAndRegisterHandler（）
{
//创建时间任务，以便我们可以定期更改时钟。
自动计时器=ref新窗口：：UI：：Xaml：：调度程序（）；
时间跨度ts；
//现在我们正在使用一个2秒的计时器作为原型的一部分。
//这允许我们检查计时器是否实际工作。
//这需要从每两秒更改为每分钟一次
//让时钟指针正确显示。
ts.持续时间=2*10000000；//每秒10000000个滴答声，因为值单位为100纳秒
定时器->间隔=ts；
定时器->启动（）；
auto registrationtoken=timer->Tick+=ref new EventHandler（此，&MainPage:：OnTick）；
}
void App2\u ArmTest:：MainPage:：OnTick（对象^sender，对象^e）
{
//改变我们时钟的颜色。
m_i计数=（m_i计数+1）%6；
m_r->Stroke=m_笔刷列表[m_icount]；
//获取当前本地时间，该时间将用于定位
//一旦我们弄明白了，时钟就开始计时了。
std:：time\u t result=std:：time（nullptr）；
std：：tm本地时间；
本地时间（本地时间和结果）；
}

几秒钟后，我当前显示的窗口看起来像这样：

---

我如何在椭圆（时钟面）上画线，每次计时器触发函数

App2\u ArmTest:：MainPage:：OnTick（）

，我可以将时钟指针绘制或旋转到时钟面上的正确位置？

经过一点工作，深入研究了各种不充分的Microsoft文档，这些文档主要集中在C上。我有一个工作的初始应用程序，它显示一个模拟时钟面，双手显示小时和分钟以及更新本身

另请参见本文末尾，以获取有关向

画布添加web控件并在其中显示YouTube视频的简要概述。见下文附录一

我花了很多时间阅读，然后使用VisualStudio2017 IDE探索各种组件。在某些情况下，C++源代码使用的对象与C++不同（例如C语言使用了<代码>向量2>代码>和<代码>向量3<代码>类，而C++使用了<代码> FLUAT2和 FulAT3从<代码> Windows数字。在某些情况下，需要使用指针来改变涉及C++语法引用的C语法。

XAML文件已更改，在
画布中添加了
椭圆
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="60,4,1348,712" RenderTransformOrigin="0.5,0.5">
    <Canvas x:Name="MyCanvas" HorizontalAlignment="Left" Height="300" Margin="61,27,0,0" VerticalAlignment="Top" Width="424">
        <Ellipse x:Name="ClockFace" Fill="AliceBlue" Height="100" Width="100" Canvas.Left="0" Canvas.Top="0" />
    </Canvas>
</Grid>

//
// MainPage.xaml.h
// Declaration of the MainPage class.
//

#pragma once

#include "MainPage.g.h"

namespace App2_ArmTest
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public ref class MainPage sealed
    {
    public:
        MainPage();

    private:
        Windows::UI::Composition::Compositor       ^m_compositor;
        Windows::UI::Composition::ContainerVisual  ^m_root;
        Windows::UI::Composition::SpriteVisual     ^m_hourhand;
        Windows::UI::Composition::SpriteVisual     ^m_minutehand;

        Windows::UI::Composition::ContainerVisual ^GetVisual(Windows::UI::Xaml::UIElement ^element);
        void StartTimerAndRegisterHandler();
        void SetHandsCurrentTime(void);
        void OnTick(Object^ sender, Object^ e);
    };
}

//
// MainPage.xaml.cpp
//
// Using the Canvas in the Grid as specified in MainPage.xaml we
// are going to draw and animate an analogue clock with two hands,
// hour and minute, to show the current local time.
//

#include "pch.h"
#include "MainPage.xaml.h"

// include for the system time and conversion functions from C++ run time.
#include <ctime>

// see Windows Numerics and DirectXMath Interop APIs at URL
// https://msdn.microsoft.com/en-us/library/windows/desktop/mt759298(v=vs.85).aspx
// see also https://blogs.msdn.microsoft.com/win2d/2015/06/02/winrt-vector-and-matrix-types-in-windows-10/
// following header provides for  Windows::Foundation::Numerics needed for vectors
#include <Windowsnumerics.h>

using namespace App2_ArmTest;

using namespace Platform;
using namespace Windows::Foundation;
using namespace Windows::Foundation::Collections;

using namespace Windows::UI;

// See https://docs.microsoft.com/en-us/uwp/api/windows.ui.composition.compositionobject
using namespace Windows::UI::Composition;

using namespace Windows::UI::Xaml;
using namespace Windows::UI::Xaml::Controls;
using namespace Windows::UI::Xaml::Controls::Primitives;
using namespace Windows::UI::Xaml::Data;
using namespace Windows::UI::Xaml::Input;
using namespace Windows::UI::Xaml::Media;
using namespace Windows::UI::Xaml::Navigation;
using namespace Windows::UI::Xaml::Hosting;

// See the UWP for Windows 10 and Fluent at https://developer.microsoft.com/en-us/windows/apps

// tick->Offset - The offset of the visual relative to its parent or for a root visual the offset
//                relative to the upper-left corner of the windows that hosts the visual.

const float clockCenterPoint = 200.0f;       // center of the clock face, a circle, is from left margin and down from top.
const float tickHeight = 20.0f;              // the height of tick marks drawn to indicate hours of day.
const float handCenterOffset = 20.0f;        // number of units of stub of the hand for center of rotation.
const float hourHandDifference = 40.0f;      // number of units difference in length between hour hand and minute hand.
const float degreesInClockFace = 360.0f;     // number of degrees in a circle. clock face is a circle.
const float hoursOnClock = 12.0f;            // number of hours on a clock face, 12 hours counted 1 through 12.

Windows::UI::Composition::ContainerVisual ^MainPage::GetVisual(Windows::UI::Xaml::UIElement ^element)
{
    // Given a UI element from the XAML as specified by the x:Name="" assigned to the
    // UI element, lets get a Visual Container so that we can start placing stuff into
    // this UI element.
    // For this application the UI element will be a Canvas that we are adorning.
    auto hostVisual = ElementCompositionPreview::GetElementVisual(element);
    auto root = hostVisual->Compositor->CreateContainerVisual();
    ElementCompositionPreview::SetElementChildVisual(element, root);
    return root;
}

MainPage::MainPage()
{
    InitializeComponent();

    // See https://xamlbrewer.wordpress.com/2016/01/04/using-the-composition-api-in-uwp-apps/
    // See https://blogs.windows.com/buildingapps/2015/12/08/awaken-your-creativity-with-the-new-windows-ui-composition/
    // See https://docs.microsoft.com/en-us/windows/uwp/composition/visual-layer
    // See Graphics and Animation - Windows Composition Turns 10 https://msdn.microsoft.com/magazine/mt590968
    // See https://docs.microsoft.com/en-us/windows/uwp/graphics/drawing-shapes
    // See https://blogs.windows.com/buildingapps/2016/09/12/creating-beautiful-effects-for-uwp/

    m_root = GetVisual(MyCanvas);
    m_compositor = m_root->Compositor;

    // set the size of the clock face, an ellipse defined in the XAML
    // so that it is the proper size for the adornment we draw on the clock face.
    ClockFace->Height = clockCenterPoint * 2.0f;
    ClockFace->Width = clockCenterPoint * 2.0f;

    // Create the tick marks for the 12 hours around the face of the clock.
    // The clock face is a circle which is 360 degrees. Since we have 12 tick marks
    // we create each tick mark as a small rectangle at the 12 O'Clock or noon position
    // and then we rotate it around the face of the clock by a number of degrees until
    // we position it where it needs to go.

    // Windows::Foundation::Numerics::float2() is the C++ version of the C# Vector2()
    // Windows::Foundation::Numerics::float3() is the C++ version of the C# Vector3()

    SpriteVisual ^tick;

    for (int i = 0; i < 12; i++)
    {
        tick = m_compositor->CreateSpriteVisual();
        if (i % 3 != 0) {
            // for tick marks other than 3, 6, 9, and 12 make them less prominent.
            tick->Brush = m_compositor->CreateColorBrush(Windows::UI::Colors::Silver);
            tick->Size = Windows::Foundation::Numerics::float2(4.0f, tickHeight);                      // width and height of sprite
        }
        else {
            // for tick marks for 3, 6, 9, and 12 make them more prominent.
            tick->Brush = m_compositor->CreateColorBrush(Windows::UI::Colors::Black);
            tick->Size = Windows::Foundation::Numerics::float2(6.0f, tickHeight);                      // width and height of sprite
        }
        tick->CenterPoint = Windows::Foundation::Numerics::float3(tick->Size.x / 2.0f, clockCenterPoint, 0.0f);   // center point for rotations
        tick->Offset = Windows::Foundation::Numerics::float3(clockCenterPoint, 0.0f, 0.0f);                       // offset from the left only.
        tick->RotationAngleInDegrees = i * (degreesInClockFace / hoursOnClock);  // degrees divided by number of hour ticks on clock face.
        m_root->Children->InsertAtTop(tick);
    }

    // Draw the clock hands at the initial point of noon, both hands straight up. The hour hand is
    // not as tall as the minute hand and the hour hand is a bit wider than the minute hand.
    // Differences in size are to allow for visibility when they hands overlap.
    //
    // We have an hour hand and a minute hand to show the current hour and current minute.
    // The hour is from 0 to 11 though the clock face shows 1 to 12. The hour hand sweeps
    // around the clock face in 12 hours. The minute hand sweeps around the clock face in
    // one hour or 60 minutes. So each tick mark is 5 minutes for the minute hand and one
    // hour for the hour hand.
    //
    // The center point for the hand rotation is half the width of the hand and the height of a
    // tick mark from the bottom of the hand. This will put the center of rotation so that
    // a bit of the hand will extend past the center of rotation and look more realistic.
    // This axis of rotation should be where a line drawn from noon to 6 and a line from 9 to 3
    // cross in the center of the clock face.

    // Create the sprite for the minute hand of the clock.
    // The minute hand is a green rectangle 2.0 wide by 100.0 high
    m_minutehand = m_compositor->CreateSpriteVisual();
    m_minutehand->Brush = m_compositor->CreateColorBrush(Windows::UI::Colors::Green);
    m_minutehand->Size = Windows::Foundation::Numerics::float2(2.0f, clockCenterPoint - handCenterOffset);
    m_minutehand->CenterPoint = Windows::Foundation::Numerics::float3(m_minutehand->Size.x / 2.0f, m_minutehand->Size.y - handCenterOffset, 0.0f);
    m_minutehand->Offset = Windows::Foundation::Numerics::float3(clockCenterPoint, clockCenterPoint - m_minutehand->CenterPoint.y, 0.0f);

    // Create the sprite for the hour hand of the clock.
    // The hour hand is a gray rectangle 4.0 wide. It is shorter and wider than the minute hand.
    m_hourhand = m_compositor->CreateSpriteVisual();
    m_hourhand->Brush = m_compositor->CreateColorBrush(Windows::UI::Colors::Gray);
    m_hourhand->Size = Windows::Foundation::Numerics::float2(4.0f, m_minutehand->Size.y - hourHandDifference);
    m_hourhand->CenterPoint = Windows::Foundation::Numerics::float3(m_hourhand->Size.x / 2.0f, m_hourhand->Size.y - handCenterOffset, 0.0f);
    m_hourhand->Offset = Windows::Foundation::Numerics::float3(clockCenterPoint, clockCenterPoint - m_hourhand->CenterPoint.y, 0.0f);

    m_root->Children->InsertAtTop(m_hourhand);      // add hour hand first so that it is beneath the minute hand
    m_root->Children->InsertAtTop(m_minutehand);    // add the minute hand after the hour hand so it is on top.

    // Set the hands of the clock to the current time and then start our timer.
    // The timer will update the position of the clock hands once a minute.
    SetHandsCurrentTime();
    StartTimerAndRegisterHandler();
}

void App2_ArmTest::MainPage::StartTimerAndRegisterHandler()
{
    // create our time task so that we can change the clock periodically.
    auto timer = ref new Windows::UI::Xaml::DispatcherTimer();
    TimeSpan ts;
    // right now we are using a 2 second timer as part of prototyping this out.
    // this allows us to check that the timer is in fact working.
    // this needs to be changed from every two seconds to every minute once we
    // have the hands of the clock displaying properly.
    ts.Duration = 2 * 10000000;  // 10,000,000 ticks per second as value units is 100 nanoseconds
    timer->Interval = ts;
    timer->Start();
    auto registrationtoken = timer->Tick += ref new EventHandler<Object^>(this, &MainPage::OnTick);
}

void App2_ArmTest::MainPage::SetHandsCurrentTime(void)
{
    // get the current local time which will be used for positioning the
    // clock hands. We then use the local time to rotate the hands to the
    // correct position on the clock face.
    std::time_t result = std::time(nullptr);
    std::tm localTime;
    localtime_s(&localTime, &result);

    m_hourhand->RotationAngleInDegrees = (float)localTime.tm_hour * (degreesInClockFace / hoursOnClock);  // degrees divided by number of hour ticks on clock face.
    m_minutehand->RotationAngleInDegrees = (float)localTime.tm_min * (degreesInClockFace / 60.0f); // degrees divided by minutes in an hour.
}

void App2_ArmTest::MainPage::OnTick(Object^ sender, Object^ e)
{
    // A timer tick is received so lets position the clock hands
    // on the clock face to reflect the current time.
    SetHandsCurrentTime();
}

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="60,4,966,410" RenderTransformOrigin="0.5,0.5">
    <Canvas x:Name="MyCanvas" HorizontalAlignment="Left" Height="482" Margin="10,43,0,0" VerticalAlignment="Top" Width="735">
        <Ellipse x:Name="ClockFace" Fill="AliceBlue" Height="200" Width="200" Canvas.Left="0" Canvas.Top="0" />
        <WebView x:Name="WebDisplay" Height="462" Canvas.Left="205" Canvas.Top="10" Width="520"/>
    </Canvas>
</Grid>

Uri ^targetUri = ref new Uri(L"https://www.youtube.com/embed/21JhWTIPQSw");
WebDisplay->Navigate(targetUri);