我才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仅仅是绘制了一个圆弧和一个方框，我完全可以直接重绘，性能并不差，而且省去了诸多麻烦，最终还是选择了重绘。

Opera的widgets我用的最多的就是ruler那个东东了，但是总是感觉它有一些不方便，一来不能最小化，只能关闭或者随便拉到一个角落里去，二来不支持我自定义颜色、透明度，它本身的配色并不怎么好看，所以就想自己搞一个。其实上个月就在写了，不过写了一半就不写了。昨天搞了一下，完成了这个widget，并发布了，分享给大家，希望大家能够喜欢哈！~

Gorgeous Ruler 安装：http://widgets.opera.com/widget/download/14151/

请用Opera浏览器打开直接安装，使用Opera 10.10 Build1840 以下版本的会直接安装到饰件（Widgets）中，1840版本的会提示进行安装。

目前版本支持以下几方面：

1. 支持背景颜色更换，支持透明度修改；
2. 记忆设置，关闭重打开时会使用上次配置的背景色以及透明度；
3. 透明度设置为0时会强制转化为1；
4. 可以通过键盘的方向键移动，前提是尺子必须在选中状态；
5. 可以最小化，可以将最小化的尺子移到任何位置暂放；
6. 水平、垂直可以随意切换；
7. 目前尺子宽度、高度与电脑屏幕分辨率保持一致。

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

2009.10.20 v1.1版本更新：修改icon.png名字为operate_icon.png，因为在Opera 10.10Build1840版本内生成独立widget时会生成一个名为icon.png的icon，将原来的图片覆盖，造成其它icon无法正常显示。

首先，我们先看一下例子：

HTML 代码：

<pre>
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
        oldonload();
        func();
        }
    }
}


function tagCloud() {
    if(document.getElementById("tags_cloud")) {
        var tags = document.getElementById("tags_cloud");
        var tagLinks = tags.getElementsByTagName("a");
        var styles = new Array();
        styles[0] = new Array("#FF0000","FFCC00","FF9900","#0099FF","#999999"); //设定字体的颜色随机的种类
        styles[1] = new Array("12px","14px","16px"); //设定字体的大小随机的种类
        styles[2] = new Array("400","500","600","700"); //设定字体的粗细随机的种类
        for(var i=0; i<tagLinks.length; i++) {
            tagLinks[i].style.color = styles[0][Math.floor(styles[0].lengthMath.random())]; //设定字体的颜色
            tagLinks[i].style.fontSize = styles[1][Math.floor(styles[1].lengthMath.random())]; //设定字体的大小
            tagLinks[i].style.fontWeight = styles[2][Math.floor(styles[2].length*Math.random())]; //设定字体的粗细
        }
    }
}

addLoadEvent(tagCloud);</pre>

CSS 代码：

pre { border:1px solid #0066FF; background:#F0F0F0; overflow:auto; padding:5px; width:400px; height:400px;}

这里，pre 的宽度和高度固定，所有浏览器的宽度和高度表现是统一的，滚动条内含在宽度和高度里边，带上滚动条和边框，我们所看到的宽度和高度都是 412px。可以在这里看到这一个版本的表现。

继续阅读 »