原文:使用HTML5 canvas做地图(3)图片加载平移放大缩小

终于开始可以写代码了,手都开始痒了。这里的代码仅仅是在chrome检测过,我可以肯定的是IE 以下浏览器是行不通,我一直在考虑,是不是使用IE禁止看我的篇博客,就是这群使用IE的人,给我加了很多工作量。 一个地图的基本动作,无非就是加载数据,平移,放大与缩小。这篇博客主要是通过一张图片的方式来模拟一下。 我这里认为大家都稍微了解甚至熟悉canvas的一些API,就不具体说,每一个参数代表什么意思 ...

2013-12-06 14:06 5 30763 推荐指数:

查看详情

使用HTML5canvas图片剪裁

前言 图片裁剪上传,不仅是一个很贴合用户体验的功能,还能够统一特定图片尺寸,优化网站排版,一箭双雕。 需求就是那么简单,在浏览器里裁剪图片并上传到服务器。 我第一个想到的方法就是,将图片和裁剪参数(x,y,scale,rotate)一并上传给服务器,服务器来图片处理,so easy ...

Fri Apr 07 01:20:00 CST 2017 0 1436
使用HTML5 canvas地图(1)基础知识

之前一直想使用HTML5技术全新做一套地图API,可是苦于时间和精力,迟迟未有行动。后来下定决心,利用下班和周末做出一个大体框架出来,现在和网友分享一下自己的整体的一个思路和想法。欢迎大家提出宝贵建议,希望把这套API做的更好,有人真正利用起来。DEMO访问地址, 猛击 ...

Sat Nov 16 17:49:00 CST 2013 9 10872
使用HTML5 canvas地图(2)瓦片以及如何计算的

上一篇也说到瓦片,我们为什么使用瓦片?这一篇主要是关于如何拼接地图? 下面的一张图,可以一眼明了,地图是如何切割以及拼接的。 瓦片信息 瓦片信息包括切图原点,瓦片大小,格式 ...

Tue Dec 03 05:50:00 CST 2013 5 8923
Wadda:基于 HTML5 Canvas图片放大

简介     Wadda 是下一代图片放大技术,使用 HTML5 Canvas 实现图片放大镜功能。借助 HTML5 Canvas 标签,能够自定义放大级别而不需要为每个级别定义图片,还能够设置羽化(Fading)效果。 使用方法 使用非常简单,只需在img标签的title ...

Tue May 15 05:02:00 CST 2012 4 10911
Canvas实现图片放大缩小移动操作

对于HTML5相信大家都不陌生,很早就出来了,但是貌似都没有真正的使用过。最近项目时要实现这样一个需求:一个图片,大小不固定,要求能实现类似地图一样放大缩小、移动功能。这里就很合适使用html5canvas画布。实现步骤如下:1. 定义一个canvas标签。 <canvas ...

Tue Jun 23 23:01:00 CST 2015 1 21113
wpf下实现图片放大缩小平移

WPF下实现图片放大缩小移动 在windows 7里面有自带的图片查看器,这个软件可以打开一张图片然后以鼠标在图片中的焦点为原点来进行缩放,并且放大后可以随意拖动。下面我们在WPF中实现这个功能。 在实现这个功能之前先说下使用的主要函数和步骤 ...

Mon Aug 13 21:09:00 CST 2012 0 18284
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM