沃梦达 / 编程问答 / C#/.NET问题 / 正文

缩放用户控件中的裁剪像素

C#/.NET问题
2022-01-01

Zoom Cropped pixels in a user control(缩放用户控件中的裁剪像素)

本文介绍了缩放用户控件中的裁剪像素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我开发了一个用户控件.用户控件就像放大镜一样.用户控件有一个图像按钮，显示逐像素裁剪的图像.

I have developed a user control. The user control is like a magnifier glass . The user control has an image button which shows images cropped pixel by pixel .

StorageFile storageFile =
     await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/wallpaper.jpg", UriKind.RelativeOrAbsolute));
            using (Windows.Storage.Streams.IRandomAccessStream fileStream = await storageFile.OpenAsync(FileAccessMode.Read))
            {
                BitmapImage bitmapImage = new BitmapImage();
                await bitmapImage.SetSourceAsync(fileStream);


                WriteableBitmap writeableBitmap =
                    new WriteableBitmap(bitmapImage.PixelWidth, bitmapImage.PixelHeight);
                fileStream.Seek(0);
                await writeableBitmap.SetSourceAsync(fileStream);
                writeableBitmap = writeableBitmap.Crop(Convert.ToInt32(xValue), Convert.ToInt32(yValue), 100, 100);
                MagnifyTip.image1.ImageSource = writeableBitmap;

现在 MagnifyTip.image1 有一个设置为裁剪图像的图像源.我的要求是缩放裁剪区域，然后将其分配给图像源.用户控件如下所示帮助将不胜感激

Now the MagnifyTip.image1 has an image source that is set to a cropped image . My requirenment is to zoom the cropped region and then assign it to the image source. The user control looks like this Help would be appreciated

推荐答案

也许这对你有用，它和 WPF 允许的一样高效，因为代码中没有图像裁剪，它只使用 RenderTransform 来做魔术.运行下面的代码并在图像上按下鼠标，放大镜如下所示:

Maybe this works for you, it is as efficient as WPF allows I suppose since there is no image cropping in the code, it just uses the RenderTransform to do the magic. Run the code below and press the mouse over the image so the magnifying glass appears like this:

XAML:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        DataContext="{Binding RelativeSource={RelativeSource Self}}"
        Width="512"
        Height="512">
    <Grid>
        <Canvas MouseDown="FullImage_OnMouseDown"
                MouseMove="FullImage_OnMouseMove"
                MouseUp="FullImage_OnMouseUp">
            <Image Name="FullImage"
                   Source="http://www.mupin.it/wp-content/uploads/2012/06/lenna1.png" />
            <Border Name="BorderZoom"
                    Visibility="Visible"
                    Width="{Binding ImageZoomSize, FallbackValue='200'}"
                    Height="{Binding ImageZoomSize, FallbackValue='200'}">
                <Border.Clip>
                    <EllipseGeometry RadiusX="{Binding ImageZoomSizeHalf, FallbackValue=100}"
                                     RadiusY="{Binding ImageZoomSizeHalf, FallbackValue=100}"
                                     Center="{Binding CenterPoint, FallbackValue='100,100'}">

                    </EllipseGeometry>
                </Border.Clip>
                <Image Source="{Binding ElementName=FullImage, Path=Source}"
                       RenderTransformOrigin="0.5,0.5">
                    <Image.RenderTransform>
                        <TransformGroup>
                            <TranslateTransform X="{Binding Xt}"
                                                Y="{Binding Yt}" />
                            <ScaleTransform ScaleX="{Binding ZoomFactor, FallbackValue='8'}"
                                            ScaleY="{Binding ZoomFactor, FallbackValue='8'}" />
                        </TransformGroup>
                    </Image.RenderTransform>
                </Image>
            </Border>
        </Canvas>
    </Grid>
</Window>

这是背后的代码:

using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media.Imaging;

namespace WpfApplication1
{
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        public MainWindow()
        {
            ZoomFactor = 8;
            ImageZoomSize = 200;
            InitializeComponent();

            BorderZoom.Visibility = Visibility.Hidden;
        }

        public double Xt { get; private set; }
        public double Yt { get; private set; }
        public double ZoomFactor { get; private set; }
        public int ImageZoomSize { get; private set; }
        public int ImageZoomSizeHalf { get { return ImageZoomSize/2; } }
        public Point CenterPoint { get { return new Point(ImageZoomSizeHalf, ImageZoomSizeHalf);} }


        private void FullImage_OnMouseDown(object sender, MouseButtonEventArgs e)
        {
            BorderZoom.Visibility = Visibility.Visible;
            FullImage_OnMouseMove(sender, e);
        }

        private void FullImage_OnMouseMove(object sender, MouseEventArgs e)
        {
            if (BorderZoom.Visibility == Visibility.Visible)
            {
                BorderZoom.Visibility = Visibility.Visible;
                var pos = e.GetPosition(FullImage);
                Canvas.SetLeft(BorderZoom, pos.X - ImageZoomSizeHalf);
                Canvas.SetTop(BorderZoom, pos.Y - ImageZoomSizeHalf);

                var isrc = FullImage.Source as BitmapSource;
                if(isrc == null) return;

                var h = (double)isrc.PixelHeight;
                var w = (double)isrc.PixelWidth;              

                Xt = pos.X* (-ImageZoomSize/w) + ImageZoomSize/2.0;
                Yt = pos.Y * (-ImageZoomSize / h) + ImageZoomSize / 2.0;

                OnNotifyPropertyChanged("Xt");
                OnNotifyPropertyChanged("Yt");
            }
        }

        private void FullImage_OnMouseUp(object sender, MouseButtonEventArgs e)
        {
            BorderZoom.Visibility = Visibility.Hidden;
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private void OnNotifyPropertyChanged(string propName)
        {
            if(PropertyChanged!= null) PropertyChanged(this, new PropertyChangedEventArgs(propName));
        }
    }
}

更新

根据要求，请参阅下面的代码，将放大提示包装在用户控件中，如下所示:

As requested see the code below wrapping the magnifying tip in a user control that looks like this:

MagifiyingTipCtrl 的 XAML:

<UserControl x:Class="WpfApplication1.MagifiyingTipCtrl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             DataContext="{Binding RelativeSource={RelativeSource Self}}">
    <Grid>

        <Grid Name="ZoomedArea"  VerticalAlignment="Top"
              Visibility="Visible"
              Margin="15,15"
              Width="{Binding ZoomWidth, FallbackValue='136'}"
              Height="{Binding ZoomHeight, FallbackValue='128'}">
            <Grid.Clip>
                <EllipseGeometry RadiusX="{Binding ZoomWidthHalf, FallbackValue=68}"
                                 RadiusY="{Binding ZoomHeightHalf, FallbackValue=64}"
                                 Center="{Binding CenterPoint, FallbackValue='100,100'}">
                </EllipseGeometry>
            </Grid.Clip>
            <Image Source="{Binding SourceImage}"
                   RenderTransformOrigin="0.5,0.5">
                <Image.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform X="{Binding Xt}"
                                            Y="{Binding Yt}" />
                        <ScaleTransform ScaleX="{Binding ZoomFactor, FallbackValue='8'}"
                                        ScaleY="{Binding ZoomFactor, FallbackValue='8'}" />
                    </TransformGroup>
                </Image.RenderTransform>
            </Image>
        </Grid>

        <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" />
    </Grid>
</UserControl>

MagifiyingTipCtrl 的代码隐藏:

using System.Windows.Media.Imaging;

namespace WpfApplication1
{
    public partial class MagifiyingTipCtrl : UserControl
    {
        public MagifiyingTipCtrl()
        {
            ZoomFactor = 8;
            ZoomWidth = 136;
            ZoomHeight = 128;

            InitializeComponent();
        }

        public static readonly DependencyProperty SourceImageProperty =
            DependencyProperty.Register("SourceImage", typeof (BitmapSource), typeof (MagifiyingTipCtrl));

        public static readonly DependencyProperty XtProperty =
            DependencyProperty.Register("Xt", typeof(double), typeof(MagifiyingTipCtrl));

        public static readonly DependencyProperty YtProperty =
            DependencyProperty.Register("Yt", typeof(double), typeof(MagifiyingTipCtrl));


        public BitmapSource SourceImage
        {
            get { return (BitmapSource)GetValue(SourceImageProperty); }
            set { SetValue(SourceImageProperty, value); }
        }

        public double Xt
        {
            get { return (double)GetValue(XtProperty); }
            set { SetValue(XtProperty, value); }
        }

        public double Yt
        {
            get { return (double)GetValue(YtProperty); }
            set { SetValue(YtProperty, value); }
        }

        public void SetPosition(Point pos)
        {
            if (SourceImage == null) return;

            var h = (double)SourceImage.PixelHeight;
            var w = (double)SourceImage.PixelWidth;

            Xt = pos.X * (-ZoomWidth / w) + ZoomWidth / 2.0;
            Yt = pos.Y * (-ZoomHeight / h) + ZoomHeight / 2.0;
        }

        public double ZoomFactor { get; private set; }
        public int ZoomWidth { get; private set; }
        public int ZoomHeight { get; private set; }

        public int ZoomWidthHalf { get { return ZoomWidth / 2; } }
        public int ZoomHeightHalf { get { return ZoomHeight / 2; } }

        public Point CenterPoint { get { return new Point(ZoomWidthHalf, ZoomHeightHalf); } }
    }
}

主窗口的 XAML:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:wpfApplication1="clr-namespace:WpfApplication1"
        Title="MainWindow"
        DataContext="{Binding RelativeSource={RelativeSource Self}}"
        Width="512"
        Height="512">
    <Grid>
        <Canvas MouseDown="FullImage_OnMouseDown"
                MouseMove="FullImage_OnMouseMove"
                MouseUp="FullImage_OnMouseUp">
            <Image Name="FullImage"
                   Source="http://www.mupin.it/wp-content/uploads/2012/06/lenna1.png" />

            <wpfApplication1:MagifiyingTipCtrl x:Name="MagnifiyingTip"
                                               SourceImage="{Binding ElementName=FullImage, Path=Source}" />
        </Canvas>
    </Grid>
</Window>

MainWindow 的代码隐藏:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void FullImage_OnMouseDown(object sender, MouseButtonEventArgs e)
        {
            MagnifiyingTip.Visibility = Visibility.Visible;
            FullImage_OnMouseMove(sender, e);
        }

        private void FullImage_OnMouseMove(object sender, MouseEventArgs e)
        {
            if (MagnifiyingTip.Visibility == Visibility.Visible)
            {
                MagnifiyingTip.Visibility = Visibility.Visible;
                var pos = e.GetPosition(FullImage);
                Canvas.SetLeft(MagnifiyingTip, pos.X - MagnifiyingTip.ActualWidth/2);
                Canvas.SetTop(MagnifiyingTip, pos.Y - MagnifiyingTip.ActualHeight);
                MagnifiyingTip.SetPosition(pos);
            }
        }

        private void FullImage_OnMouseUp(object sender, MouseButtonEventArgs e)
        {
            MagnifiyingTip.Visibility = Visibility.Hidden;
        }
    }
}

这篇关于缩放用户控件中的裁剪像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

本文标题为：缩放用户控件中的裁剪像素

上一篇： ASP.NET 将 UserControl 动态添加到 PlaceHolder，不会触发 Click 事件，只有 Page_Load
下一篇： 为什么 DataBinding 不传播到 UserControl

基础教程推荐

学习HTML
学习jQuery
学习Laravel
学习CSS3
学习Vue.js
学习Bootstrap5
学习ThinkPHP
学习AJAX
猜你喜欢
最新文章
热门文章
编程基础
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2