从Flash转C#,很多内容一知半解,边摸索边前进,代码粗糙,权当留个脚印。

只是想得到一个基础的移动和缩放功能的界面,找了很久都是画线、画矩形等基础形状的代码,移动和缩放说的并不清晰,只能自己努力来解决一下。

素材准备:

WPF项目的屏幕上放一个Canvas控件,名称为canvas1。

代码如下:

 using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Input;
using System.Windows.Shapes;
using System.Windows.Controls; namespace WpfcanvasDrawing
{
/// <summary>
/// MainWindow.xaml 的交互逻辑
/// </summary>
public partial class MainWindow : Window
{
//移动标志
bool isMoving = false;
//鼠标按下去的位置
Point startMovePosition; TranslateTransform totalTranslate = new TranslateTransform();
TranslateTransform tempTranslate = new TranslateTransform();
ScaleTransform totalScale = new ScaleTransform();
Double scaleLevel = ; public MainWindow()
{
InitializeComponent(); canvas1.Focusable = true;//重要:默认条件下不接收鼠标事件
canvas1.HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch;
canvas1.VerticalAlignment = System.Windows.VerticalAlignment.Stretch;
canvas1.Background = Brushes.Transparent;//.Cyan; DrawingLine(new Point(, ), new Point(, ));
DrawingLine(new Point(, ), new Point(, ));
} protected void DrawingLine(Point startPt, Point endPt)
{
LineGeometry myLineGeometry = new LineGeometry();
myLineGeometry.StartPoint = startPt;
myLineGeometry.EndPoint = endPt; Path myPath = new Path();
myPath.Stroke = Brushes.Black;
myPath.StrokeThickness = ;
myPath.Data = myLineGeometry; canvas1.Children.Add(myPath);
} private void canvas1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
startMovePosition = e.GetPosition((Canvas)sender);
isMoving = true;
} private void canvas1_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
isMoving = false;
Point endMovePosition = e.GetPosition((Canvas)sender); //为了避免跳跃式的变换,单次有效变化 累加入 totalTranslate中。
totalTranslate.X += (endMovePosition.X - startMovePosition.X)/scaleLevel;
totalTranslate.Y += (endMovePosition.Y - startMovePosition.Y)/scaleLevel;
} private void canvas1_MouseMove(object sender, MouseEventArgs e)
{
if (isMoving)
{
Point currentMousePosition = e.GetPosition((Canvas)sender);//当前鼠标位置 Point deltaPt = new Point(, );
deltaPt.X = (currentMousePosition.X - startMovePosition.X) /scaleLevel;
deltaPt.Y = (currentMousePosition.Y - startMovePosition.Y) /scaleLevel; tempTranslate.X = totalTranslate.X + deltaPt.X;
tempTranslate.Y = totalTranslate.Y + deltaPt.Y; adjustGraph();
}
} private void canvas1_MouseWheel(object sender, MouseWheelEventArgs e)
{
Point scaleCenter = e.GetPosition((Canvas)sender); if (e.Delta > )
{
scaleLevel *= 1.08;
}
else
{
scaleLevel /= 1.08;
}
//Console.WriteLine("scaleLevel: {0}", scaleLevel); totalScale.ScaleX = scaleLevel;
totalScale.ScaleY = scaleLevel;
totalScale.CenterX = scaleCenter.X;
totalScale.CenterY = scaleCenter.Y; adjustGraph();
} private void adjustGraph()
{
TransformGroup tfGroup = new TransformGroup();
tfGroup.Children.Add(tempTranslate);
tfGroup.Children.Add(totalScale); foreach (UIElement ue in canvas1.Children)
{
ue.RenderTransform = tfGroup;
}
} }
}

变量说明:

     //移动标志
bool isMoving = false;
//鼠标按下去的位置
Point startMovePosition; TranslateTransform totalTranslate = new TranslateTransform();//多次操作中需要对总的移动量进行统计。
ScaleTransform totalScale = new ScaleTransform();//缩放变量
Double scaleLevel = 1;//缩放的级别 函数功能说明:
DrawingLine 在指定的Canvas控件中画线,用于测试。
鼠标按下时,记录起始移动的位置点,标记拖动操作开始 isMoving = true。
鼠标移动过程中,将有效的移动距离记录到总移动变量 totalTranslate 当中,并对位置进行刷新。
鼠标滚轮变化时,根据滚轮方向调整缩放级别。
不同缩放级别下,屏幕中移动相同的距离,对于Canvs内的图形来说距离不同,因此需要对鼠标移动的距离进行修正,即将移动距离除以缩放级别,这样可以得到相对精确的移动位置。 遗留问题:
1、连续在不同位置进行缩放时,仍会有较小的抖动,细节处理上还有瑕疵。
2、使用下面的语句,可以实现canvas1自动缩放(将canvas1的宽度与高度设为Auto)。
canvas1.HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch;
canvas1.VerticalAlignment = System.Windows.VerticalAlignment.Stretch; 学习太辛苦,采购点东西鼓励一下自己,微信扫描二维码,“香雪杂货店”欢迎您的到来,遇到喜欢的东西尽管带走~~

WPF 中Canvas图形移动、缩放代码的更多相关文章

  1. WPF中任意Object的XAML代码格式化输出

    原文:WPF中任意Object的XAML代码格式化输出 有时候,我们需要将WPF中的控件自身的XAML代码输出成文本,那么,我们可以使用System.Windows.Markup.XamlWriter ...

  2. WPF中,怎样将XAML代码加载为相应的对象?

    原文:WPF中,怎样将XAML代码加载为相应的对象? 在前面"在WPF中,如何得到任何Object对象的XAML代码?"一文中,我介绍了使用System.Windows.Marku ...

  3. 去除WPF中3D图形的锯齿

    原文:去除WPF中3D图形的锯齿 理论上讲PC在计算3D图形的时候是无法避免不出现锯齿的,因为3D图形都是又若干个三角形组成,如果3D图形想平滑就必须建立多个三角形,你可以想象一下正5边形和正100边 ...

  4. WPF中Canvas使用

    首先知道Canvas有Left.Right.Top和Bottom这四个属性,放入Canvas的元素通过这四个属性来决定它们在Canvas里面的位置. 比如: Xaml: <Canvas Hori ...

  5. WPF中图形表示语法详解(Path之Data属性语法)ZZ

    大可山 [MSN:a3news(AT)hotmail.com] http://www.zpxp.com 萝卜鼠在线图形图像处理 ------------------------------------ ...

  6. WPF中图形表示语法详解(Path之Data属性语法)

    原文 http://blog.csdn.net/johnsuna/article/details/1885597 老规矩,看图说话. 先看显示效果:(图1) XAML(代码A):<Page xm ...

  7. WPF中C#代码触发鼠标点击事件

    1.如下代码; <Button x:Name="btnTest" Click="btnTest_Click"> <Button.Trigger ...

  8. 在WPF中绘制多维数据集

    原文 https://stuff.seans.com/2008/08/13/drawing-a-cube-in-wpf/ 是时候使用WPF绘制一个简单的3D对象了.作为WPF中3D图形的快速介绍,让我 ...

  9. WPF中的数据绑定!!!

    引用自:https://msdn.microsoft.com/zh-cn/magazine/cc163299.aspx  数据点: WPF 中的数据绑定 数据点 WPF 中的数据绑定 John Pap ...

随机推荐

  1. ASP.NET Web API 框架研究 ASP.NET 路由

    ASP.NET Web API 如果采用Web Host方式来寄宿,在请求进入Web API 消息处理管道之前,就会用ASP.NET 自身的路由系统根据注册的路由表,解析出当前请求的HttpContr ...

  2. 加密算法比较3DES AES RSA ECC MD5 SHA1等

    加 密算法通常分为对称性加密算法和非对称性加密算法,对于对称性加密算法,信息接收双方都需事先知道密匙和加解密算法且其密匙是相同的,之后便是对数据进行 加解密了.非对称算法与之不同,发送双方A,B事先均 ...

  3. 连接Oracle时ORA-12541 TNS 无监听程序

    http://www.cnblogs.com/Qian123/archive/2016/08/24/5803085.html

  4. I - Dividing Stones

    Description There are N stones, which can be divided into some piles arbitrarily. Let the value of e ...

  5. 最全面的Git 使用规范装逼指南[转载]

    <!DOCTYPE html> <script type="text/javascript"> window.logs = { pagetime: {} } ...

  6. .NET Core 跨平台 串口通讯 ,Windows/Linux 串口通讯,flyfire.CustomSerialPort 的使用

    目录 1,前言 2,安装虚拟串口软件 3,新建项目,加入 flyfire.CustomSerialPort 4,flyfire.CustomSerialPort 说明 5,开始使用 flyfire.C ...

  7. python--partial偏函数

    new_func = partial(函数名,参数),  生成一个新的函数, 新的函数中参数是partial固定时的参数 例1: from functools import partial def f ...

  8. CentOS 7修改yum源为阿里源

    1.备份本地源 1 # mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo_bak 2.获取阿里yum源配置 ...

  9. 关于UUID

    UUID是通用唯一识别码的缩写,其目的,是让分布式系统中的所有元素,都能有唯一的辨识信息. UUID是指在一台机器上生成的数字,它保证对在同一时空中的所有机器都是唯一的. 在做后台管理的时候,经常会碰 ...

  10. 机器学习与Tensorflow(2)——神经网络及Tensorflow实现

    神经网络算法以及Tensorflow的实现 一.多层向前神经网络(Multilayer Feed-Forward Neural Network) 多层向前神经网络由三部分组成:输入层(input la ...