在WPF中Canvas 绘制图形的平移、缩放

问题描述

我在WPF中(C#)Canvas中画了N多条线段、圆、文字。现在我想用鼠标滚轮以鼠标指针为缩放点同时缩放Canvas中的所有图形,鼠标左键按下能同时平移所有图形。改怎么做,我写出来的缩放是以左上角为原点的,平移时会跳动。当Canvas大小改变时整个Canvas里的图形会等比例的放大缩小。1、缩放时Canvas大小不得改变,只是缩放图形2、能同时支持鼠标和平板触屏操作平移缩放。3、给源代码最好。谢谢各位老师

解决方案

解决方案二:
每一个图形控件,它只要修改一下缩放参数Scale就能自动化地缩放,这完全是你滚轮事件来决定的。因此控件自身的大小缩放本身并不用考虑鼠标位置问题。在你整体缩放地图的时候,可以捕获鼠标中心点。那么对于地图上任何一点(比如说你的任何图形控件的左上角的坐标),可以算出它与中心点在x、y坐标上的直线距离,然后缩放这个偏移距离。例如中心点在(100,100),那么一个点(98,99)距离中心点的偏移就是(-2,-1),如果缩放系数为2,就是要偏移(-4,-2),也就是挪动到(96,98)这个新位置上。
解决方案三:
关于“平移时会跳动”的问题,不知道你是怎样实现的。在平移时就是简单地修改一下控件的X、Y属性就行了,而且在你平移开始之前可以禁止WPF刷新界面,等平移完所有控件之后再允许刷新,应该没有任何跳动。
解决方案四:
privatevoidsf(objectsender,MouseWheelEventArgse)//图形缩放{Pointcen=e.GetPosition(hb);sfk.CenterX=cen.X;sfk.CenterY=cen.Y;if(sfk.ScaleX<0.3&&sfk.ScaleY<0.3&&e.Delta<0){return;}sfk.ScaleX+=(double)e.Delta/1000.0;sfk.ScaleY+=(double)e.Delta/1000.0;}privatevoidhb_MouseMove(objectsender,MouseEventArgse)//平移{if(e.LeftButton==MouseButtonState.Pressed){foreach(UIElementsinhb.Children){PointpCanvas=e.GetPosition(hb);Canvas.SetLeft(s,pCanvas.X-targetPoint.X);Canvas.SetTop(s,pCanvas.Y-targetPoint.Y);}}}
解决方案五:
引用2楼sp1234的回复:

关于“平移时会跳动”的问题,不知道你是怎样实现的。在平移时就是简单地修改一下控件的X、Y属性就行了,而且在你平移开始之前可以禁止WPF刷新界面,等平移完所有控件之后再允许刷新,应该没有任何跳动。

privatevoidsf(objectsender,MouseWheelEventArgse)//图形缩放{Pointcen=e.GetPosition(hb);sfk.CenterX=cen.X;sfk.CenterY=cen.Y;if(sfk.ScaleX<0.3&&sfk.ScaleY<0.3&&e.Delta<0){return;}sfk.ScaleX+=(double)e.Delta/1000.0;sfk.ScaleY+=(double)e.Delta/1000.0;}privatevoidhb_MouseMove(objectsender,MouseEventArgse)//平移{if(e.LeftButton==MouseButtonState.Pressed){foreach(UIElementsinhb.Children){PointpCanvas=e.GetPosition(hb);Canvas.SetLeft(s,pCanvas.X-targetPoint.X);Canvas.SetTop(s,pCanvas.Y-targetPoint.Y);}}}

时间: 2024-11-01 15:07:32

在WPF中Canvas 绘制图形的平移、缩放的相关文章

源代码-在WPF中Canvas 绘制图形的平移、缩放

问题描述 在WPF中Canvas 绘制图形的平移.缩放 我在WPF中(C#)Canvas中画了N多条线段.圆.文字.现在我想用鼠标滚轮以鼠标指针为缩放点同时缩放Canvas中的所有图形,鼠标左键按下能同时平移所有图形.该怎么做,我写出来的缩放是以左上角为原点的,平移时会跳动. 当Canvas大小改变时整个Canvas里的图形会等比例的放大缩小. 1.缩放时Canvas大小不得改变,只是缩放图形 2.能同时支持鼠标和平板触屏操作平移缩放. 3.给源代码最好.** 谢谢各位老师 解决方案 1:了解W

WPF/Silverlight中图形的平移,缩放,旋转,倾斜变换演示

原文:WPF/Silverlight中图形的平移,缩放,旋转,倾斜变换演示 为方便描述, 这里仅以正方形来做演示, 其他图形从略. 运行时效果图: XAML代码:// Transform.XAML <Canvas Width="700" Height="700" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http://sc

JavaScript实现使用Canvas绘制图形的基本教程_javascript技巧

由于这两年HTML5火的正热,所以研究了一下,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把. 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是几个实例,记下以备后用. 1.使用Canvas绘制直线: <!doctype html> <html> <head> <meta charset="UTF-8"> </head> <style ty

jQuery插件Flot学习Canvas绘制图形的原理

Flot采用Canvas绘制图形(Web总共就有三种常见方式来绘制图形,不了解的同学请看这篇文章),在数据量非常大的时候,你需要考虑浏览器端的性能问题.顺便提一句,D3是采用SVG来绘制图形的,从我自己的体会来说,对于拖动图来说,SVG会比较流畅. 首先介绍一下数据的格式.数据来自一个数组嵌套的JSON格式,如:  代码如下 复制代码 [[0, 3], [4, 8], [8, 5], [9, 13]] 这就给定了一个二维图上供绘制连线的几个点. 数据可以直接通过API传给Flot,让它自行决定数

解决html5中canvas绘制圆环进度条出现模糊效果方案

问题 近期用canvas绘制了圆环进度条,但是进度条出现周围模糊的现象,针对这种现象,网上搜了搜,有人提问,但是貌似没有很好的解决方案,针对这种情况,提出几种解决方案,仅供参考! 模糊效果如下: 解决方案 针对这种情况,我提出几种解决思路. 一.运用hidpi-canvas-polyfill 的js进行解决 HiDPI Canvas Polyfill 是针对设备提出的canvas高清解决方案,首先引入hidpi-canvas.js. 这个js会自动识别你的canvas,会把你的canvas变小,

HTML5中Canvas绘制曲线:圆、圆弧、贝塞尔曲线使用样例

绘制曲线有如下四个方法:arc().artTo().bezierCurveTo()和quadraticCurveTo(). 第一个比较简单,就是绘制一段圆弧.后面三个方法复杂一些,都需要定义控制点. 1,arc()绘制圆弧 圆弧就是圆上的一部分.要绘制圆弧必须确定:圆形的坐标.圆的半径.圆弧的起点角度和终点角度. 其中起点角度和终点角度都要用弧度表示,即常量pi的倍数(1pi是半圆,2pi是整个圆形). (1)下面使用arc()方法绘制一段圆弧: var canvas = document.ge

Android编程之canvas绘制各种图形(点,直线,弧,圆,椭圆,文字,矩形,多边形,曲线,圆角矩形)_Android

本文实例讲述了Android编程之canvas绘制各种图形的方法.分享给大家供大家参考,具体如下: 1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into

HTML5中如何绘制SVG内容到Canvas

SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术,两种绘制图形方式各有优缺点,但两者并非水火不容,尤其是SVG内容可直接绘制在Canvas上的功能,使得两者可以完美的融合在一起,让Canvas可享用到现有丰富的SVG素材,并不失SVG矢量无级缩放的特点. 普通图片的格式数据为data:image/png类型,而SVG格式的数据类型为data:image/svg+xml的类型,下图为该HT for Web拓扑图拖拽入SVG格式图片的运行效果: 以下一段小例子,展示了加载一个S

html5使用canvas绘制时钟示例

准备工作 在HTML中指定一个区域放置时钟: <div id="clock" style="position: relative;"></div> 时钟的一些外观设定: var width = 260; // 桌布宽度 var height= 260; // 桌布高度 var dot = {     x : width / 2,     y : height / 2,     radius : 6 }; // 圆点位置.半径 var radi