学海无涯

导航

Win2D快速入门

使用Win2D创建一个新项目

  1. 启动Visual Studio,并创建一个新项目:文件→新建→项目

  2. 选择已安装→模板→Visual C#→Windows→通用→空白应用程序(通用Windows)

  3. 为项目命名,选择一个位置并创建它。

  4. Win2D作为Nuget.org软件包发布,需要先安装才能使用它。启动NuGet Package Manager,转到Tools→NuGet Package Manager→Manage NuGet Packages for Solution

  5. 搜索“Win2D”并选择Win2D.uwp

    最后,单击“ 安装”如果系统提示您查看更改,请单击“ 确定”如果您看到Win2D许可条款,请单击我接受

    Win2D现已安装在您的项目中。

将Win2D CanvasControl添加到应用程序的XAML中

  1. 要使用Win2D,您需要在某处绘制图形。在XAML应用程序中,最简单的方法是将CanvasControl添加 到XAML页面。

    在继续之前,首先确保项目的Architecture选项设置为x86或 x64,而不是任何CPUWin2D是用C ++实现的,因此使用Win2D的项目需要针对特定​​的CPU架构。

  2. 解决方案资源管理器中双击它, 导航到项目中的MainPage.xaml这将打开文件。为方便起见,您可以双击Designer选项卡中XAML按钮 这将隐藏可视化设计器并为代码视图保留所有空间。

  3. 在添加控件之前,首先必须告诉XAML CanvasControl的定义位置。为此,请转到Page元素的定义,并添加以下语句: xmlns:canvas =“using:Microsoft.Graphics.Canvas.UI.Xaml”您的XAML现在应该如下所示:

<Page
    ...
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"
    mc:Ignorable="d">

4.现在,添加一个新的画布:CanvasControl作为子元素到根 元素。为控件命名,例如“canvas”。您的XAML现在应该如下所示:

< Grid  Background = “{ThemeResource ApplicationPageBackgroundThemeBrush}” > 
    < canvas:CanvasControl  x:Name = “canvas” /> 
</ Grid >

5.接下来,为Draw 事件定义事件处理程序只要您的应用需要绘制或重绘其内容,CanvasControl就会引发Draw最简单的方法是让Visual Studio AutoComplete帮助您。CanvasControl定义中,开始为Draw事件处理程序键入一个新属性

< canvas:CanvasControl  x:Name = “canvas”  Draw = “canvas_Draw”  />

一旦你输入Draw =“,Visual Studio就会弹出一个框,提示你让它自动填写事件处理程序的正确定义。按TAB键接受Visual Studio的默认事件处理程序。这也会自动添加一个格式正确的格式代码隐藏中的事件处理程序方法(MainPage.xaml.cs)。如果不使用自动完成,请不要担心;您可以在下一步中手动添加事件处理程序方法。

MainPage.xaml

<Page
    x:Class="UWPTestApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UWPTestApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"
    mc:Ignorable="d"
    Unloaded="Page_Unloaded" 
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <canvas:CanvasControl Draw="CanvasControl_Draw" Name="canvas" ClearColor="CornflowerBlue"/>

    </Grid>
</Page>

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

using Windows.UI;
using Microsoft.Graphics.Canvas.UI.Xaml;
using System.Numerics;
using Microsoft.Graphics.Canvas;
using Microsoft.Graphics.Canvas.Effects;

// https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x804 上介绍了“空白页”项模板

namespace UWPTestApp
{
    /// <summary>
    /// 可用于自身或导航至 Frame 内部的空白页。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }
        private void CanvasControl_Draw(Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender, Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args)
        {//绘制或重绘时触发
            args.DrawingSession.DrawText("你好,世界!", 100, 100, Colors.Green);
        }

        private void Page_Unloaded(object sender, RoutedEventArgs e)
        {
            //关闭窗口时释放资源,避免内存泄漏
            this.canvas.RemoveFromVisualTree();
            this.canvas = null;
            
        }
    }
}

 

 

posted on 2019-08-09 13:57  宁静致远.  阅读(281)  评论(0)    收藏  举报