关于bing地图的切块规则，和google是一样的
主旨："Bing Maps Tile System"
- Bing Maps Tile System （查看 Google 边栏评注）
2010年7月7日星期三
flash平台性能优化
优化 Flash 平台的性能 最大程度减小 CPU 使用量 优化的另一个重要部分是 CPU 使用量。优化 CPU 处理可提高性能，从而延长移动设备上的电池寿命。 * 针对 CPU 使用量的 Flash Player 10.1 增强功能 * 实例管理 * 冻结和解冻对象 * 鼠标交互 * 计时器与 ENTER_FRAME 事件 * 补间症状 本产品经 Creative Commons Attri
主旨： Adobe Flash Platform * 最大程度减小 CPU 使用量 （查看 Google 边栏评注）2009年5月8日星期五
2009年4月23日星期四
各浏览器下的绘图
浏览器支持的绘图:
ie(貌似6+): vml(性能比svg和canvas差)
ff(貌似1.5+): (svg canvas) ff下canvas绘制的图像只能以矩形方式响应事件(貌似是这样)
safari(貌似3+): svg canvas(canvas以绘制的不规则区域响应事件,webkit内核)
chrome(貌似1+): svg canvas(canvas以绘制的不规则区域响应事件,webkit内核)
opera(貌似9+): svg canvas
各地图厂商使用的绘图技术:
google ie(vml) ff和opera(svg) safari和chrome(canvas)
mapbar ie(vml) 其余浏览器(canvas) mapbar解决了svg两个bug,非常不错!!!
mapabc flash
51ditu ie(vml) 其余浏览器(用一像素div拼,这样的问题很明显...性能不好,且没有虚线)
性能排序(canvas(调用浏览器底层的c++绘图api) svg vml,本人瞎猜,请勿相信)
注意:
svg (ff是以边的中心为起点,safari和chrome以边为起点,webkit内核有难缠的bug)
另注意:在svg下,事件响应在path时,offsetParent为空.
注意bug:
bug1:解决方法,viewBox起始不要为负数
bug重现,在safari和chrome下面,使用opacity会导致边框被切(当viewBox有负数,如svgns.setAttributeNS(null,"viewBox","-5 -5 200 200")),被切的距离就是那个负数值(好像也不完全是)
被切示例如下:
bug2:解决方法,(mapbar的解决方法,目前没看懂)
bug重现,移动svg,左上和右上各有一部分不跟着绘制,并且有残影效果
bug解决(大力感谢mapbar,简直比Google还强!!!),
ie(貌似6+): vml(性能比svg和canvas差)
ff(貌似1.5+): (svg canvas) ff下canvas绘制的图像只能以矩形方式响应事件(貌似是这样)
safari(貌似3+): svg canvas(canvas以绘制的不规则区域响应事件,webkit内核)
chrome(貌似1+): svg canvas(canvas以绘制的不规则区域响应事件,webkit内核)
opera(貌似9+): svg canvas
各地图厂商使用的绘图技术:
google ie(vml) ff和opera(svg) safari和chrome(canvas)
mapbar ie(vml) 其余浏览器(canvas) mapbar解决了svg两个bug,非常不错!!!
mapabc flash
51ditu ie(vml) 其余浏览器(用一像素div拼,这样的问题很明显...性能不好,且没有虚线)
性能排序(canvas(调用浏览器底层的c++绘图api) svg vml,本人瞎猜,请勿相信)
注意:
svg (ff是以边的中心为起点,safari和chrome以边为起点,webkit内核有难缠的bug)
另注意:在svg下,事件响应在path时,offsetParent为空.
注意bug:
bug1:解决方法,viewBox起始不要为负数
bug重现,在safari和chrome下面,使用opacity会导致边框被切(当viewBox有负数,如svgns.setAttributeNS(null,"viewBox","-5 -5 200 200")),被切的距离就是那个负数值(好像也不完全是)
被切示例如下:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
style="top:60px;left:60px; overflow: visible; position: absolute;" width="6px" height="93px" viewBox="-3 -3 6 93">
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="#0000FF" stroke-width="3px" stroke-dasharray="" d="M 0 0 L 0 87"/>
</svg>
bug2:解决方法,(mapbar的解决方法,目前没看懂)
bug重现,移动svg,左上和右上各有一部分不跟着绘制,并且有残影效果
bug解决(大力感谢mapbar,简直比Google还强!!!),
<marker id="svgArrow" viewBox="0 0 10 10" refX="6" refY="5" markerUnits="strokeWidth" orient="aotu">
<path d="M 0 0 L 10 5 L 0 10 L 4 5 z" fill="#FF0000" fill-opacity="0.6">
</marker>
var spath= document.createElementNS(svgNamespace, "marker");
svgns.appendChild(spath);
var mpath=document.createElementNS(svgNamespace, 'path');
var dp="M 0 0 L 1 1";
mpath.setAttributeNS(null,"d",dp);
spath.appendChild(mpath);
2009年4月18日星期六
fixed定位下offsetParent问题
代码如下(dtd省去),一个网友提供的,
position为fixed时;各浏览器返回的offsetParent不相同,
ie7返回null
ie6返回div
ff返回body
safari返回div
chrome返回div
opera返回div
position为fixed时;各浏览器返回的offsetParent不相同,
ie7返回null
ie6返回div
ff返回body
safari返回div
chrome返回div
opera返回div
<style type="text/css">
#target{position: fixed;}
</style>
<script type="text/javascript">
window.onload=function(){
vartarget=document.getElementById('target');
alert(vartarget.offsetParent.tagName);
};
</script>
</head>
<body>
<div id="outer" class="test">
<div id="inner" style="position:absolute;">
<div id="target" class="test">Target<br/>rainman</div>
</div>
</div>
</body>
</html>
2009年4月16日星期四
2009年4月15日星期三
flash9下保存文本文件的方法(只支持IE)
flash10可以保存文件,会弹出一个文件保存对话框,不过flash9就不行了,可以借助于一个IE的函数实现:execCommand("saveAs",true,"a.txt"),只能保存以下几种格式:1,html 2,xml 3,txt
代码如下:
flash.net.navigateToURL(new URLRequest('javascript: var b=window.open(); '
+' b.document.open();'
+' b.document.write("dwdwadwadwadawde"); '
+' b.document.close(); '
+' b.document.execCommand("saveAs",true,"a.txt");void(0)'),"_self");
代码如下:
flash.net.navigateToURL(new URLRequest('javascript: var b=window.open(); '
+' b.document.open();'
+' b.document.write("dwdwadwadwadawde"); '
+' b.document.close(); '
+' b.document.execCommand("saveAs",true,"a.txt");void(0)'),"_self");
2009年4月6日星期一
通过file选择框预览本地图片
有时候有这么一个需求,要求用户在input file中选择完文件以后可以预览选中的图片,在ie6中是没问题的,ff3和Google浏览器已经不能这样做了,因为取不到本地的图片路径,value值只是图片文件名,ff2中一个函数可以取到文件路径,不过ff2的用户已经很少了...
ie7中无法访问本地路径的图片,除非是本地的网页或者服务器和本机位于同一台机器上,解决方案是用AlphaImageLoader来加载图片.ff可以浏览本机图片,用file:///开头
随着浏览器安全限制的提高,用户通过file选择框然后预览本机图片变得不可能了,ie8已经不能取得文件的完整路径了...
以后遇到这种事程序员可以省心了...现在流行的方法是用flash选择然后预览,flash10可以实现这样的功能,flash10可以得到文件的byte数组,预览时还可以顺便对图片处理一下,感觉比较好
ie7中无法访问本地路径的图片,除非是本地的网页或者服务器和本机位于同一台机器上,解决方案是用AlphaImageLoader来加载图片.ff可以浏览本机图片,用file:///开头
随着浏览器安全限制的提高,用户通过file选择框然后预览本机图片变得不可能了,ie8已经不能取得文件的完整路径了...
以后遇到这种事程序员可以省心了...现在流行的方法是用flash选择然后预览,flash10可以实现这样的功能,flash10可以得到文件的byte数组,预览时还可以顺便对图片处理一下,感觉比较好
2009年3月25日星期三
2009年3月14日星期六
跨浏览器的 复制到剪贴板 实现
复制到剪贴板IE下最好做,window.clipboardData.setData就ok
ff下面就麻烦了,要修改ff配置信息,在ff里敲入about:config然后改配置(signed.applets.codebase_principal_support设置为true)才能实现...
于是,有人发明了flash大法,借助于flash中的System.setClipboard实现保存到剪贴板操作
这个方法在flash player9以前是有效的,最新的fp10是无效的,fp10安全策略规定必须是用户交互的才可以,不能通过js去掉用flash函数来实现...(就像以前js可以依靠flash多文件上传,随着fp10安全策略的提高现在都不可以了...)
不过有人发明了一个很妙的方法,偷偷的搞了一个flash盖在dom上面,实际响应事件的是flash,这样是完全符合fp10的安全策略的...
js库叫Zero Clipboard 具体见如下地址:
http://www.phpchina.com/bbs/viewthread.php?tid=106195
ff下面就麻烦了,要修改ff配置信息,在ff里敲入about:config然后改配置(signed.applets.codebase_principal_support设置为true)才能实现...
于是,有人发明了flash大法,借助于flash中的System.setClipboard实现保存到剪贴板操作
这个方法在flash player9以前是有效的,最新的fp10是无效的,fp10安全策略规定必须是用户交互的才可以,不能通过js去掉用flash函数来实现...(就像以前js可以依靠flash多文件上传,随着fp10安全策略的提高现在都不可以了...)
不过有人发明了一个很妙的方法,偷偷的搞了一个flash盖在dom上面,实际响应事件的是flash,这样是完全符合fp10的安全策略的...
js库叫Zero Clipboard 具体见如下地址:
http://www.phpchina.com/bbs/viewthread.php?tid=106195
2009年3月7日星期六
png图片透明部分不响应事件
加载一张PNG图片,放到一个Sprite,实现这个PNG图片透明,或者是半透明的地方不可点
flash中,可以拿一个老外写的类来解决这个问题,interactivePNG
下载地址如下:http://www.6dn.cn/blog/article.asp?id=77
猜测是取到像素以后拿alpha值来判断的...
再说说html里如何实现,如果我没有记错的话,html暂时实现不了(ie滤镜可以,但是用滤镜会有副作用),也许canvas可以实现,没有研究过(ie到现在为止还没有实现canvas).
ie下将png设置为滤镜可以让透明部分(alpha值等于0)的地方不响应事件,ff下面背景设为png,响应鼠标点击范围的依然是矩形.
flash中,可以拿一个老外写的类来解决这个问题,interactivePNG
下载地址如下:http://www.6dn.cn/blog/article.asp?id=77
猜测是取到像素以后拿alpha值来判断的...
再说说html里如何实现,如果我没有记错的话,html暂时实现不了(ie滤镜可以,但是用滤镜会有副作用),也许canvas可以实现,没有研究过(ie到现在为止还没有实现canvas).
ie下将png设置为滤镜可以让透明部分(alpha值等于0)的地方不响应事件,ff下面背景设为png,响应鼠标点击范围的依然是矩形.
2009年3月2日星期一
javascript内存泄漏工具
非常不错的几个内存泄漏检测工具...目前在使用Javascript Leaks Detector,感觉不错
使用方法和下载地址如下:
http://zivn.org/zivn/archives/tag/memory-leaks
使用方法和下载地址如下:
http://zivn.org/zivn/archives/tag/memory-leaks
2009年2月26日星期四
wmode transparent ie7 bug
swf文件 8或者9(其余版本没测试),设置属性wmode transparent
ie7下用微软输入法,在任何文本输入窗口输入汉字时,汉字显示条会显示在页面顶部或者左侧,然后将页面挤开一点空隙...
非常不美观而且难看...
ie7下用微软输入法,在任何文本输入窗口输入汉字时,汉字显示条会显示在页面顶部或者左侧,然后将页面挤开一点空隙...
非常不美观而且难看...
javascript 2d物理引擎
2d物理引擎box 2d 出了js版本,通过canvas实现的,所以需要浏览器支持canvas,
演示地址如下:
http://box2d-js.sourceforge.net/index2.html
貌似ie比firefox卡很多
js引擎的性能和avm2性能还是没法比,看过几个flash 2d物理引擎,性能要强js很多...
演示地址如下:
http://box2d-js.sourceforge.net/index2.html
貌似ie比firefox卡很多
js引擎的性能和avm2性能还是没法比,看过几个flash 2d物理引擎,性能要强js很多...
min-height实现
ie6下height类似于ie7和ff的min-height
兼容ie7,6,ff的min-height如下所示:
min-height:100px; /*ie7和ff*/
height:auto !important; /*ie7和ff中覆盖height*/
height:100px; /*ie6*/
兼容ie7,6,ff的min-height如下所示:
min-height:100px; /*ie7和ff*/
height:auto !important; /*ie7和ff中覆盖height*/
height:100px; /*ie6*/
2009年2月19日星期四
BMPDecode 下载地址
as3加载bmp用的...
两个下载地址:
http://25swf.blogbus.com/files/12004035100.as
http://www.libspark.org/browser/as3/BMPDecoder/src/com/voidelement/images/BMPDecoder.as
两个下载地址:
http://25swf.blogbus.com/files/12004035100.as
http://www.libspark.org/browser/as3/BMPDecoder/src/com/voidelement/images/BMPDecoder.as
2009年2月18日星期三
页面charset失效问题
今天一个同事说在他的IE6下,访问uu.51ditu.com出现乱码
因为浏览器默认使用utf-8来解析,所以显示的时候就over了,其实页面编码是gb2312的
俺研究了一下,发现这个网页文件不是以gb2312保存的,在Google上搜到一篇文章说:
浏览器读取了页面的html代码后开始进行解析。解析前浏览器要先知道页面的编码方式，然后根据编码方式进行解码，然后才能开始解析。IE 解析网页编码时是 HTML 內的标识优先的，然后是 HTTP header ；而mozilla 系列的浏览器刚刚好相反。一般情况在，很多人是把title排在最前面，并且在title中就出现了UTF-8中文，这样， IE在解析时，就先遇到 UTF-8，不往下解析了。
原文给出了解决方案,地址如下:http://www.phpchina.com/html/86/62786-30725.html
因为浏览器默认使用utf-8来解析,所以显示的时候就over了,其实页面编码是gb2312的
俺研究了一下,发现这个网页文件不是以gb2312保存的,在Google上搜到一篇文章说:
浏览器读取了页面的html代码后开始进行解析。解析前浏览器要先知道页面的编码方式，然后根据编码方式进行解码，然后才能开始解析。IE 解析网页编码时是 HTML 內的标识优先的，然后是 HTTP header ；而mozilla 系列的浏览器刚刚好相反。一般情况在，很多人是把title排在最前面，并且在title中就出现了UTF-8中文，这样， IE在解析时，就先遇到 UTF-8，不往下解析了。
原文给出了解决方案,地址如下:http://www.phpchina.com/html/86/62786-30725.html
inline元素中包含block小例
inline元素,如span,
包含block元素div时,span依然为inline元素
如果包含table时,span元素会变成block元素
另补充:
一般元素,设置align只会影响自己容器内的元素,
table和iframe这两个元素例外,如果设置为align时,会导致自身布局从block变为floating布局
...还没验证过...有意见拍砖...
包含block元素div时,span依然为inline元素
如果包含table时,span元素会变成block元素
另补充:
一般元素,设置align只会影响自己容器内的元素,
table和iframe这两个元素例外,如果设置为align时,会导致自身布局从block变为floating布局
...还没验证过...有意见拍砖...
2009年2月16日星期一
document.URL和window.location的区别
网上已经有很多这两者区别的文章了,俺今天发现另一个有区别的地方,详细如下:
如果是一个本地文件,比如F:/a.htm
还有一个F:/b.htm
b.htm中嵌入一个iframe,src为a.htm?test
ie6中:
a.htm中的document.URL为本地路径(问号后面的被舍弃了)
window.location为全部路径...
ff3中:
window.location和document.URL一样...
如果是一个本地文件,比如F:/a.htm
还有一个F:/b.htm
b.htm中嵌入一个iframe,src为a.htm?test
ie6中:
a.htm中的document.URL为本地路径(问号后面的被舍弃了)
window.location为全部路径...
ff3中:
window.location和document.URL一样...
订阅：
博文 (Atom)