返回顶部
首页 > 资讯 > 后端开发 > 其他教程 >基于WPF实现简单放大镜效果
  • 796
分享到

基于WPF实现简单放大镜效果

WPF放大镜效果WPF放大镜 2022-12-27 12:12:53 796人浏览 独家记忆
摘要

WPF 如何实现简单放大镜 框架使用.net40; Visual Studio 2019; 实现此功能需要用到 VisualBrush ,放大镜展现使用 

WPF 如何实现简单放大镜

框架使用.net40

Visual Studio 2019;

实现此功能需要用到 VisualBrush ,放大镜展现使用 canvas -> Ellipse .

  • 可以使用 VisualBrush 创建放大效果。
  • 设置 Visual 获取或设置画笔的内容。
  • 设置 ViewboxUnits Absolute 坐标系与边界框无关。
  • 设置 Viewbox 获取或设置 TileBrush 图块中内容的位置和尺寸。
  • 当鼠标移动获取当前坐标点修改 VisualBrush 的 Viewbox
  • 鼠标移动修改 Ellipse 的 Canvas.Left 与 Canvas.Top 跟随鼠标。

实现代码

1) xaml 代码如下:

<Grid>
        <Image Source="0.png" Stretch="Fill"
               Name="image" MouseMove="image_MouseMove"
               MouseEnter="image_MouseEnter" MouseLeave="image_MouseLeave"/>

        <Canvas IsHitTestVisible="False" Name="MagnifierPanel">
            <Ellipse Stroke="LightBlue" Name="MagnifierCircle" 
                     Height="200" Width="200">
                <Ellipse.Fill>
                    <VisualBrush x:Name="MagnifierBrush"  
                                 Visual="{Binding ElementName=image}" 
                                 ViewboxUnits="Absolute"/>
                </Ellipse.Fill>
            </Ellipse>
        </Canvas>
    </Grid>

2) xaml.cs 代码如下:

private void image_MouseMove(object sender, MouseEventArgs e)
        {
            var center = e.GetPosition(image);
            var length = MagnifierCircle.ActualWidth * _factor;
            var radius = length / 2;
            var viewboxRect = = new Rect(center.X - radius, center.Y - radius, length, length);
            MagnifierBrush.Viewbox = viewboxRect;
            MagnifierCircle.SetValue(Canvas.LeftProperty, center.X - MagnifierCircle.ActualWidth / 2);
            MagnifierCircle.SetValue(Canvas.TopProperty, center.Y - MagnifierCircle.ActualHeight / 2);

        }

        private void image_MouseEnter(object sender, MouseEventArgs e)
        {
            MagnifierCircle.Visibility = Visibility.Visible;
        }

        private void image_MouseLeave(object sender, MouseEventArgs e)
        {
            MagnifierCircle.Visibility = Visibility.Hidden;
        }

效果图

到此这篇关于基于WPF实现简单放大镜效果的文章就介绍到这了,更多相关WPF放大镜内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 基于WPF实现简单放大镜效果

