在draw2d中使用Canvas 的setZoom function来扩大，缩小画布进而放大，缩小画布上的图形大小。(Zoom in/Zoom Out功能)。
图形类型Circle, Rectangle的放大，缩小都还正常，
但是 在Chrome浏览器下Label 的缩小功能却存在着label 的文本缩小时反而会变大的状况。
具体的测试方式如下：
1. 没有给label 特别设定font size。 看上去字体默认大小是10px.
2. Zoom out(缩小)画布时， 文本的字体看上去反而变大了,其他图形都是正常的。
（ 放大：canvas.setZoom(0.95, false);
缩小：canvas.setZoom(1.05, false);）
3. 试试其他浏览器， 在 Firefox是正常的。
<a style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" xlink:title="8g High-sensitivity R-Touch support" id="ui-id-5"> <text style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-style: normal; font-variant: normal; font-weight: normal; font-size: 10px; line-height: normal; font-family: Arial; " x="0" y="7" text-anchor="start" font="10px "Arial"" stroke="none" fill="#ffffff" title="8g High-sensitivity R-Touch support" transform="matrix(1,0,0,1,5007,4846.5)" stroke-width="1"> <tspan style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" dy="3.5">Label Text</tspan> </text> </a>产生的就是a 标签下包含一个text 标签， text 标签下包含一个tspan标签。
试图修改text 的font 相关设置看看是否有效， 发现不行。貌似控制字体大小的是matrix(1,0,0,1,5007,4846.5) 这样一句，而不是font 的设置。
以上思路失效。
==》既然draw2d使用的是raphael ，那么raphael 本身是否有问题呢？
raphael的Text 对应到的就是draw2d 的 label, 建一个例子测试一下：
<!-- Create By oscar999 -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src=/blog_article/"raphael.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<input type="button" value="Change Viewbox Big" onclick="setTestViewBox('big')">
<input type="button" value="Change Viewbox Small" onclick="setTestViewBox('small')">
<script>
var paper = Raphael(10,50,620,400);
var circle = paper.circle(50,40,10);
var t = paper.text(100, 100, "Raphaël kicks butt!");
circle.attr("fill","#f00");
var i=2;
var sOldTyle="";
function setTestViewBox(stype)
{
if(sOldTyle!=stype)
{
sOldTyle = stype;
i=1;
}
if(stype=="big")
{
paper.setViewBox(0, 0, 620/i, 400/i);
}else{
paper.setViewBox(0, 0, 620*i, 400*i);
}
i++;
}
</script>
</body>
</html>查看Text 最终产生的标签：
<text style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-size: 10px; line-height: normal; font-family: Arial;" x="100" y="100" text-anchor="middle" font="10px "Arial"" stroke="none" fill="#000000" stroke-width="1"> <tspan style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" dy="3.5">Raphaël kicks butt!</tspan> </text>和draw2d是类似的。
问题也是一样的，看来raphael 本身就有这个问题了。
zoom out 的时候，字体好像会保持在12px的大小。
==》Firefox 正常，看来要从浏览器入手了。
到google 搜索一下 Chrome 12px.
果然有发现问题， Chrome 本身有对最小字体的设置。
点"设置" --> 显示高级设置
找到 “网络内容” --》 点"自定义字体" --》 字体大小下限
果然有 12: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
此问题结论为： 不是程式bug, 浏览器设置问题。 如果要解决的话，可以设置字体小一些
一、一些术语
1、替换元素与非替换元素
非替换元素，如果元素的内容包含在文档中，则称之为非替换元素。eg.<p>这个段落就是非替换元素</p>
替换元素，指用作为其他内容占位符的一个元素。eg.<img src="" title="" alt="" />
2、正常流
这里指西方语言文本从左向右、从上向下显示，这也是我们熟悉的传统HTML文档的文本格局。大多数元素都在正常流中，要让一个元素不在正常流中，唯一的办法是使之成为浮动或定位元素。
二、水平格式化
1、一个规则：正常流中块级元素框的水平部分总和就等于父元素的width。
父级元素width=margin-left + borde-left + padding-left + padding-right + border-right + margin-right
2、水平格式化的7大属性
这7大属性中，只有有3个可以设置成auto. margin-left,margin-right,width;
3、使用auto
如果将margin-left,margin-right,width这3个属性中的某个值为auto，而余下的两个元素为特定值的话，那么设置成auto的属性会确定所需要的长度，从而使元素框的宽度等于父元素的width。
而，将这三个属性都设置为非auto的某个值（按照CSS术语，这些格式化属性过分受限（overconstrained））,此时，用户代理会把margin-right强制为auto。
4、负外边距
本文链接
废话，可以跳过：好懒，好久没写东西了，总结了好久的正则表达式也没有出炉。最近在干啥，倒叙：git github怎么用，计算机网络，http协议，javascript面向对象，javascriptECMA标准，正则表达式，RESTful原则，php，css inline & block 等等，表示 inline和block还是一塌糊涂，等待研究。需要学的东西好多，亚历山大~~~
前言：可能会写三到四篇关于js链式继承以及面向对象的东西，大都是不同书籍的笔记、总结以及自己的理解。
涉及的书：
1.Object-Oriented JavaScript
2.Professional JavaScript for Web Developers[红书，javascript高级程序设计]
3.JavaScript Web Applications
正文
（一）javascript中"类"的继承是基于原型链的。什么是原型[prototype]链？
先举个例子
[想这个例子好纠结，纠结于js中“类”和Php、C#、java中类的含义其实是不一样的，我纠结于是否有必要阐述下两者的不同，想想还是算了。也许后文慢慢会说明白。如果你对其他语言中类的含义有所理解，希望在理解原型的时候，更多的是比较有何不同，着重理解原型链的本质，不要急于想用原型怎么达到类的效果。]
[我们可以用原型链做很多有趣事情，不用较真js如何构造一些诸如private public static 等关键字的实现]
类可以理解为种类，是一些特性的集合；对象是类的实现，是具体特性的实现。
动物，马，人，车都可以看做是类，是概念；具体到他家的狗，他妹，他家的车都是实物，是对象。
面向对象的程序设计，这种说法不一定确切，但是可以这么粗糙的理解。
继续举例子
原型链 更像是“我爸是李刚”，我儿子有事，先找我，我如果有事解决不了，就找李刚。
js中的每个对象，都包含有一个指针，指向它的原型。当我们调用一个js对象obj的属性或者方法时，obj先在直接属于自己的属性、方法中找，如果找不到，就在它的原型里找，如果找不到，再在原型的原型里找。
我是一个人，一个对象，我爹也是个人，一个对象。我儿子办成什么事情，外人不一定清楚到底是谁的本事。
objA是一个对象，它的原型objB也是一个对象，objC也是一个对象，每个对象都有他们自己的属性和方法。当objA.fun()执行时，如果objA不含有fun这个方法，解释器会在objA的原型对象objB查找，一直向上找。我自己认为，这种原型链的思想，不一定理解成父子的关系，也不一定要理解成继承关系。就像社会关系，不一定只是父子，也可以是师生、朋友。
这是原型链的一个概貌。和普遍意义上类的继承有很大差距，其他语言中如果按照“链”的方式去理解继承关系，更多是在类（Class）层面上，鸟有飞的方法，马和牛都是哺乳动物，他们都是生物。javascript是没有类（Class）这一说法的。
（二）原型如何实现
构造对象一般会见到两种最基本的形式：字面量和构造函数
var jim = {};
o.name = "Jim";
o.sayHello = function(){alert(this.name);};
var hanmeimei = {
name:"hanmeimei",
sayHello:function(){alert(this.name);}
};
/*构造函数*/
function Person(name){
this.name = name;
this.sayHello = function(){alert(this.name);};
}
var zhangsan = new Person("zhangsan");
var lisi = new Person("lisi");
lisi.toString();
上面的代码中，原型在哪里？？（不知道能扯多远，本来第一篇文章是讲o-o javascript那本书的笔记的，哎，就变成js对象基础介绍了）
javascript中函数也是一种对象，我们定义的Person 是Function的实例。
原型是函数实例的一个属性。
原型本身是一个对象，他是在函数定义的时候创建的。
Person定义的过程中，Person会得到一个prototype的属性，指向一个内部生成的对象（就是一个普通的Object）。执行 如lisi.toString();的时候，这个方法其实是这个原型对象的。
lisi又是如何和Person的原型对象扯上关系的呢？
var lisi = new Person("lisi");
这简单的一句话，华丽丽地做好好多你不知道的事情，比如说一下这些（有很多，具体可以参看ECMA的标准）
1.实例化一个Object对象，Person函数中的this指向这个对象
2.给这个对象加上一个内部私有属性（如__proto__）,指向Person的原型（函数的原型对象是在函数定义的时候产生的，现在是实例化一个对象，这是两个过程）
3.执行函数Person中的代码
4.如果函数Person的返回值不是对象，或者没有返回值，返回步骤1中生成的对象；如果有返回值，返回这个对象。
小结：
1.原型（prototype）是函数的一个属性，原型对象在函数定义的是产生。
2.通过构造函数产生对象的时候，这个对象会有一个内部属性（__proto__），指向函数的原型对象。
3.一个对象没有实现某方法、属性时，会向它内部指向的原型去查找。
（三）我们如何通过上面的小结，用原型链实现继承？？
我们尝试地基于Person"类"，实现一个Coder"类"，继承Person的属性和方法。
this.name = name;
this.sayHello = function(){alert(this.name);};
}
function Coder(language){
this.language = language;
this.code = function(){alert("i am a "+this.language+" coder");};
}
Coder.prototype = new Person("无名");
var c = new Coder();
c.name = "jim";
c.sayHello();
c.code();
你能理解吗？运行下看看~~~
我是这样理解的：点击查看~
//函数定义的时候，会产生一个原型对象，Person.prototype指向这个对象
function Person(name){
this.name = name;
this.sayHello = function(){alert(this.name);};
}
//这是Coder构造函数
//