南芝 – 我才12岁（孤独、快乐的生活在自己的世界里）

Ruler版本升级至2.0版本，主要改进的就是背景的问题。在1.0版本里使用的一个透明的背景图片，再加上用户输入的一个背景色来控制背景的显示，这个局限性比较大，为了让用户可以更好的自定义皮肤，所以这里做了重点改进，其实功能上没什么问题，主要就是使用上的改进。

2.0改进的一些地方及功能：

1. 背景使用canvas绘制，支持用户自定义渐变，包括开始颜色、透明度、结束颜色、透明度以及渐变的长度；
2. 左侧/上侧使用圆角展示；
3. 改变方向时，以操作的几个icon为圆心，仅尺子动，而操作按钮不跟随跳动；
4. 最大最小化使用动画；
5. 最小化后，不在初始化尺子位置，亦不再更换图片，仅将最小化icon和最大化icon做替换；
6. 当鼠标移至边缘时，刻度始终显示在尺子内，避免显示在外侧被遮挡；
7. JS、CSS文件做了优化；
8. 更换了icon图标；

下载安装：http://widgets.opera.com/widget/14151/2.0/

源码下载：http://code.google.com/p/gorgeous-ruler/downloads/list

小结：

在用canvas去绘制背景的时候，纠结了一点，就是在尺子进行旋转的时候，采用什么方式？最初想着是是使用drawImage的rotate进行旋转，不过后来发现这个东东存在一些缺陷，而且感觉其实效率并不是很高，而本身这个canvas仅仅是绘制了一个圆弧和一个方框，我完全可以直接重绘，性能并不差，而且省去了诸多麻烦，最终还是选择了重绘。

在做一个小widget时，用canvas去创建一个渐变，我又想设置其透明度，那么我就需要获取到颜色的rgba值，但是没办法去控制每一个用户正确的输入rgb值，那太困难了，相信没几个人能准确的记得住rgb值，所以，只能我这边做下转换了，本来只是Opera用，扩展了下，让目前的各个浏览器都能正常使用，当然不是统一的方法，而是根据各自的优势去处理的。Firefox、Safari、Chrome浏览器表现的最优秀，直接就给我了我想要的，Opera只能给我十六进制值，而IE更差劲，要啥没啥，杯具啊！

JS Code：

/**
 * translate color value to rgb
 * @method toRGB
 * @param {String} color value
 */
function toRGB(color) {
	//如果输入的为rgb值直接返回
	if(color.indexOf(',') != -1) {
		return color;
	}
	if(!window.getComputedStyle) {
		//ie
		if(color.indexOf('#') != -1) {
			//十六进制
			var ncolor = color.length == 4 ? ('#' + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2) + color.charAt(3) + color.charAt(3)) : color;
		} else {
			//英文名称
			var enames = {'aqua':'rgb(0, 255, 255)','black':'rgb(0, 0, 0)','blue':'rgb(0, 0, 255)','fuchsia':'rgb(255, 0, 255)','gray':'rgb(128, 128, 128)','green':'rgb(0, 128, 0)','lime':'rgb(0, 255, 0)','maroon':'rgb(128, 0, 0)','navy':'rgb(0, 0, 128)','olive':'rgb(128, 128, 0)','orange':'rgb(255, 165, 0)','purple':'rgb(128, 0, 128)','red':'rgb(255, 0, 0)','silver':'rgb(192, 192, 192)','teal':'rgb(0, 128, 128)','white':'rgb(255, 255, 255)','yellow':'rgb(255, 255, 0)'};
			return enames[color];
		}
	} else {
		//创建临时节点
		var span = document.createElement('span');
		span.style.color = color;
		document.body.appendChild(span);
		var ncolor = window.getComputedStyle(span,null).getPropertyValue('color');
		document.body.removeChild(span);
		if(!window.opera) {
			//Firefox,Safari,Chrome
			return ncolor;
		}
	}
	//ie || Opera
	var to2 = parseInt(('0x' + ncolor.slice(1)),16);
	var r = to2 >> 16,
		g = parseInt('0000000000000000' + (to2 >> 8).toString(2).slice(-8),2),
                      //g = (to2 & 0x00ff00) >> 8,
		b = parseInt('0000000000000000' + to2.toString(2).slice(-8),2);
                      //b = to2 & 0x0000ff;
	return 'rgb(' + r + ',' + g + ',' + b + ')';
}

Demo：http://www.12sui.cn/test/rgb-0911.html

注：有一点比较散的是，Safari、Chrome、Opera、IE创建临时节点后，必须插入到文档里才能获取到style值，只有Firefox不需要这么做，好散。