Opera Widget:Gorgeous Ruler 2.0

南芝 — Tue, 10 Nov 2009 12:25:14 +0000

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

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

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

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

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

小结：

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

将颜色值转换到RGB值

南芝 — Mon, 02 Nov 2009 13:06:09 +0000

在做一个小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不需要这么做，好散。

南芝 - 我才12岁（飞鸟尽，良弓藏，2011，背包去旅行！） » canvas

Opera Widget:Gorgeous Ruler 2.0

将颜色值转换到RGB值