[Web Chart系列之五] 2. 实战draw2d 之Label 放大，缩小的有关问题(raphael的text类似有关问题)

[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 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, 浏览器设置问题。 如果要解决的话，可以设置字体小一些