WPF鼠标划线测距——模仿电子地图测距

原创 2013年12月05日 17:46:23

百度地图的测距工具,大家用过的应该知道。

选择进入测距模式,单击鼠标选择起始点。移动鼠标,出现随鼠标移动的直线,再单击,又可以选中一点,直至双击或右击结束测距。


核心:由于测距时,鼠标一直处于图片内部,且鼠标基本是移动的,所以IMAGE空间的mouseMove事件始终被触发。

而执行mouseMove的响应函数会阻塞其他事件的响应。

在这,我们就要借助IMAGE控件的父空间Grid,在父控件上定义mouseDown,这样,MouseMove的响应就不会被阻塞了。

这在图片处理上,给用户提供了更加友好的操作UI。

XAML代码

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="600" Width="700">
    <Grid x:Name="grid" MouseDown="grid_MouseDown" MouseRightButtonDown="grid_MouseRightButtonDown">
        <Image Name="imgBox" Height="500" Width="600" Source="E:\\gyy.jpg"
               MouseWheel="ImgBoxMouseWheel" RenderOptions.BitmapScalingMode="NearestNeighbor" 
               MouseRightButtonDown="imgBox_MouseRightButtonDown" HorizontalAlignment="Center"
               VerticalAlignment="Center" MouseMove="imgBox_MouseMove" 
               MouseLeftButtonDown="imgBox_MouseLeftButtonDown">
            <Image.RenderTransform>
                <ScaleTransform x:Name="ScaleTran" />
            </Image.RenderTransform>
        </Image>
        <Canvas Name="Imgcanvas" Height="500" Width="600">
            <Polyline Stroke="Red" StrokeThickness="1" Name="lines"></Polyline>
            <Path Stroke="Red">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure x:Name="pathImg">
                            <LineSegment x:Name="lineImg"/>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
    </Grid>
</Window>
鼠标移动事件响应代码段

        private void imgBox_MouseMove(object sender, MouseEventArgs e) {
            if (captureMode) {
                pathImg.StartPoint = lineStartPoint;
                lineImg.Point = e.GetPosition(Imgcanvas);
            }
        }

        private void grid_MouseDown(object sender, MouseButtonEventArgs e) {
            captureMode = false;
            Point point = new Point();
            point = e.GetPosition(Imgcanvas);
            lineStartPoint = point;
            pointsCollection.Add(point);
            lines.Points = pointsCollection;
            captureMode = true;
        }

运行结果 



相关文章推荐

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

google maps v3 电子地图测距

 google map api v3测距           
  • qq58758
  • qq58758
  • 2011年03月23日 10:41
  • 5586

【高德地图API】从零开始学高德JS API(二)地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装的一系列更加便于开发者使用,减少开发者工作量的二级API接口。除了官方通用的鱼骨、鹰眼控件,还有大量官方开发的地图插件,类似谷歌的l...

全能电子地图下载器——MapTileDownloader

以前一直用MapTileDownloader下载各种卫星图,经常遇到的问题就是: 当选择区域的面积大于一定值,在拼接过程中,往往会导致拼接过程很慢,甚至最终拼接失败! 查看拼接说明:通过地图拼接工具能...

【开源】电子围栏-测距离-测面积-拉框放大-实时路况-逆地理编码的实现

最近项目上涉及到地图,考虑到精度等问题,最终选择了51ditu。要实现电子围栏等等功能,经过几天努力,大致有了个雏形,由于是第一次接触HTML和JavaScript编程,三天下来脑袋大了不少,碰到了一...

Android 百度地图开发(定位,显示,测距)

之前将应用中涉及到百度地图的做的比较完善

openlayers2.13 地图绘点[点可以拖动,并且实时更新后台数据],测距同时更新数据到数据库

上图为最终效果,主要是实现以下几个功能 1地图上的坐标拖拽同时更新后台对应的经纬度。 2每个坐标的淡入弹出层支持对该坐标其它属性的修改。【手动修改校正】 3支持划线测距,将多个坐标之间的距离实时保存到...

【百度地图API】如何制作可拖拽的沿道路测距

摘要: 地图测距,大家都会,不就map.getDistance麼。可是,这只能测任意两点的直线距离,用途不够实际啊。比如,我想测试北京天安门到北京后海的距离,怎么办呢? 显然“沿道路测距”...

利用百度API(JavaScript 版)实现在地图上绘制任一多边形,并判断给定经纬度是否在多边形范围内。以及两点间的测距功能

权声明:本文为博主原创文章,未经博主允许不得转载。   利用百度API(JavaScript 版)实现在地图上绘制任一多边形,并判断给定经纬度是否在多边形范围内。以及两点间的测距功能。 [ja...
  • yzyssg1
  • yzyssg1
  • 2017年06月12日 17:53
  • 534

百度地图 测距

复制出以下代码至xxx.html文件 自测   全插件 http://api.map.baidu.com/api?v=1.3">> http://api.map.baidu.com/libr...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:WPF鼠标划线测距——模仿电子地图测距
举报原因:
原因补充:

(最多只允许输入30个字)