介绍
我正在创建我的第一个 Xamarin 应用程序(首先针对 UWP,然后是 Android,最后可能是 iOS)。
基本上,应用程序应该检测多个手指,并且圆圈会在每个手指上弹出并跟随它们。
My app
首先,我认为 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,我发现斯基亚夏普 https://developer.xamarin.com/guides/cross-platform/drawing/introduction/。
我的椭圆出现在 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
...
但我无法获得这些坐标。
I found 手势先生 http://mrgestures.com/API,但已获得许可per app name.
问题
所以,我问实验过的人:
- Xamarin 提供触摸位置/手势 API 吗?
- 做 MR.Gestures 是
处理触摸的最佳解决方案?
- 还有其他触摸共享代码吗
API ?
或者简单地说,如何使用 Xamarin 获取所有触摸点的坐标 ?
Thanks
PS:我发现本文 http://twintechs.com/cross-platform-compositional-gesture-advanced-xamarin-forms-techniques-for-flexible-and-performant-cross-platform-apps-part-4/在编写此堆栈时,阅读...