本文链接: https://lsjlt.com/news/175923.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 基于WPF实现简单放大镜效果
    WPF 如何实现简单放大镜 框架使用.NET40; Visual Studio 2019; 实现此功能需要用到 VisualBrush ,放大镜展现使用 ...
    99+
    2022-12-27
    WPF放大镜效果 WPF放大镜
  • vue实现简单放大镜效果
    本文实例为大家分享了vue实现简单放大镜效果的具体代码,供大家参考,具体内容如下 <template> <div> <div...
    99+
    2024-04-02
  • javascript实现简单放大镜效果
    一个大盒子中有一张图片,鼠标放上去会出现一个半透明的遮罩层,鼠标移动,遮罩层跟着移动,盒子旁边还有一个放大的图片,跟着遮罩层移动的位置而改变放大图的位置,鼠标离开大盒子,遮罩层和放大...
    99+
    2024-04-02
  • js实现简单的放大镜效果
    本文实例为大家分享了js实现简单放大镜效果的具体代码,供大家参考,具体内容如下 效果 效果,鼠标在原图片移动,黄色小盒子跟随鼠标移动,黄色小盒子盖住的部分,在显示区显示 效果图如下:...
    99+
    2024-04-02
  • 使用JavaScript实现简单图像放大镜效果
    目录项目基本结构第 1 步:图像放大镜的基本结构第 2 步:将图像添加到放大镜第 3 步:CSS设计放大镜第 4 步:使用 JavaScript 激活图像放大镜 完整源码下...
    99+
    2022-11-13
    JavaScript图像放大镜 JavaScript 放大镜
  • JavaScript实现放大镜效果
    本文实例为大家分享了JavaScript实现放大镜效果的具体代码,供大家参考,具体内容如下 这次实现的效果如下: 这次的案例稍微有一点难度,在css和js上都需要多加思考,话不多说...
    99+
    2024-04-02
  • 用javascript实现放大镜效果
    我们经常在一些详情页上可以见到放大镜效果,今天我们也来做一个放大镜样式。 先来看一下效果: 图中的图片选的不是很好,有些糊了,各位可以重新选择图片进行做放大镜案例 这个案例可以分为...
    99+
    2024-04-02
  • 如何基于jQuery插件jqzoom实现的图片放大镜效果
    这篇文章主要介绍如何基于jQuery插件jqzoom实现的图片放大镜效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!jqzoom插件实现图片放大镜效果。图1.1jqzoom插件实现...
    99+
    2024-04-02
  • vue如何实现放大镜效果
    这篇文章主要为大家展示了“vue如何实现放大镜效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue如何实现放大镜效果”这篇文章吧。组件使用less,请确保已...
    99+
    2024-04-02
  • Vue3实现图片放大镜效果
    本文实例为大家分享了Vue3实现图片放大镜效果的具体代码,供大家参考,具体内容如下 实现效果 代码 <template> <div class="good...
    99+
    2024-04-02
  • JavaScript实现商品放大镜效果
    本文实例为大家分享了JavaScript实现商品放大镜的具体代码,供大家参考,具体内容如下 HTML+CSS部分: <style> .small{ ...
    99+
    2024-04-02
  • Vue实现商品放大镜效果
    本文实例为大家分享了Vue实现商品放大镜效果的具体代码,供大家参考,具体内容如下 一、前言 在这个鼎盛的电商时代各种直播带货或者自主逛宝购物,我们对商品的认知和了解进一步查看详情,发...
    99+
    2024-04-02
  • JavaScript怎么实现放大镜效果
    这篇文章主要介绍了JavaScript怎么实现放大镜效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。这次实现的效果如下:这次的案例稍微有一点难度,在css和js上都需要多加...
    99+
    2023-06-25
  • HTML+CSS+JavaScript实现放大镜效果
    本文实例为大家分享了HTML+CSS+JavaScript实现放大镜效果的具体代码,供大家参考,具体内容如下 效果演示 JS 详解 HTML 和 CSS 部分放在了文章最后的源代码...
    99+
    2024-04-02
  • JS实现京东放大镜效果
    本文实例为大家分享了JS实现京东放大镜效果的具体代码,供大家参考,具体内容如下 需要实现的效果图如下: ①布局:布局采用一个大盒子里面首先分为上下两个部分,然后下部分又分为左右两个...
    99+
    2024-04-02
  • 基于jquery实现简单轮播图效果
    本文使用jquery实现轮播图效果,供大家参考,具体内容如下 首先上效果 上代码 html <div id="main">     <div class="pic...
    99+
    2024-04-02
  • 基于WPF实现一个简单的音频播放动画控件
    目录1.实现代码2.效果预览1.实现代码 一、创建AnimationAudio.xaml代码如下 <ResourceDictionary xmlns="http://schem...
    99+
    2024-04-02
  • jquery中怎么实现放大镜效果
    这篇文章给大家介绍jquery中怎么实现放大镜效果,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。html部分:这里需要使用2长一定比例的图片,在页面中按比例设置2个div中来存放这2长...
    99+
    2024-04-02
  • 怎么用javascript实现放大镜效果
    今天小编给大家分享一下怎么用javascript实现放大镜效果的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。先来看一下效果:...
    99+
    2023-07-02
  • 怎么用vue实现放大镜效果
    这篇文章主要介绍“怎么用vue实现放大镜效果”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么用vue实现放大镜效果”文章能帮助大家解决问题。组件使用less,请确保已安装loader本组件为放大镜...
    99+
    2023-07-04
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作