并将其分配给我的用户控制

并将其分配给我的用户控制

关注
发信
关注(28)粉丝(399)

裁剪变换使用低分辨率的图像，并将其分配给我的用户控制

本文介绍了裁剪变换使用低分辨率的图像，并将其分配给我的用户控制的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我一直在努力，用户是拉伸=统一将一个图像加载在Windows RT 8.1应用程序。 中的图像可以是尽可能的小和尽可能大。 裁剪发生在我的用户控制，当我点击/按住屏幕/图像上出现我的用户控件。当我点击并按住并移动我的手指/鼠标一点，在后台图像周围裁剪发生。 我现在面临的问题是 每当应用程序是加载的第一次仿真器，以及当点击/点击和控股执行的第一时间，用户控制显示在屏幕左侧的顶部，然后它来到我的点击/保持区​​域的上方。我要求是它应该总是出现，无论我点击并按住每当我点击并按住。在松开手指/鼠标，它应该崩溃。 我使用的中心变换。我想在用户控制在中心准确显示在我的鼠标是目前区域（像素），如果我加载一个小分辨率的图像480 * 800或更小，地区我的鼠标没有进入该中心。 。要更清晰，想象一下，我点击并按住对人类eye.The角膜的角膜应显示在用户控制中心和区域的上方和下方应覆盖其余的部分。 我不希望我的控制去我的形象边界之外，如果我的鼠标在图像的最后一个像素时，应显示的图像的一些部分和背景的某些部分。 我需要如图旋转控制在 影片 查找下面的完整代码。 MainPage.xaml中 <第X：类=App78.MainPage的xmlns =http://schemas.microsoft.com/winfx/2006/xaml/presentation的xmlns：X =http://schemas.microsoft.com/winfx/2006/xaml的xmlns：本地=使用：App78的xmlns：D =HTTP：//模式.microsoft.com /表达/混合/ 2008的xmlns：MC =http://schemas.openxmlformats.org/markup-compatibility/2006 MC：可忽略=D> <电网X：NAME =LayoutGrid保证金=0,0背景={ThemeResource ApplicationPageBackgroundThemeBrush}控股= LayoutGrid_Holding PointerMoved =LayoutGrid_OnPointerMoved PointerWheelChanged =LayoutGrid_OnPointerWheelChanged PointerPressed =LayoutGrid_OnPointerPressed PointerReleased =LayoutGrid_OnPointerReleased> <图像X：NAME =BigImage的Horizo​​ntalAlignment =中心 VerticalAlignment =中心弹力=统一来源= http://blog.al.com/space-news/2009/04/iss015e22574.jpg/> <局部：放大镜VerticalAlignment =顶部的Horizo​​ntalAlignment =左X：NAME =MagnifierTip能见度=折叠/> < /网格和GT; < /页> MainPage.xaml.cs中 使用系统;使用System.Diagnostics程序;使用Windows.UI.Xaml.Controls ; 使用Windows.UI.Xaml.Input; 使用Windows.UI.Xaml.Media; 使用Windows.UI.Xaml.Media.Imaging; 命名空间App78 {公共密封部分类的MainPage：第 {私人双zoomScale = 2; 私人双pointerX = 0; 私人双pointerY = 0; 私人常量双MinZoomScale = 0.25; 私人常量双MaxZoomScale = 32; 公众的MainPage（） { this.InitializeComponent（）; VAR BI =（BitmapImage的）BigImage.Source; bi.ImageOpened + = bi_ImageOpened; this.SizeChanged + = MainPage_SizeChanged; } 无效MainPage_SizeChanged（对象发件人，Windows.UI.Xaml.SizeChangedEventArgs E） { this.UpdateImageLayout（）; } 无效bi_ImageOpened（对象发件人，Windows.UI.Xaml.RoutedEventArgs E） { this.UpdateImageLayout（）; } 私人无效UpdateImageLayout（） { VAR BI =（BitmapImage的）BigImage.Source; 如果（bi.PixelWidth< this.LayoutGrid.ActualWidth&放大器;&安培; bi.PixelHeight< this.LayoutGrid.ActualHeight） { this.BigImage.Stretch = Stretch.None; } ，否则 { this.BigImage.Stretch = Stretch.Uniform; } this.UpdateMagnifier（）; } 私人无效LayoutGrid_OnPointerMoved（对象发件人，PointerRoutedEventArgs E） { // DV：如果指针是不接触，我们可以忽略它如果（e.Pointer.IsInContact！）{返回; } VAR点= e.GetCurrentPoint（this.LayoutGrid）; this.pointerX = point.Position.X; this.pointerY = point.Position.Y; this.UpdateMagnifier（）; } 私人无效UpdateMagnifier（） { VAR BI =（BitmapImage的）BigImage.Source; 双offsetX = 0; 双offsetY = 0; 双imageScale = 1; VAR imageRatio =（双）bi.PixelWidth / bi.PixelHeight; VAR gridRatio = this.LayoutGrid.ActualWidth / this.LayoutGrid.ActualHeight; 如果（bi.PixelWidth< this.LayoutGrid.ActualWidth&放大器;&安培; bi.PixelHeight< this.LayoutGrid.ActualHeight） { offsetX = 0.5 *（this.LayoutGrid.ActualWidth - bi.PixelWidth）; offsetY = 0.5 *（this.LayoutGrid.ActualHeight - bi.PixelHeight）; // imageScale = 1; - 保持} ，否则如果（imageRatio< gridRatio） { offsetX = 0.5 *（this.LayoutGrid.ActualWidth - imageRatio * this.LayoutGrid.ActualHeight）; offsetY = 0; imageScale = BigImage.ActualHeight / bi.PixelHeight; } ，否则 { offsetX = 0; offsetY = 0.5 *（this.LayoutGrid.ActualHeight - this.LayoutGrid.ActualWidth / imageRatio）; imageScale = BigImage.ActualWidth / bi.PixelWidth; } // DV：这可能是不再$ B $需要b //MagnifierTip.MagnifierTransform.X = this.pointerX; //MagnifierTip.MagnifierTransform.Y = this.pointerY; MagnifierTip.PositionTransform.X =（-this.pointerX + offsetX）/ imageScale; MagnifierTip.PositionTransform.Y =（-this.pointerY + offsetY）/ imageScale; // DV：我没有测试过的缩放/缩放 MagnifierTip.ZoomTransform.ScaleX = imageScale * zoomScale; MagnifierTip.ZoomTransform.ScaleY = imageScale * zoomScale; MagnifierTip.CenterTransform.X = MagnifierTip.MagnifierEllipse.ActualWidth / 2 - MagnifierTip.MagnifierEllipse.StrokeThickness / 2; MagnifierTip.CenterTransform.Y = MagnifierTip.MagnifierEllipse.ActualHeight / 2 - MagnifierTip.MagnifierEllipse.StrokeThickness / 2; // DV：我添加了一个GlobalGrid变换它转换孩童 MagnifierTip.MagnifierTransformGrid.X = this.pointerX - （MagnifierTip.ActualWidth / 2）; MagnifierTip.MagnifierTransformGrid.Y = this.pointerY - （MagnifierTip.ActualHeight）; ; } 私人无效LayoutGrid_OnPointerWheelChanged（对象发件人，PointerRoutedEventArgs E） {如果（e.GetCurrentPoint（this.LayoutGrid）.Properties.MouseWheelDelta大于0） { zoomScale = Math.Max（MinZoomScale，Math.Min（MaxZoomScale，zoomScale * 1.2））; } ，否则 { zoomScale = Math.Max（MinZoomScale，Math.Min（MaxZoomScale，zoomScale / 1.2））; } this.UpdateMagnifier（）; } // DV：控股通常只适用于触摸https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui .xaml.uielement.holding.aspx F = 255安培; MSPPError = -2147217396 私人无效LayoutGrid_Holding（对象发件人，HoldingRoutedEventArgs E） { // } // DV：指针按下同时支持鼠标和触摸，但火灾immeadiatley。你必须找出一种拖延战术使用，或持有触摸，然后右击鼠标私人无效LayoutGrid_OnPointerPressed（对象发件人，PointerRoutedEventArgs E） { MagnifierTip.Visibility = Windows.UI .Xaml.Visibility.Visible; } // DV：指针推出同时支持鼠标和触摸。 私人无效LayoutGrid_OnPointerReleased（对象发件人，PointerRoutedEventArgs E） { MagnifierTip.Visibility = Windows.UI.Xaml.Visibility.Collapsed; } } } Magnifier.XAML <用户控件X：类=App78.Magnifier的xmlns = http://schemas.microsoft.com/winfx/2006/xaml/presentation的xmlns：X =http://schemas.microsoft.com/winfx/2006/xaml的xmlns：本地=使用：App78的xmlns：D =http://schemas.microsoft.com/expression/blend/2008的xmlns：MC =http://schemas.openxmlformats.org/标记兼容性/ 2006 MC：可忽略=D HEIGHT =230 WIDTH =170> <电网HEIGHT =230WIDTH =170> < - DV：这是全局的变换，我添加 - > < Grid.RenderTransform> <&的TransformGroup GT; < TranslateTransform X：NAME =MagnifierTransformGridX：FieldModifier =公/> < /&的TransformGroup GT; < /Grid.RenderTransform> <椭圆透明度=1能见度=可见填充={ThemeResource ApplicationPageBackgroundThemeBrush}的Horizo​​ntalAlignment =中心VerticalAlignment =评出的IsHitTestVisible =FALSEWIDTH =135HEIGHT =128 StrokeThickness =3保证金=0,17,0,0/> <椭圆X：NAME =MagnifierEllipseX：FieldModifier =公不透明度=1能见度=可见的Horizo​​ntalAlignment =左VerticalAlignment =评出的IsHitTestVisible =FALSEWIDTH =150 HEIGHT =150行程=白StrokeThickness =3保证金=11,8,0,0> < Ellipse.Fill> <的ImageBrush 的ImageSource =http://blog.al.com/space-news/2009/04/iss015e22574.jpg弹力=无 AlignmentX =左 AlignmentY =评出的> < ImageBrush.Transform> <&的TransformGroup GT; < TranslateTransform X：FieldModifier =公 X：NAME =CenterTransform/> < TranslateTransform X：FieldModifier =公 X：NAME =PositionTransform/> < ScaleTransform X：FieldModifier =公 X：NAME =ZoomTransform/> < /&的TransformGroup GT; < /ImageBrush.Transform> < /&的ImageBrush GT; < /Ellipse.Fill> < /椭圆> <路径数据=M25.533,0C15.457,0,7.262,8.199,7.262,18.271c0,9.461,13.676,19.698,17.63,32.338 c0.085,0.273,0.34,0.459,0.626， 0.457c0.287-0.004,0.538-0.192,0.619-0.467c3.836-12.951,17.666-22.856,17.667-32.33 C43.803,8.199,35.607,0,25.533,0z M25.533,32.131c-7.9,0 -14.328-6.429-14.328-14.328c0-7.9,6.428-14.328,14.328-14.328 c7.898,0,14.327,6.428,14.327,14.328C39.86,25.702,33.431,32.131,25.533,32.131z填写=＃FFF4F4F5拉伸=填充行程=黑 UseLayoutRounding =FALSE HEIGHT =227 WIDTH = 171>< /路径和GT; < /网格和GT; < /用户控件> 为了方便，可以将项目从的此处。为了更好地理解，我希望你能看到这个影片。这是究竟是什么我需要执行 解决方案 我得到了它的一些变化和三角的这里。 MainPage.xaml中 <第X：类=MagnifierApp .MainPage的xmlns =http://schemas.microsoft.com/winfx/2006/xaml/presentation的xmlns：X =http://schemas.microsoft.com/winfx/2006 / XAML的xmlns：本地=使用：MagnifierApp的xmlns：D =http://schemas.microsoft.com/expression/blend/2008的xmlns：MC = http://schemas.openxmlformats.org/markup-compatibility/2006 MC：可忽略=D> <电网X：NAME =LayoutGrid保证金=0,0背景={ThemeResource ApplicationPageBackgroundThemeBrush} PointerMoved = LayoutGrid_OnPointerMoved PointerWheelChanged =LayoutGrid_OnPointerWheelChanged PointerPressed =LayoutGrid_OnPointerPressed PointerReleased =LayoutGrid_OnPointerReleased> <图像X：NAME =BigImage的Horizo​​ntalAlignment =中心 VerticalAlignment =中心弹力=统一来源= http://blog.al.com/space-news/2009/04/iss015e22574.jpg/> <局部：放大镜 X：NAME =MagnifierTip VerticalAlignment =评出的的Horizo​​ntalAlignment =左能见度=坍塌/> < /网格和GT; < /页> MainPage.xaml.cs中 使用系统;使用Windows.UI.Xaml.Controls ; 使用Windows.UI.Xaml.Input; 使用Windows.UI.Xaml.Media; 使用Windows.UI.Xaml.Media.Imaging; 命名空间MagnifierApp {公共密封部分类的MainPage：第 {私人双zoomScale = 2; 私人双pointerX = 0; 私人双pointerY = 0; 私人常量双MinZoomScale = 0.25; 私人常量双MaxZoomScale = 32; 私人布尔isFirst = TRUE; 公众的MainPage（） { this.InitializeComponent（）; VAR BI =（BitmapImage的）BigImage.Source; bi.ImageOpened + = bi_ImageOpened; this.SizeChanged + = MainPage_SizeChanged; } 无效MainPage_SizeChanged（对象发件人，Windows.UI.Xaml.SizeChangedEventArgs E） { this.UpdateImageLayout（）; } 无效bi_ImageOpened（对象发件人，Windows.UI.Xaml.RoutedEventArgs E） { this.UpdateImageLayout（）; } 私人无效UpdateImageLayout（） { VAR BI =（BitmapImage的）BigImage.Source; 如果（bi.PixelWidth< this.LayoutGrid.ActualWidth&放大器;&安培; bi.PixelHeight< this.LayoutGrid.ActualHeight） {本。 BigImage.Stretch = Stretch.None; } ，否则 { this.BigImage.Stretch = Stretch.Uniform; } this.UpdateMagnifier（）; } 私人无效LayoutGrid_OnPointerMoved（对象发件人，PointerRoutedEventArgs E） {如果（！e.Pointer.IsInContact） {返回; } VAR点= e.GetCurrentPoint（this.LayoutGrid）; this.pointerX = point.Position.X; this.pointerY = point.Position.Y; this.UpdateMagnifier（）; } 私人无效LayoutGrid_OnPointerWheelChanged（对象发件人，PointerRoutedEventArgs E） {如果（e.GetCurrentPoint（this.LayoutGrid）.Properties.MouseWheelDelta大于0） { zoomScale = Math.Max（MinZoomScale，Math.Min（MaxZoomScale，zoomScale * 1.2））; } ，否则 { zoomScale = Math.Max（MinZoomScale，Math.Min（MaxZoomScale，zoomScale / 1.2））; } this.UpdateMagnifier（）; } 私人无效LayoutGrid_OnPointerPressed（对象发件人，PointerRoutedEventArgs E） {如果（e.Pointer.IsInContact！）{返回; } VAR点= e.GetCurrentPoint（this.LayoutGrid）; this.pointerX = point.Position.X; this.pointerY = point.Position.Y; this.UpdateMagnifier（）; MagnifierTip.Visibility = Windows.UI.Xaml.Visibility.Visible; } 私人无效LayoutGrid_OnPointerReleased（对象发件人，PointerRoutedEventArgs E） { MagnifierTip.Visibility = Windows.UI.Xaml.Visibility.Collapsed; } 私人无效UpdateMagnifier（） { VAR BI =（BitmapImage的）BigImage.Source; 双offsetX; 双offsetY; 双imageScale; CalculateImageScaleAndOffsets（双向，出offsetX，出offsetY，出imageScale）; MagnifierTip.PositionTransform.X =（-this.pointerX + offsetX）/ imageScale; MagnifierTip.PositionTransform.Y =（-this.pointerY + offsetY）/ imageScale; MagnifierTip.ZoomTransform.ScaleX = imageScale * zoomScale; MagnifierTip.ZoomTransform.ScaleY = imageScale * zoomScale; MagnifierTip.CenterTransform.X = MagnifierTip.MagnifierEllipse.ActualWidth / 2 - MagnifierTip.MagnifierEllipse.StrokeThickness / 2; MagnifierTip.CenterTransform.Y = MagnifierTip.MagnifierEllipse.ActualHeight / 2 - MagnifierTip.MagnifierEllipse.StrokeThickness / 2; MagnifierTip.MagnifierTranslateTransform.X = this.pointerX - （MagnifierTip.ActualWidth / 2）; MagnifierTip.MagnifierTranslateTransform.Y = this.pointerY - （MagnifierTip.ActualHeight）; 布尔tooHigh = MagnifierTip.MagnifierTranslateTransform.Y< 0; 布尔tooLeft = MagnifierTip.MagnifierTranslateTransform.X< 0; 布尔tooRight = MagnifierTip.MagnifierTranslateTransform.X + MagnifierTip.ActualWidth> this.LayoutGrid.ActualWidth; 如果（tooHigh || tooLeft || tooRight） {双角= 0.0; 如果（tooLeft&安培;&安培;！tooHigh） {变种DX = -MagnifierTip.MagnifierTranslateTransform.X; 变种R = MagnifierTip.ActualHeight - MagnifierTip.ActualWidth / 2; VAR阿拉德= Math.Asin（DX / R）; 角=阿拉德* 180 / Math.PI; } ，否则如果（tooLeft&安培;&安培; tooHigh） {变种DX = -MagnifierTip.MagnifierTranslateTransform.X; 变种DY = -MagnifierTip.MagnifierTranslateTransform.Y; 变种R = MagnifierTip.ActualHeight - MagnifierTip.ActualWidth / 2; VAR arad1 = Math.Asin（DX / R）; VAR arad2 = Math.Acos（（R - DY）/ R）; VAR阿拉德= Math.Max（arad1，arad2）; 角=阿拉德* 180 / Math.PI; } ，否则如果（tooHigh&安培;&安培;！tooRight） {变种DY = -MagnifierTip.MagnifierTranslateTransform.Y; 变种R = MagnifierTip.ActualHeight - MagnifierTip.ActualWidth / 2; VAR阿拉德= Math.Acos（（R - DY）/ R）; 如果（MagnifierTip.MagnifierTranslateTransform.X + Math.Sin（阿拉德）* R + MagnifierTip.ActualWidth> this.LayoutGrid.ActualWidth） {阿拉德= -arad; } 角=阿拉德* 180 / Math.PI; } ，否则如果（tooHigh） {变种DY = -MagnifierTip.MagnifierTranslateTransform.Y; 变种DX = MagnifierTip.MagnifierTranslateTransform.X + MagnifierTip.ActualWidth - this.LayoutGrid.ActualWidth; 变种R = MagnifierTip.ActualHeight - MagnifierTip.ActualWidth / 2; VAR arad1 = -Math.Acos（（R - DY）/ R）; VAR arad2 = -Math.Asin（DX / R）; VAR阿拉德= Math.Min（arad1，arad2）; 角=阿拉德* 180 / Math.PI; } ，否则//如果（tooRight） {变种DX = MagnifierTip.MagnifierTranslateTransform.X + MagnifierTip.ActualWidth - this.LayoutGrid.ActualWidth; 变种R = MagnifierTip.ActualHeight - MagnifierTip.ActualWidth / 2; VAR阿拉德= -Math.Asin（DX / R）; 角=阿拉德* 180 / Math.PI; } MagnifierTip.RotateTransform.Angle =角; MagnifierTip.LensRotateTransform.Angle =利用广角; } ，否则 { MagnifierTip.RotateTransform.Angle = 0; MagnifierTip.LensRotateTransform.Angle = 0; } } 私人无效CalculateImageScaleAndOffsets（BitmapImage的双向，出双offsetX，出双offsetY，出双imageScale） { VAR imageRatio =（双）bi.PixelWidth / bi.PixelHeight; VAR gridRatio = this.LayoutGrid.ActualWidth / this.LayoutGrid.ActualHeight; 如果（bi.PixelWidth< this.LayoutGrid.ActualWidth&放大器;&安培; bi.PixelHeight< this.LayoutGrid.ActualHeight） { offsetX = 0.5 *（this.LayoutGrid.ActualWidth - bi.PixelWidth）; offsetY = 0.5 *（this.LayoutGrid.ActualHeight - bi.PixelHeight）; imageScale = 1; } ，否则如果（imageRatio< gridRatio） { offsetX = 0.5 *（this.LayoutGrid.ActualWidth - imageRatio * this.LayoutGrid.ActualHeight）; offsetY = 0; imageScale = BigImage.ActualHeight / bi.PixelHeight; } ，否则 { offsetX = 0; offsetY = 0.5 *（this.LayoutGrid.ActualHeight - this.LayoutGrid.ActualWidth / imageRatio）; imageScale = BigImage.ActualWidth / bi.PixelWidth; } } } } Magnifier.xaml <用户控件X：类=MagnifierApp.Magnifier的xmlns =http://schemas.microsoft.com/winfx/2006/xaml/presentation的xmlns：X =http://schemas.microsoft.com/winfx/2006/xaml的xmlns：本地=使用：MagnifierApp的xmlns：D =http://schemas.microsoft.com/expression/blend/2008的xmlns：MC =HTTP：//模式.openxmlformats.org /标记兼容性/ 2006 MC：可忽略=D HEIGHT =227 WIDTH =170> <电网 HEIGHT =227 WIDTH =170 RenderTransformOrigin =0.5,1> < Grid.RenderTransform> <&的TransformGroup GT; < RotateTransform X：FieldModifier =公 X：NAME =RotateTransform角=0/> < TranslateTransform X：NAME =MagnifierTranslateTransform X：FieldModifier =公/> < /&的TransformGroup GT; < /Grid.RenderTransform> <椭圆的Horizo​​ntalAlignment =左 VerticalAlignment =评出的 IsHitTestVisible =FALSE WIDTH =152 HEIGHT = 152填充={ThemeResource ApplicationPageBackgroundThemeBrush}保证金=9,10,0,0 RenderTransformOrigin =0.5,0.5 StrokeThickness =0> ; < /椭圆> <椭圆X：NAME =MagnifierEllipseX：FieldModifier =公的Horizo​​ntalAlignment =左 VerticalAlignment =评出的 IsHitTestVisible =FALSE WIDTH =152 HEIGHT =152行程=白保证金=9,10,0,0 RenderTransformOrigin =0.5,0.5 StrokeThickness =0> < Ellipse.RenderTransform> < RotateTransform X：FieldModifier =公 X：NAME =LensRotateTransform角=0/> < /Ellipse.RenderTransform> < Ellipse.Fill> <的ImageBrush 的ImageSource =http://blog.al.com/space-news/2009/04/iss015e22574.jpg弹力=无 AlignmentX =左 AlignmentY =评出的> < ImageBrush.Transform> <&的TransformGroup GT; < TranslateTransform X：FieldModifier =公 X：NAME =PositionTransform/> < ScaleTransform X：FieldModifier =公 X：NAME =ZoomTransform/> < TranslateTransform X：FieldModifier =公 X：NAME =CenterTransform/> < /&的TransformGroup GT; < /ImageBrush.Transform> < /&的ImageBrush GT; < /Ellipse.Fill> < /椭圆> <路径数据=M85,11 C43.8548,11 10.5,44.3548 10.5,85.5 C10.5,126.645 43.8548,160 85160 C126.145,160 159.5,126.645 159.5,85.5 C159.5,44.3548 126.145 ，11 85,11žM85,0.5 C131.668,0.5 169.5,38.3319 169.5,85 C169.5,103.959 163.256,121.459 152.713,135.558 L151.895,136.625 L152,136.625 L84.2999,226 L18,136.625 L18.1054,136.625 L17。 2872,135.558 C6.74375,121.459 0.5,103.959 0.5,85 C0.5,38.3319 38.3319,0.5 85,0.5 Z保证金=0,0.5,0,0拉伸=填写行程=黑 UseLayoutRounding =假 StrokeThickness =0填充=白/> < /网格和GT; < /用户控件> I have been working on a Windows 8.1 RT app where the user loads an image with Stretch=Uniform. The image can be as small as possible and as big as possible.The clipping happens in my user control and my user control appears when I tap/press and hold on the screen/image.Clipping happens when when I tap and hold and move my finger/mouse around the image that is in the background. The Problems I am facing are Whenever the app is loaded for the first time on Emulator , and for the very first time when the tap /clicks and holding is performed , the user control appears on the top left on the screen and then it comes above my clicked/hold area. What I require is it should always appear wherever I click and hold and whenever I click and hold. On releasing the finger/mouse , it should collapse.I am using center transform. I want the region(the pixel) where my mouse is currently to be displayed exactly in the center of the user control , If i am loading a small resolution image 480*800 or even smaller , the region of my mouse is not coming into the center.To be more clearer, Imagine I am tapping and holding on the CORNEA of the human eye.The cornea should be displayed in the center of the user control and area above and below should cover the rest of the part.I don't want my control to go outside my image boundary, if my mouse is at the last pixel of the image , some part of image and some part of background should be displayed.I need to rotate the control as shown in the videoFind the complete code below.MainPage.XAML<Page x:Class="App78.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App78" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid x:Name="LayoutGrid" Margin="0,0" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Holding="LayoutGrid_Holding" PointerMoved="LayoutGrid_OnPointerMoved" PointerWheelChanged="LayoutGrid_OnPointerWheelChanged" PointerPressed="LayoutGrid_OnPointerPressed" PointerReleased="LayoutGrid_OnPointerReleased"> <Image x:Name="BigImage" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform" Source="http://blog.al.com/space-news/2009/04/iss015e22574.jpg" /> <local:Magnifier VerticalAlignment="Top" HorizontalAlignment="Left" x:Name="MagnifierTip" Visibility="Collapsed" /> </Grid></Page>MAINPAGE.XAML.CSusing System;using System.Diagnostics;using Windows.UI.Xaml.Controls;using Windows.UI.Xaml.Input;using Windows.UI.Xaml.Media;using Windows.UI.Xaml.Media.Imaging;namespace App78{ public sealed partial class MainPage : Page { private double zoomScale = 2; private double pointerX = 0; private double pointerY = 0; private const double MinZoomScale = .25; private const double MaxZoomScale = 32; public MainPage() { this.InitializeComponent(); var bi = (BitmapImage)BigImage.Source; bi.ImageOpened += bi_ImageOpened; this.SizeChanged += MainPage_SizeChanged; } void MainPage_SizeChanged(object sender, Windows.UI.Xaml.SizeChangedEventArgs e) { this.UpdateImageLayout(); } void bi_ImageOpened(object sender, Windows.UI.Xaml.RoutedEventArgs e) { this.UpdateImageLayout(); } private void UpdateImageLayout() { var bi = (BitmapImage)BigImage.Source; if (bi.PixelWidth < this.LayoutGrid.ActualWidth && bi.PixelHeight < this.LayoutGrid.ActualHeight) { this.BigImage.Stretch = Stretch.None; } else { this.BigImage.Stretch = Stretch.Uniform; } this.UpdateMagnifier(); } private void LayoutGrid_OnPointerMoved(object sender, PointerRoutedEventArgs e) { //DV: If pointer is not in contact we can ignore it if (!e.Pointer.IsInContact) { return; } var point = e.GetCurrentPoint(this.LayoutGrid); this.pointerX = point.Position.X; this.pointerY = point.Position.Y; this.UpdateMagnifier(); } private void UpdateMagnifier() { var bi = (BitmapImage)BigImage.Source; double offsetX = 0; double offsetY = 0; double imageScale = 1; var imageRatio = (double)bi.PixelWidth / bi.PixelHeight; var gridRatio = this.LayoutGrid.ActualWidth / this.LayoutGrid.ActualHeight; if (bi.PixelWidth < this.LayoutGrid.ActualWidth && bi.PixelHeight < this.LayoutGrid.ActualHeight) { offsetX = 0.5 * (this.LayoutGrid.ActualWidth - bi.PixelWidth); offsetY = 0.5 * (this.LayoutGrid.ActualHeight - bi.PixelHeight); //imageScale = 1; - remains } else if (imageRatio < gridRatio) { offsetX = 0.5 * (this.LayoutGrid.ActualWidth - imageRatio * this.LayoutGrid.ActualHeight); offsetY = 0; imageScale = BigImage.ActualHeight / bi.PixelHeight; } else { offsetX = 0; offsetY = 0.5 * (this.LayoutGrid.ActualHeight - this.LayoutGrid.ActualWidth / imageRatio); imageScale = BigImage.ActualWidth / bi.PixelWidth; } //DV: This is probably not need anymore //MagnifierTip.MagnifierTransform.X = this.pointerX; //MagnifierTip.MagnifierTransform.Y = this.pointerY; MagnifierTip.PositionTransform.X = (-this.pointerX + offsetX) / imageScale; MagnifierTip.PositionTransform.Y = (-this.pointerY + offsetY) / imageScale; //DV: I haven't tested the Scaling/Zoom MagnifierTip.ZoomTransform.ScaleX = imageScale * zoomScale; MagnifierTip.ZoomTransform.ScaleY = imageScale * zoomScale; MagnifierTip.CenterTransform.X = MagnifierTip.MagnifierEllipse.ActualWidth / 2 - MagnifierTip.MagnifierEllipse.StrokeThickness / 2; MagnifierTip.CenterTransform.Y = MagnifierTip.MagnifierEllipse.ActualHeight / 2 - MagnifierTip.MagnifierEllipse.StrokeThickness / 2; //DV: I added a GlobalGrid Transform which translates every children MagnifierTip.MagnifierTransformGrid.X = this.pointerX - (MagnifierTip.ActualWidth / 2); MagnifierTip.MagnifierTransformGrid.Y = this.pointerY - (MagnifierTip.ActualHeight); ; } private void LayoutGrid_OnPointerWheelChanged(object sender, PointerRoutedEventArgs e) { if (e.GetCurrentPoint(this.LayoutGrid).Properties.MouseWheelDelta > 0) { zoomScale = Math.Max(MinZoomScale, Math.Min(MaxZoomScale, zoomScale * 1.2)); } else { zoomScale = Math.Max(MinZoomScale, Math.Min(MaxZoomScale, zoomScale / 1.2)); } this.UpdateMagnifier(); } //DV: Holding usually only works with touch https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.uielement.holding.aspx?f=255&MSPPError=-2147217396 private void LayoutGrid_Holding(object sender, HoldingRoutedEventArgs e) { // } //DV: pointer pressed supports both mouse and touch but fires immeadiatley. You'll have to figure out a delay strategy or using holding for touch and right click for mouse private void LayoutGrid_OnPointerPressed(object sender, PointerRoutedEventArgs e) { MagnifierTip.Visibility = Windows.UI.Xaml.Visibility.Visible; } //DV: pointer released supports both mouse and touch. private void LayoutGrid_OnPointerReleased(object sender, PointerRoutedEventArgs e) { MagnifierTip.Visibility = Windows.UI.Xaml.Visibility.Collapsed; } }}Magnifier.XAML<UserControl x:Class="App78.Magnifier" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App78" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" Height="230" Width="170"> <Grid Height="230" Width="170"> <!-- DV: This is the global transform I added --> <Grid.RenderTransform> <TransformGroup> <TranslateTransform x:Name="MagnifierTransformGrid" x:FieldModifier="public"/> </TransformGroup> </Grid.RenderTransform> <Ellipse Opacity="1" Visibility="Visible" Fill="{ThemeResource ApplicationPageBackgroundThemeBrush}" HorizontalAlignment="Center" VerticalAlignment="Top" IsHitTestVisible="False" Width="135" Height="128" StrokeThickness="3" Margin="0,17,0,0" /> <Ellipse x:Name="MagnifierEllipse" x:FieldModifier="public" Opacity="1" Visibility="Visible" HorizontalAlignment="Left" VerticalAlignment="Top" IsHitTestVisible="False" Width="150" Height="150" Stroke="White" StrokeThickness="3" Margin="11,8,0,0" > <Ellipse.Fill> <ImageBrush ImageSource="http://blog.al.com/space-news/2009/04/iss015e22574.jpg" Stretch="None" AlignmentX="Left" AlignmentY="Top"> <ImageBrush.Transform> <TransformGroup> <TranslateTransform x:FieldModifier="public" x:Name="CenterTransform"/> <TranslateTransform x:FieldModifier="public" x:Name="PositionTransform"/> <ScaleTransform x:FieldModifier="public" x:Name="ZoomTransform"/> </TransformGroup> </ImageBrush.Transform> </ImageBrush> </Ellipse.Fill> </Ellipse> <Path Data="M25.533,0C15.457,0,7.262,8.199,7.262,18.271c0,9.461,13.676,19.698,17.63,32.338 c0.085,0.273,0.34,0.459,0.626,0.457c0.287-0.004,0.538-0.192,0.619-0.467c3.836-12.951,17.666-22.856,17.667-32.33 C43.803,8.199,35.607,0,25.533,0z M25.533,32.131c-7.9,0-14.328-6.429-14.328-14.328c0-7.9,6.428-14.328,14.328-14.328 c7.898,0,14.327,6.428,14.327,14.328C39.86,25.702,33.431,32.131,25.533,32.131z" Fill="#FFF4F4F5" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" Height="227" Width="171" ></Path> </Grid></UserControl>For ease , the project can be downloaded from here. For better understanding , I would like you to see this video. This is what exactly I need to implement. 解决方案 I got it working with some changes and trigonometry here.MainPage.xaml<Page x:Class="MagnifierApp.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:MagnifierApp" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid x:Name="LayoutGrid" Margin="0,0" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" PointerMoved="LayoutGrid_OnPointerMoved" PointerWheelChanged="LayoutGrid_OnPointerWheelChanged" PointerPressed="LayoutGrid_OnPointerPressed" PointerReleased="LayoutGrid_OnPointerReleased"> <Image x:Name="BigImage" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform" Source="http://blog.al.com/space-news/2009/04/iss015e22574.jpg" /> <local:Magnifier x:Name="MagnifierTip" VerticalAlignment="Top" HorizontalAlignment="Left" Visibility="Collapsed" /> </Grid></Page>MainPage.xaml.csusing System;using Windows.UI.Xaml.Controls;using Windows.UI.Xaml.Input;using Windows.UI.Xaml.Media;using Windows.UI.Xaml.Media.Imaging;namespace MagnifierApp{ public sealed partial class MainPage : Page { private double zoomScale = 2; private double pointerX = 0; private double pointerY = 0; private const double MinZoomScale = .25; private const double MaxZoomScale = 32; private bool isFirst = true; public MainPage() { this.InitializeComponent(); var bi = (BitmapImage)BigImage.Source; bi.ImageOpened += bi_ImageOpened; this.SizeChanged += MainPage_SizeChanged; } void MainPage_SizeChanged(object sender, Windows.UI.Xaml.SizeChangedEventArgs e) { this.UpdateImageLayout(); } void bi_ImageOpened(object sender, Windows.UI.Xaml.RoutedEventArgs e) { this.UpdateImageLayout(); } private void UpdateImageLayout() { var bi = (BitmapImage)BigImage.Source; if (bi.PixelWidth < this.LayoutGrid.ActualWidth && bi.PixelHeight < this.LayoutGrid.ActualHeight) { this.BigImage.Stretch = Stretch.None; } else { this.BigImage.Stretch = Stretch.Uniform; } this.UpdateMagnifier(); } private void LayoutGrid_OnPointerMoved(object sender, PointerRoutedEventArgs e) { if (!e.Pointer.IsInContact) { return; } var point = e.GetCurrentPoint(this.LayoutGrid); this.pointerX = point.Position.X; this.pointerY = point.Position.Y; this.UpdateMagnifier(); } private void LayoutGrid_OnPointerWheelChanged(object sender, PointerRoutedEventArgs e) { if (e.GetCurrentPoint(this.LayoutGrid).Properties.MouseWheelDelta > 0) { zoomScale = Math.Max(MinZoomScale, Math.Min(MaxZoomScale, zoomScale * 1.2)); } else { zoomScale = Math.Max(MinZoomScale, Math.Min(MaxZoomScale, zoomScale / 1.2)); } this.UpdateMagnifier(); } private void LayoutGrid_OnPointerPressed(object sender, PointerRoutedEventArgs e) { if (!e.Pointer.IsInContact) { return; } var point = e.GetCurrentPoint(this.LayoutGrid); this.pointerX = point.Position.X; this.pointerY = point.Position.Y; this.UpdateMagnifier(); MagnifierTip.Visibility = Windows.UI.Xaml.Visibility.Visible; } private void LayoutGrid_OnPointerReleased(object sender, PointerRoutedEventArgs e) { MagnifierTip.Visibility = Windows.UI.Xaml.Visibility.Collapsed; } private void UpdateMagnifier() { var bi = (BitmapImage)BigImage.Source; double offsetX; double offsetY; double imageScale; CalculateImageScaleAndOffsets(bi, out offsetX, out offsetY, out imageScale); MagnifierTip.PositionTransform.X = (-this.pointerX + offsetX) / imageScale; MagnifierTip.PositionTransform.Y = (-this.pointerY + offsetY) / imageScale; MagnifierTip.ZoomTransform.ScaleX = imageScale * zoomScale; MagnifierTip.ZoomTransform.ScaleY = imageScale * zoomScale; MagnifierTip.CenterTransform.X = MagnifierTip.MagnifierEllipse.ActualWidth / 2 - MagnifierTip.MagnifierEllipse.StrokeThickness / 2; MagnifierTip.CenterTransform.Y = MagnifierTip.MagnifierEllipse.ActualHeight / 2 - MagnifierTip.MagnifierEllipse.StrokeThickness / 2; MagnifierTip.MagnifierTranslateTransform.X = this.pointerX - (MagnifierTip.ActualWidth / 2); MagnifierTip.MagnifierTranslateTransform.Y = this.pointerY - (MagnifierTip.ActualHeight); bool tooHigh = MagnifierTip.MagnifierTranslateTransform.Y < 0; bool tooLeft = MagnifierTip.MagnifierTranslateTransform.X < 0; bool tooRight = MagnifierTip.MagnifierTranslateTransform.X + MagnifierTip.ActualWidth > this.LayoutGrid.ActualWidth; if (tooHigh || tooLeft || tooRight) { double angle = 0.0; if (tooLeft && !tooHigh) { var dx = -MagnifierTip.MagnifierTranslateTransform.X; var r = MagnifierTip.ActualHeight - MagnifierTip.ActualWidth / 2; var arad = Math.Asin(dx / r); angle = arad * 180 / Math.PI; } else if (tooLeft && tooHigh) { var dx = -MagnifierTip.MagnifierTranslateTransform.X; var dy = -MagnifierTip.MagnifierTranslateTransform.Y; var r = MagnifierTip.ActualHeight - MagnifierTip.ActualWidth / 2; var arad1 = Math.Asin(dx / r); var arad2 = Math.Acos((r - dy) / r); var arad = Math.Max(arad1, arad2); angle = arad * 180 / Math.PI; } else if (tooHigh && !tooRight) { var dy = -MagnifierTip.MagnifierTranslateTransform.Y; var r = MagnifierTip.ActualHeight - MagnifierTip.ActualWidth / 2; var arad = Math.Acos((r - dy) / r); if (MagnifierTip.MagnifierTranslateTransform.X + Math.Sin(arad) * r + MagnifierTip.ActualWidth > this.LayoutGrid.ActualWidth) { arad = -arad; } angle = arad * 180 / Math.PI; } else if (tooHigh) { var dy = -MagnifierTip.MagnifierTranslateTransform.Y; var dx = MagnifierTip.MagnifierTranslateTransform.X + MagnifierTip.ActualWidth - this.LayoutGrid.ActualWidth; var r = MagnifierTip.ActualHeight - MagnifierTip.ActualWidth / 2; var arad1 = -Math.Acos((r - dy) / r); var arad2 = -Math.Asin(dx / r); var arad = Math.Min(arad1, arad2); angle = arad * 180 / Math.PI; } else //if (tooRight) { var dx = MagnifierTip.MagnifierTranslateTransform.X + MagnifierTip.ActualWidth - this.LayoutGrid.ActualWidth; var r = MagnifierTip.ActualHeight - MagnifierTip.ActualWidth / 2; var arad = -Math.Asin(dx / r); angle = arad * 180 / Math.PI; } MagnifierTip.RotateTransform.Angle = angle; MagnifierTip.LensRotateTransform.Angle = -angle; } else { MagnifierTip.RotateTransform.Angle = 0; MagnifierTip.LensRotateTransform.Angle = 0; } } private void CalculateImageScaleAndOffsets(BitmapImage bi, out double offsetX, out double offsetY, out double imageScale) { var imageRatio = (double)bi.PixelWidth / bi.PixelHeight; var gridRatio = this.LayoutGrid.ActualWidth / this.LayoutGrid.ActualHeight; if (bi.PixelWidth < this.LayoutGrid.ActualWidth && bi.PixelHeight < this.LayoutGrid.ActualHeight) { offsetX = 0.5 * (this.LayoutGrid.ActualWidth - bi.PixelWidth); offsetY = 0.5 * (this.LayoutGrid.ActualHeight - bi.PixelHeight); imageScale = 1; } else if (imageRatio < gridRatio) { offsetX = 0.5 * (this.LayoutGrid.ActualWidth - imageRatio * this.LayoutGrid.ActualHeight); offsetY = 0; imageScale = BigImage.ActualHeight / bi.PixelHeight; } else { offsetX = 0; offsetY = 0.5 * (this.LayoutGrid.ActualHeight - this.LayoutGrid.ActualWidth / imageRatio); imageScale = BigImage.ActualWidth / bi.PixelWidth; } } }}Magnifier.xaml<UserControl x:Class="MagnifierApp.Magnifier" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:MagnifierApp" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" Height="227" Width="170"> <Grid Height="227" Width="170" RenderTransformOrigin="0.5,1"> <Grid.RenderTransform> <TransformGroup> <RotateTransform x:FieldModifier="public" x:Name="RotateTransform" Angle="0" /> <TranslateTransform x:Name="MagnifierTranslateTransform" x:FieldModifier="public" /> </TransformGroup> </Grid.RenderTransform> <Ellipse HorizontalAlignment="Left" VerticalAlignment="Top" IsHitTestVisible="False" Width="152" Height="152" Fill="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="9,10,0,0" RenderTransformOrigin="0.5,0.5" StrokeThickness="0"> </Ellipse> <Ellipse x:Name="MagnifierEllipse" x:FieldModifier="public" HorizontalAlignment="Left" VerticalAlignment="Top" IsHitTestVisible="False" Width="152" Height="152" Stroke="White" Margin="9,10,0,0" RenderTransformOrigin="0.5,0.5" StrokeThickness="0"> <Ellipse.RenderTransform> <RotateTransform x:FieldModifier="public" x:Name="LensRotateTransform" Angle="0" /> </Ellipse.RenderTransform> <Ellipse.Fill> <ImageBrush ImageSource="http://blog.al.com/space-news/2009/04/iss015e22574.jpg" Stretch="None" AlignmentX="Left" AlignmentY="Top"> <ImageBrush.Transform> <TransformGroup> <TranslateTransform x:FieldModifier="public" x:Name="PositionTransform" /> <ScaleTransform x:FieldModifier="public" x:Name="ZoomTransform" /> <TranslateTransform x:FieldModifier="public" x:Name="CenterTransform" /> </TransformGroup> </ImageBrush.Transform> </ImageBrush> </Ellipse.Fill> </Ellipse> <Path Data="M85,11 C43.8548,11 10.5,44.3548 10.5,85.5 C10.5,126.645 43.8548,160 85,160 C126.145,160 159.5,126.645 159.5,85.5 C159.5,44.3548 126.145,11 85,11 z M85,0.5 C131.668,0.5 169.5,38.3319 169.5,85 C169.5,103.959 163.256,121.459 152.713,135.558 L151.895,136.625 L152,136.625 L84.2999,226 L18,136.625 L18.1054,136.625 L17.2872,135.558 C6.74375,121.459 0.5,103.959 0.5,85 C0.5,38.3319 38.3319,0.5 85,0.5 z" Margin="0,0.5,0,0" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" StrokeThickness="0" Fill="White" /> </Grid></UserControl> 这篇关于裁剪变换使用低分辨率的图像，并将其分配给我的用户控制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
11-02 23:40
Powered by LMLPHP ©2024 并将其分配给我的用户控制 0.006265