質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Xamarin

Xamarin(ザマリン)は、iPhoneなどのiOSやAndroidで動作し、C# 言語を用いてアプリを開発できるクロスプラットフォーム開発環境です。Xamarin Studioと C# 言語を用いて、 iOS と Android の両方の開発を行うことができます。

Q&A

解決済

1回答

3125閲覧

Xamarin.Formsでのピンチ拡大後のイベント取得について

tsnar

総合スコア10

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Xamarin

Xamarin(ザマリン)は、iPhoneなどのiOSやAndroidで動作し、C# 言語を用いてアプリを開発できるクロスプラットフォーム開発環境です。Xamarin Studioと C# 言語を用いて、 iOS と Android の両方の開発を行うことができます。

0グッド

0クリップ

投稿2018/11/19 05:01

編集2018/11/19 08:48

前提・実現したいこと

現在、Xamarin.Forms、SkiaSharpでお絵描き機能を作成していて、画像を呼び出した後に、ピンチ拡大された後もその縮尺でお絵描きできるような機能を作っています。最終的に画像上にお絵描きした部分をsurface.Snapshot()で保存しています。
ピンチジェスチャとパンジェスチャを一つのコンテナーにまとめて、そのコンテナーの子にSkiaSharpのSKCanvasViewを入れ込んでいます。

発生している問題・エラーメッセージ

問題は、例えばキャンバスサイズが縦横比4:3だとして、呼び出した画像が2:3など余白ができるような条件で、ピンチ拡大をすると、もともと余白だった部分のお絵描き・ピンチ・パンがすべてイベントをとれなくなるということです。

拡大前画像
イメージ説明

ピンチ拡大後の画像 赤線より外側の部分がジェスチャやタッチが反応しない状態です。
イメージ説明

該当のソースコード

C#

1 2 <Grid x:Name="ImageGrid" Grid.Column="1" Padding="0" Margin="0" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" BackgroundColor="Red"> 3 <Grid BackgroundColor="Silver"> 4 <local:PanContainer x:Name="Pinch1" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" BackgroundColor="Blue"> 5 <local:PanContainer.Content> 6 <skia:SKCanvasView x:Name="canvasView" EnableTouchEvents="False" Touch="OnTouch" PaintSurface="canvasView_PaintSurface" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="Yellow" /> 7 </local:PanContainer.Content> 8 </local:PanContainer> 9 <Grid.Effects> 10 <tt:TouchEffect x:Name="Effect1" Capture="True" TouchAction="OnTouchEffectAction" /> 11 </Grid.Effects> 12 </Grid> 13 </Grid> 14 15 16 17

C#

