介绍
我正在创建我的第一个 Xamarin 应用程序(它将首先针对 UWP,然后是 Android,最后可能是 iOS)。
基本上,应用程序应该检测到多个手指,并且圆圈会在每个手指上弹出并跟随它们。
我的应用
首先,我认为 UI 和图形无法用 Xamarin 编码,所以我开始使用 UWP 代码:
MainPage.xaml.cs
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using System.Windows.Input;
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.Devices.Input;
using Xamarin.Forms;
using Xamarin.Forms.Platform.UWP;
using Windows.UI.Input;
using Windows.UI.Xaml.Shapes;
using Windows.UI;
namespace App1.UWP
{
public sealed partial class MainPage
{
public MainPage()
{
this.InitializeComponent();
LoadApplication(new App1.App());
}
private async void OnPointerPressed(object sender, PointerRoutedEventArgs e)
{
Debug.WriteLine(e.Pointer.PointerDeviceType + " " + sender + " " + e);
Point pointerPos = e.GetCurrentPoint(rootPanel).Position;
Debug.WriteLine(pointerPos.X + " " + pointerPos.Y);
Ellipse ellipse1 = new Ellipse();
ellipse1.Fill = new SolidColorBrush(Colors.SteelBlue);
ellipse1.Width = 100;
ellipse1.Height = 100;
//ellipse1.Margin.Left = pointerPos.X + 50;
//ellipse1.Margin.Top = pointerPos.Y + 50;
rootPanel.Children.Add(ellipse1);
Debug.WriteLine(rootPanel.Children.Count);
switch (e.Pointer.PointerDeviceType)
{
case PointerDeviceType.Touch:
break;
case PointerDeviceType.Pen:
break;
case PointerDeviceType.Mouse:
ContentDialog noMouseAvaliableDialog = new ContentDialog()
{
Title = "Erreur de méthode d'entrée",
Content = "Il est impossible de savoir qui va jouer en premier aver un joueur :(\n Veuillez essayer avec le clavier.",
PrimaryButtonText = "OK chef"
};
await noMouseAvaliableDialog.ShowAsync();
break;
default:
break;
}
Debug.WriteLine("-------------------------");
}
}
}
主页.xaml
<forms:WindowsPage
x:Class="App1.UWP.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:forms="using:Xamarin.Forms.Platform.UWP"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1.UWP"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
PointerPressed="OnPointerPressed">
<RelativePanel
Name="rootPanel"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
</RelativePanel>
</forms:WindowsPage>
如您所见,我可以获得光标的 X 和 Y 位置,但我的椭圆不显示。所以我注意到 Xamarin xaml 赢了,而不是我的 UWP xaml。
所以我再次尝试使用 Xamarin。我寻找共享代码图形 API,我找到了 SkiaSharp。我的椭圆出现在 Xamarin 代码中:
MainPage.xaml.cs
using SkiaSharp;
using SkiaSharp.Views.Forms;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace App1
{
public partial class MainPage : ContentPage
{
private static SKCanvas canvas;
public MainPage()
{
InitializeComponent();
}
private void OnPainting(object sender, SKPaintSurfaceEventArgs e)
{
canvas = e.Surface.Canvas;
}
private void onTapGestureRecognizerTapped(object sender, EventArgs e)
{
Debug.WriteLine("Tapped !!!!!");
//((TappedEventArgs) e).
}
/*private void onPanUpdated(object sender, PanUpdatedEventArgs e)
{
Debug.WriteLine("Panned !!!!!" + e.TotalX + " " + e.TotalY);
}*/
internal void drawCircleOnCanvas(Point pointerPos, int radius)
{
Debug.WriteLine(pointerPos.X + " " + pointerPos.Y);
SKPaint circleFill = new SKPaint
{
IsAntialias = true,
Style = SKPaintStyle.Fill,
Color = SKColors.AliceBlue
};
canvas.DrawCircle(((float) pointerPos.X - 50), ((float) pointerPos.Y - 50), radius, circleFill);
}
}
}
主页.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:App1"
x:Class="App1.MainPage"
xmlns:views="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms">
<Label Text="Ooooh, you touch my tralala"
VerticalOptions="Center"
HorizontalOptions="Center" />
<!--<relativelayout
x:Name="rootPanel"
backgroundcolor="lime"
horizontaloptions="fill"
verticaloptions="fill">
</relativelayout>-->
<Grid>
<views:SKCanvasView PaintSurface="OnPainting"/>
<Grid.GestureRecognizers>
<TapGestureRecognizer
Tapped="onTapGestureRecognizerTapped"
NumberOfTapsRequired="1"/>
<!--<PanGestureRecognizer PanUpdated="onPanUpdated"/> -->
</Grid.GestureRecognizers>
</Grid>
</ContentPage>
最后,它只停留在每个触摸点的 X 和 Y 位置上来绘制我的椭圆。如您所见,我以不同的方式看待:TapGestureRecognizer
,PanGestureRecognizer
...
但我无法得到那些坐标。
我找到了 MR.Gestures API,但它是按应用名称许可的。
问题
所以,我问实验的人:
- Xamarin 是否提供触摸位置/手势 API?
- MR.Gestures 是处理触摸的最佳解决方案吗?
- 是否有其他触摸共享代码 API?
或者简单地说,我怎样才能用 Xamarin 获得所有接触点的坐标?
谢谢
PS:我在写这个堆栈时发现这篇文章,阅读......