UWP 画布像素操作

Question

我设法创建了一个画布，用户可以使用 this Microsoft example 在其上绘图。

现在我想计算白色和黑色像素的数量。并且还修改了一些像素的颜色。

我找不到任何关于如何从画布中获取所有像素数据并对其进行操作和更新的示例。

<Page
    x:Class="SDKTemplate.Scenario1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    SizeChanged="OnSizeChanged"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid x:Name="RootGrid" Margin="12,10,12,12">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <StackPanel Margin="0,0,0,10">
                <TextBlock Text="Description:" Style="{StaticResource SampleHeaderTextStyle}"/>
                <TextBlock Style="{StaticResource ScenarioDescriptionTextStyle}" TextWrapping="Wrap">
                This scenario adds an InkCanvas and InkToolbar to the page.<LineBreak/>
                    - Use either pen or mouse to ink.<LineBreak/>
                    - A chevron glyph on the active tool button indicates that additional settings are available in a flyout. Select the active tool once more to display the flyout.
                </TextBlock>
            </StackPanel>
            <ScrollViewer Grid.Row="1" VerticalScrollMode="Auto" VerticalScrollBarVisibility="Auto">
                <Grid HorizontalAlignment="Left" VerticalAlignment="Top">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <InkToolbar Grid.Row="0" TargetInkCanvas="{x:Bind inkCanvas}"/>
                    <ScrollViewer Grid.Row="1" x:Name="scrollViewer" ZoomMode="Enabled" MinZoomFactor="1" VerticalScrollMode="Enabled" VerticalScrollBarVisibility="Auto" HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Auto">
                        <Grid x:Name="outputGrid" Background="{ThemeResource SystemControlBackgroundChromeWhiteBrush}" Height="Auto">
                            <!-- Inking area -->
                            <InkCanvas x:Name="inkCanvas" Height="Auto"/>
                        </Grid>
                    </ScrollViewer>
                </Grid>
            </ScrollViewer>
        </Grid>
    </Grid>
</Page>

#include "pch.h"
#include "Scenario1.xaml.h"
#include "SampleConfiguration.h"

using namespace SDKTemplate;

using namespace Platform;
using namespace Windows::Foundation;
using namespace Windows::Foundation::Collections;
using namespace Windows::UI::Core;
using namespace Windows::UI::Xaml;
using namespace Windows::UI::Xaml::Controls;

Scenario1::Scenario1()
{
    InitializeComponent();

    // Initialize the InkCanvas
    inkCanvas->InkPresenter->InputDeviceTypes =
        CoreInputDeviceTypes::Mouse |
        CoreInputDeviceTypes::Pen;


}


void Scenario1::OnSizeChanged(Object^ sender, SizeChangedEventArgs^ e)
{
    HelperFunctions::UpdateCanvasSize(RootGrid, outputGrid, inkCanvas);
}

我怎样才能做到这一点？

Answer 1

以下代码基于链接示例的Scenario3中的代码：

将Image 控件放入与Scenario3.xaml 中的InkCanvas 相同的容器中。注意在InkCanvas控件前面添加Image控件。

<Grid x:Name="outputGrid" Background="{ThemeResource SystemControlBackgroundChromeWhiteBrush}">
    <!-- Inking area -->
    <Image x:Name="inkImage" Stretch="None"/>
    <InkCanvas x:Name="inkCanvas">
    </InkCanvas>
</Grid>

在Scenario3.xaml.cpp 文件中，找到OnLoadAsync 方法。评论或删除原来的return声明并添加一个新的：

void Scenario3::OnLoadAsync(Object^ sender, RoutedEventArgs^ e)
{
    auto openPicker = ref new FileOpenPicker();
    openPicker->SuggestedStartLocation = PickerLocationId::PicturesLibrary;
    openPicker->FileTypeFilter->Append(".gif");
    openPicker->FileTypeFilter->Append(".isf");

    create_task(openPicker->PickSingleFileAsync()).then([this](StorageFile^ file)
    {
        if (file != nullptr)
        {
            return create_task(file->OpenAsync(Windows::Storage::FileAccessMode::Read)).then([this](IRandomAccessStream^ fileStream)
            {
                // Set the image source to the selected bitmap
                auto bitmapImage = ref new BitmapImage();
                bitmapImage->SetSource(fileStream);
                inkImage->Source = bitmapImage;
            });

        }
        else
        {
            return task_from_result();
        }
    });
}

请注意，更改后的图像显示在Image控件中，并且您无法通过场景3InkCanvas的墨水的保存按钮再次保存图像/strong>。