實戰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最終產生的是以下的標簽：
<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, 已經有包含這個設置了。
<center class="header monospace" style="box-sizing: border-box; font-family: Consolas, 'Lucida Console', monospace; font-size: 12px; white-space: nowrap; -webkit-background-origin: padding; -webkit-background-clip: padding; color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;"><center class="title styles-selector" style="box-sizing: border-box; cursor: text; word-wrap: break-word; white-space: normal;"><center style="box-sizing: border-box;"><span class="selector" style="color:#777777;box-sizing: border-box;">text,<span> </span><span class="selector-matches" style="color:black;box-sizing: border-box;">tspan</span>,<span> </span>tref</span><span style="box-sizing: border-box;"><span> </span>{</span></center></center></center><ol class="properties properties-tree monospace" style="box-sizing: border-box; margin: 0px; padding: 2px 4px 0px 0px; list-style: none; min-height: 18px; font-family: Consolas, 'Lucida Console', monospace; font-size: 12px; display: block; clear: both; color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: nowrap; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;"><li title="" style="box-sizing: border-box; margin-left: 0px !important; white-space: normal; text-overflow: ellipsis; overflow: hidden; -webkit-user-select: text; cursor: auto; padding-left: 38px;"><input class="enabled-button" style="box-sizing: border-box; visibility: hidden; float: left; font-size: 10px; margin: 0px; vertical-align: top; position: relative; z-index: 1; width: 18px; left: -40px;" type="checkbox"><span title="-webkit-text-size-adjust: none;" style="color:#c800;box-sizing: border-box; margin-left: -38px;">-webkit-text-size-adjust</span>:<span> </span><span class="expand-element" style="box-sizing: border-box;"></span><span class="value" style="box-sizing: border-box;">none</span>;</li></ol><center style="box-sizing: border-box; color: rgb(0, 0, 0); font-family: Consolas, 'Lucida Console', monospace; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: nowrap; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;">}</center>
