实战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 的设置。
以上思路失效。
以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索字体
, 标签
, 图形
, 放大缩小
, 大小
, label
, 画布
, #Chart控件 局部放大
变大缩小
vue2 webpack 入门、webpack2 入门、chart.js入门、webchart、web chart,以便于您获取更多的相关知识。