1 2 public class PinchToZoomContainer : ContentView 3 { 4 public bool EnablePinchPan = true; 5 double currentScale = 1; 6 double startScale = 1; 7 double xOffset = 0; 8 double yOffset = 0; 9 double tempNewX = 0; 10 double tempNewY = 0; 11 public float mgnWid = 0; 12 public float mgnHei = 0; 13 14 15 public PinchToZoomContainer () 16 { 17 SwitchEventHandler(true); 18 } 19 public void SwitchEventHandler(bool flg) 20 { 21 GestureRecognizers.Clear(); 22 if (flg) 23 { 24 var pinchGesture = new PinchGestureRecognizer(); 25 pinchGesture.PinchUpdated += OnPinchUpdated; 26 GestureRecognizers.Add(pinchGesture); 27 var panGesture = new PanGestureRecognizer(); 28 panGesture.PanUpdated += OnPanUpdated; 29 GestureRecognizers.Add(panGesture); 30 var tapGesture = new TapGestureRecognizer(); 31 tapGesture.NumberOfTapsRequired = 2; 32 tapGesture.Tapped += DoubleTapped; 33 GestureRecognizers.Add(tapGesture); 34 35 } 36 } 37 private void DoubleTapped(object sender, EventArgs e) 38 { 39 Content.Scale = 1; 40 currentScale = 1; 41 Content.TranslationX = 0; 42 Content.TranslationY = 0; 43 xOffset = 0; 44 yOffset = 0; 45 46 } 47 48 public void OnPanUpdated(object sender, PanUpdatedEventArgs e) 49 { 50 if (EnablePinchPan == false) 51 return; 52 if (Content.Scale == 1) 53 return; 54 55 switch (e.StatusType) 56 { 57 case GestureStatus.Running: 58 double newX = (e.TotalX * Scale) + xOffset; 59 double newY = (e.TotalY * Scale) + yOffset; 60 61 double width = (Content.Width * Content.Scale); 62 double height = (Content.Height * Content.Scale); 63 64 bool canMoveX = width + Content.X > App.ScreenWidth - newX - mgnWid * Content.Scale; 65 bool canMoveY = height + Content.Y > App.ScreenHeight - newY - mgnHei * Content.Scale; 66 if (canMoveX & newX > 0) 67 canMoveX = false; 68 if (canMoveY & newY > 0) 69 canMoveY = false; 70 tempNewX = newX; 71 tempNewY = newY; 72 if (newX > 0) 73 canMoveX = false; 74 if (newY > 0) 75 canMoveY = false; 76 77 if (canMoveX) 78 { 79 double minX = (width - (App.ScreenWidth / 2)) * -1; 80 double maxX = Math.Min(App.ScreenWidth / 2, width / 2); 81 82 if (newX < minX) 83 { 84 newX = minX; 85 } 86 87 if (newX > maxX) 88 { 89 newX = maxX; 90 } 91 Content.TranslationX = newX; 92 } 93 94 if (canMoveY) 95 { 96 double minY = (height - (App.ScreenHeight / 2)) * -1; 97 double maxY = Math.Min(App.ScreenHeight / 2, height / 2); 98 99 if (newY < minY) 100 { 101 newY = minY; 102 } 103 104 if (newY > maxY) 105 { 106 newY = maxY; 107 } 108 Content.TranslationY = newY; 109 } 110 111 break; 112 case GestureStatus.Completed: 113 xOffset = Content.TranslationX; 114 yOffset = Content.TranslationY; 115 break; 116 case GestureStatus.Canceled: 117 break; 118 } 119 } 120 public void OnPinchUpdated (object sender, PinchGestureUpdatedEventArgs e) 121 { 122 if (e.Status == GestureStatus.Started) 123 { 124 startScale = Content.Scale; 125 Content.AnchorX = 0; 126 Content.AnchorY = 0; 127 } 128 129 if (e.Status == GestureStatus.Running) 130 { 131 currentScale += (e.Scale - 1) * startScale; 132 currentScale = Math.Max(1, currentScale); 133 134 double renderedX = Content.X + xOffset; 135 double deltaX = renderedX / Width; 136 double deltaWidth = Width / (Content.Width * startScale); 137 double originX = (e.ScaleOrigin.X - deltaX) * deltaWidth; 138 139 double renderedY = Content.Y + yOffset; 140 double deltaY = renderedY / Height; 141 double deltaHeight = Height / (Content.Height * startScale); 142 double originY = (e.ScaleOrigin.Y - deltaY) * deltaHeight; 143 144 double targetX = xOffset - (originX * Content.Width) * (currentScale - startScale); 145 double targetY = yOffset - (originY * Content.Height) * (currentScale - startScale); 146 147 Content.TranslationX = targetX.Clamp(-Content.Width * (currentScale - 1), 0); 148 Content.TranslationY = targetY.Clamp(-Content.Height * (currentScale - 1), 0); 149 150 Content.Scale = currentScale; 151 } 152 153 if (e.Status == GestureStatus.Completed) 154 { 155 xOffset = Content.TranslationX; 156 yOffset = Content.TranslationY; 157 } 158 } 159 }

試したこと

ImageGridとすべての子のHeightRequest,WidthRequestを拡大するという方法も試しましたが、画像サイズ以上にキャンバスの大きさを余分にとると、画像保存時に無駄な余白が生じてしまい、保存と上記問題解決の両方を満足に実現することができません。

補足情報(FW/ツールのバージョンなど)

環境はVisual Studio Professional 2017 Version15.8.6 C#です
ピンチジェスチャとパンジェスチャは書き換えている部分もありますが、基本的なプログラムはこちらのmsのドキュメントを参考にしています。
https://docs.microsoft.com/ja-jp/xamarin/xamarin-forms/app-fundamentals/gestures/pan
https://docs.microsoft.com/ja-jp/xamarin/xamarin-forms/app-fundamentals/gestures/pinch

ちなみにですがskiasharpのお絵描き機能は こちらを参考にしています。
https://docs.microsoft.com/ja-jp/xamarin/xamarin-forms/user-interface/graphics/skiasharp/paths/finger-paint

#追記
数種類のジェスチャを組み合わせた状態としていますが、ピンチジェスチャ単体でも同じようなことが言えます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

初回画像設定時に、ImageGridとPinch1のみ可能な最大サイズでとり、canvasViewは画像サイズと同じサイズで設定すればできました。
お絵描きのタッチイベント位置はずれるのですが、canvasView.X、canvasView.Yで位置調整をすることで回避できました。

投稿2018/11/20 06:17

tsnar

総合スコア10

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問