Canvas也能实现Map的能拖能缩放的效果
来源:互联网 发布:linux解压jar 编辑:程序博客网 时间:2024/05/18 00:54
1. Canvas简介:Canvas是HTML5中新增的一个重要的HTML标签,它为了客户端矢量图形而设计的,顾名思义Canvas就是一个画布,你可以在上面画出你想要的任何图形,如果你想设计一个特色的图标,你可以用Canvas,如果你想在客户端绘制一个矢量图你可以选择Canvas。
http://www.w3school.com.cn/html5/html5_canvas.asp
2. Canvas的例子:
http://javascript.ruanyifeng.com/htmlapi/canvas.html
3. Canvas的特殊效果:
今天我要重点介绍的是Canvas可以实现类似于百度地图和googleMap的效果,可以平移,可以缩放,下面的这幅图就可以实现:
说说主要思路和主要的代码:
3.1 平移:
画图就不多介绍了,用canvas可以画出任何你想要的图,平移就是需要移动页面上的元素,那么canvas是个画板,画板不能移动,那如何平移呢?首先需要将我们要画到画板上的元素存储在内存中,鼠标移动的时候,如果移动10个像素,那么我们就把内存中存储的元素全部移动五个像素,操作canvas面板的前提是对面板的任何操作,任何变化都需要重画,重画的效率是很快的,这个我做过测试,不要把canvas设置太大,只要再屏幕能显示大小就可以了。
$(canvas).bind('mousemove', function (){var scale = canvasConstructor.scale;var x = event.clientX;var y = event.clientY;if (canDrag){var len = canvasDatasets.figures.length;for (var i = 0; i < len; i++){canvasDatasets.figures[i].setPosition(x - lastPosition.x, y - lastPosition.y);}_drawBoard.reDraw();lastPosition.x = x;lastPosition.y = y;return;}}
3.2 缩放:
缩放的道理也是一样,就是需要重画图形
$(canvas).mousewheel(function (event, intDelta){ if (enableMousewheel) { if (isWheeling) { isWheeling = false; var edgeZoomScale = 0; var enable = false; if (intDelta > 0) { if (_defaultZoomScale == _defaultMaxScale) { isWheeling = true; return; } else { edgeZoomScale = _defaultZoomScale + _defaultZoomIncrement; if (edgeZoomScale > _defaultMaxScale) { edgeZoomScale = _defaultMaxScale; } enable = true; } } else if (intDelta <= 0) { if (_defaultZoomScale == _defaultMinScale) { isWheeling = true; return; } else { edgeZoomScale = _defaultZoomScale - _defaultZoomIncrement; if (edgeZoomScale < _defaultMinScale) { edgeZoomScale = _defaultMinScale; } enable = true; } } if (enable) { var point = new Point(event.clientX, event.clientY); var ratio = edgeZoomScale / _defaultZoomScale; _defaultZoomScale = edgeZoomScale; _drawBoard.zoomRefresh(ratio, point); parent.setZoomText(_defaultZoomScale); } isWheeling = true; } }});
前段需要添加鼠标的滚轮事件需要引用一个js
<script src="Scirpts/jquery.mousewheel.js" type="text/javascript"></script>
可以去网上下载,引用这个js后,就可以用上面的方式绑定鼠标滚轮的缩放事件了,上图中放大和缩小的按钮也可以实现同样缩放的功能。
intDelta是判断前滚还是后滚动的,具体的逻辑就是将页面上所有图形的左边都同时缩放一定的倍数,倍数可以我们自己控制了,就是ratio,主要的方法就是zoomRefresh,这个方法里面也会调用reDraw。
主要的逻辑和算法我已经讲了,如果还有什么不明白的可以联系我或者给我留言。
- Canvas也能实现Map的能拖能缩放的效果
- JS canvas绘制能拖动和缩放的球
- IOS的专利?Android也能流畅实现毛玻璃效果效果
- canvas实现刮刮乐的效果
- 不用获得焦点也能实现跑马灯效果的textView
- 不用获得焦点也能实现跑马灯效果的textView
- 一个不需要摄像装备在家也能实现的全景演示效果
- canvas简单的粒子效果的实现
- jQuery实现图片展开缩放的效果
- PHP 也能达到JAVA的重载效果
- 巧用抠图融合,也能打造二次曝光的效果哦!
- HTML5 Canvas 实现的Loading效果
- 在WPF中的Canvas上实现控件的拖动、缩放
- canvas实现滚动条缩放图片的demo
- C# 中实现类似于WORD EXCEL 的动态缩放效果(客户后来说程序使用能产生乐趣)
- UILabel的缩放效果
- Canvas实现绚丽的倒计时效果(动画效果)
- Canvas---Canvas图像处理、图片查看器、图像缩放功能的实现。
- Ping转场动画的实现之二:转场动画
- Poj 2002 Squares
- 获取目录的的所有文件,并给出列表
- 图片文件上传工具类
- 黑马程序员——多线程第三天
- Canvas也能实现Map的能拖能缩放的效果
- 几种常见的内嵌数据库
- 【mfc】标签页
- Poj 2084 Game of Connections(高精度卡特兰数)
- JQuery Mobile 学习笔记2-4:changePage()方法跳转页面
- 使用服务(内置)动态填充dropdownlist
- 【HDU2639】Bone Collector II
- IP3 比1DB压缩点 大10DB
- 按时间给表建立range分区