[Web Chart系列之五] 2. 实战draw2d 之Label 放大，缩小的问题(raphael的text类似问题)
问题描述
在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是正常的。
解决思维与历程
使用Chrome自带的调试工具(按 F12 键)， 看到Label最终产生的是以下的标签：
试图修改text 的font 相关设置看看是否有效， 发现不行。貌似控制字体大小的是matrix(1,0,0,1,5007,4846.5) 这样一句，而不是font 的设置。
以上思路失效。
==》既然draw2d使用的是raphael ，那么raphael 本身是否有问题呢？
raphael的Text 对应到的就是draw2d 的 label, 建一个例子测试一下：
查看Text 最终产生的标签：
问题也是一样的，看来raphael 本身就有这个问题了。
zoom out 的时候，字体好像会保持在12px的大小。
==》Firefox 正常，看来要从浏览器入手了。
到google 搜索一下 Chrome 12px.
果然有发现问题， Chrome 本身有对最小字体的设置。
<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="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 本身有对最小字体的设置。
解决方案
在Chrome点"设置" --> 显示高级设置
找到 “网络内容” --》 点"自定义字体" --》 字体大小下限
果然有 12: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
此问题结论为： 不是程式bug, 浏览器设置问题。 如果要解决的话，可以设置字体小一些。
除了设置浏览器外，是否可以使用CSS的方式解决这个问题： 参见
Chrome 最小字体12px。
结果是失败了。
实际上，在未安装链接文章方式设置CSS之前，查看最终产生的CSS, 已经有包含这个设置了。
text, tspan, tref {
}