Scale & transform

 

http://msdn.microsoft.com/en-us/magazine/dd188700.aspx

 

I am learning this article. What I am thinking is to write something similar to Magnify in this sample.

 

For example, if user want to add a magnify to a control, it will add a mirror control to its root node. This mirror control will take a snapshot of current screen, and then use clip, transform to magnify  the control. It sounds workable, isn’t it?

 

I have encountered following issues when implementing this:

 

1.      I am using Canvas to adjust its layout.  But after setting its scale, the position is not correct any more

2.      I am using RenderTargetBitmap. However, it is disable in Silverlight.

 

I write a similar one in WPF. If any one who has any other idea to zoom the selected area, please let me know.

 

Write a Zoom control

 

ContractedBlock.gif ExpandedBlockStart.gif Code
<UserControl x:Class="WpfApplication1.MagnifyControl"
    xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
    Height
="300" Width="300">
    
<Grid>
        
<Grid x:Name="LayoutRoot" >
           
<Canvas x:Name="ZoomCanvas" Visibility="Collapsed" >
                
<Canvas.RenderTransform>
                    
<ScaleTransform CenterX="0" CenterY="0" ScaleX="4" ScaleY="4"/>
                
</Canvas.RenderTransform>
                
<Canvas.Clip>
                    
<EllipseGeometry x:Name="Lens" Center="0,0" RadiusX="40" RadiusY="40" />
                
</Canvas.Clip>
                
<Canvas Canvas.Left="0" Canvas.Top="0" >
                    
<Image x:Name="MirrorImage"   Canvas.Left="0" Canvas.Top="0"  />
                
</Canvas>
                
<Path Canvas.Left="0" Canvas.Top="0" Stroke="#808080" StrokeThickness="1">
                    
<Path.Data>
                        
<EllipseGeometry x:Name="LensBorder" Center="0,0" RadiusX="40" RadiusY="40" />
                    
</Path.Data>
                
</Path>
            
</Canvas>
        
</Grid>
    
</Grid>
</UserControl>

 

Second, adding event handler

 

ContractedBlock.gif ExpandedBlockStart.gif Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication1
{
    
/// <summary>
    
/// Interaction logic for MagnifyControl.xaml
    
/// </summary>
    public partial class MagnifyControl : UserControl
    {
        
private bool _dragging = false;
        
private const double _scale = 4.0;

        Canvas _parentCanvas 
= null;
        Canvas _mirrorCanvas 
= null;
        Grid      _topGrid 
= null;

        
public MagnifyControl()
        {
            InitializeComponent();
        }

        
public void WireUp(Canvas parent, Canvas mirror, Grid topGrid)
        {
            _parentCanvas 
= parent;
            _mirrorCanvas 
= mirror;
            _topGrid 
= topGrid;

            parent.Children.Add(
this);
            _mirrorCanvas.MouseLeftButtonDown 
+= OnMouseLeftButtonDown;
            _mirrorCanvas.MouseLeftButtonUp 
+= OnMouseLeftButtonUp;
            _mirrorCanvas.MouseMove 
+= OnMouseMove;
 
        }

        
private void OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {

            
//get the size of the printer page
            RenderTargetBitmap bmp = new RenderTargetBitmap(Convert.ToInt16(_parentCanvas.ActualWidth), Convert.ToInt16(_parentCanvas.ActualHeight),
                                                         
12096, PixelFormats.Pbgra32);
            bmp.Render(_mirrorCanvas);
            MirrorImage.Source 
= bmp;
            
double x = e.GetPosition(_parentCanvas).X;
            
double y = e.GetPosition(_parentCanvas).Y;
            PositionLens(x, y);

            ZoomCanvas.Visibility 
= Visibility.Visible;
            ((FrameworkElement)sender).CaptureMouse();
            _dragging 
= true;
        }

        
private void OnMouseMove(object sender, MouseEventArgs e)
        {
            
if (_dragging)
            {
                
double x = e.GetPosition(_mirrorCanvas).X;
                
double y = e.GetPosition(_mirrorCanvas).Y;
                PositionLens(x, y);
            }
        }

        
private void OnMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            
if (_dragging)
            {
                ZoomCanvas.Visibility 
= Visibility.Collapsed;
                ((FrameworkElement)sender).ReleaseMouseCapture();
                _dragging 
= false;
            }
        }

        
private void PositionLens(double x, double y)
        {
            Lens.Center 
= LensBorder.Center = new Point(x, y);
            
this.SetValue(Canvas.LeftProperty, (1 - _scale) * x);
            
this.SetValue(Canvas.TopProperty, (1 - _scale) * y);

        }
    }
}

 

Sample to use this control:

 

            MagnifyControl magnify  =   new  MagnifyControl();
            magnify.WireUp(RootCanvas, MainCanvas, LayoutRoot);   

 

转载于:https://www.cnblogs.com/pangpangxiong/archive/2009/11/23/1608962.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值