Web Chart入门（5） 2

Web Chart入门（5） 22013-06-30实战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 的设置。

以上思路失效。