조작 델타 - 이상한 효과와 오버 플로우에 대한 응답

Question

테스트 용 UWP 형식에서 나는 아래에 기본적인 조작 테스트가 있습니다. 그것은 CanvasControl에 3 개의 원을 그리고 번역과 스케일링 조작을 설정합니다.

터치 스크린에서이 기능을 테스트하면 기본적으로 화면의 두 손가락 위치에 따라 원을 번역하고 확대/축소하는 기능을 수행합니다. 그러나 특정 지점을 넘기면 이미지가 2 익스텐트 사이에서 매우 빠르게 진동하기 시작하며 코드가 오버플로로 멈추게됩니다.

저는 캔버스 컨트롤을 그리드에 넣고 그리드 컨트롤에서 캔버스 컨트롤에 대한 조작을 시도했지만 확대/축소 및 패닝의 효과가 올바르지는 않지만 동일한 문제가 발생하지 않았습니다.

그래서 내 코드의 효과처럼 보입니다. 반복 변형입니다. 렌더링 변형을 일으키는 조작이 다른 조작을 일으킬 수 있으며, 그것이 안정 될 때까지 원으로 이동합니다. 또는 정밀도 문제가있는 경우 반복됩니다. 터치 포인트 간 거리가 너무 짧아서 오버플로가 발생할 때까지 반복됩니다.

예상 되나요? 이 작업을 수행하는 올바른 방법은 무엇입니까?

는

Private WithEvents Canv As New CanvasControl 
Private WithEvents gr As New Grid 


Private Sub Canv_Draw(sender As CanvasControl, args As CanvasDrawEventArgs) Handles Canv.Draw 
    args.DrawingSession.DrawCircle(50, 50, 25, Windows.UI.Colors.Blue) 
    args.DrawingSession.DrawCircle(250, 250, 25, Windows.UI.Colors.Blue) 
    args.DrawingSession.DrawCircle(500, 500, 25, Windows.UI.Colors.Blue) 
End Sub 

Public Sub New() 

    ' This call is required by the designer. 
    InitializeComponent() 

    ' Add any initialization after the InitializeComponent() call. 

    Content = gr 
    gr.Children.Add(Canv) 


    Canv.ManipulationMode = ManipulationModes.Scale Or ManipulationModes.TranslateX Or ManipulationModes.TranslateY 

end sub 


Private Sub Canv_ManipulationDelta(sender As Object, e As ManipulationDeltaRoutedEventArgs) Handles Canv.ManipulationDelta 
    Dim t As New TranslateTransform 

    t.X = e.Cumulative.Translation.X 
    t.Y = e.Cumulative.Translation.Y 


    Dim s As New ScaleTransform 
    s.ScaleX = e.Cumulative.Scale 
    s.ScaleY = e.Cumulative.Scale 
    s.CenterX = e.Position.X 
    s.CenterY = e.Position.Y 

    Dim g As New TransformGroup 
    g.Children.Add(s) 
    g.Children.Add(t) 

    Canv.RenderTransform = g 



End Sub 

Answer 1

UWP의 일반적인 방법은 그것 규모, 기울기, 회전을 지원하고 번역, CompositeTransform을 사용하는 것입니다.

Public NotInheritable Class MainPage 
Inherits Page 

Private WithEvents Canv As New CanvasControl 
Private WithEvents gr As New Grid 

Private Sub Canv_Draw(sender As CanvasControl, args As CanvasDrawEventArgs) Handles Canv.Draw 
    args.DrawingSession.DrawCircle(50, 50, 25, Windows.UI.Colors.Blue) 
    args.DrawingSession.DrawCircle(250, 250, 25, Windows.UI.Colors.Blue) 
    args.DrawingSession.DrawCircle(500, 500, 25, Windows.UI.Colors.Blue) 
End Sub 

Public Sub New() 

    ' This call is required by the designer. 
    InitializeComponent() 

    ' Add any initialization after the InitializeComponent() call. 

    Content = gr 
    gr.Children.Add(Canv) 

    Canv.ManipulationMode = ManipulationModes.Scale Or ManipulationModes.TranslateX Or ManipulationModes.TranslateY 

End Sub 

Private Sub Canv_ManipulationDelta(sender As Object, e As ManipulationDeltaRoutedEventArgs) Handles Canv.ManipulationDelta 
    Dim tran = Transform(sender) 
    tran.ScaleX = tran.ScaleX * e.Delta.Scale 
    tran.ScaleY = tran.ScaleY * e.Delta.Scale 
    'System.Diagnostics.Debug.WriteLine("tran.ScaleX =" + tran.ScaleX.ToString() + " tran.ScaleY =" + tran.ScaleY.ToString()) 
End Sub 

Private Function Transform(sender As Object) As CompositeTransform 
    Dim rect = TryCast(sender, CanvasControl) 
    rect.RenderTransformOrigin = New Point(0.5, 0.5) 
    Dim tran As New CompositeTransform 
    If TryCast(rect.RenderTransform, CompositeTransform) IsNot Nothing Then 
     tran = DirectCast(rect.RenderTransform, CompositeTransform) 
    Else 
     rect.RenderTransform = New CompositeTransform() 
    End If 
    Return tran 
End Function 

' utility method 
Private Function Boundary(value As Double, min As Double, max As Double) As Double 
    If value > max Then 
     Return max 
    ElseIf value < min Then 
     Return min 
    Else 
     Return value 
    End If 
End Function 
End Class 

스크린 샷 :

Answer 2

몇 가지 유용한에게

특히 the forth scenario 줌 문제에 대한

, 당신은 다음과 같은 방법을 사용하여 그것을 피할 수 있으며, BasicInput 샘플을 참조하십시오 정보를 얻는 동안, 그 동안 나는 CanvasControl을 그리드에 남기고 조작을하는 깔끔한 솔루션을 발견했습니다 이벤트를 그리드에서 가져 와서 캔버스 컨트롤의 렌더링 변환을 변경하면 재귀가 발생하지 않습니다. 또한 자연 번역이 올바르지 않다는 것을 의미합니다. 그러나 누적 척도로이를 곱하면 해결하기 쉽습니다. 전체 조작 코드는 다음과 같습니다.

Private Sub GerberCanvGrid_ManipulationDelta(sender As Object, e As ManipulationDeltaRoutedEventArgs) Handles GerberCanvGrid.ManipulationDelta 
    Dim sf As New ScaleTransform 
    sf.ScaleX = e.Cumulative.Scale 
    sf.ScaleY = e.Cumulative.Scale 
    sf.CenterX = e.Position.X 
    sf.CenterY = e.Position.Y 

    Dim tt As New TranslateTransform 
    tt.X = e.Cumulative.Translation.X * e.Cumulative.Scale 
    tt.Y = e.Cumulative.Translation.Y * e.Cumulative.Scale 

    ManipulationTransform = New TransformGroup 
    ManipulationTransform.Children.Add(sf) 
    ManipulationTransform.Children.Add(tt) 
    GerberCanv.RenderTransform = ManipulationTransform 
End Sub