[Web Chart系列之五] 2. 實戰draw2d 之Label 放大，縮小的問題(raphael的text類似問題) · Web Chart

### 問題描述在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, 建一個例子測試一下： ~~~  <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。](http://blog.csdn.net/oscar999/article/details/8687720) 結果是失敗了。實際上，在未安裝鏈接文章方式設置CSS之前，查看最終產生的CSS, 已經有包含這個設置了。 ~~~ text,?tspan,?tref?{-webkit-text-size-adjust:?none;} ~~~