ctx.font = ctx.font.replace(/\d+px/, "10px"); console.log(ctx.font); ctx.save(); ctx.font = ctx.font.replace(/\d+px/, "18px"); ctx.restore(); console.log(ctx.font); |
输出:
10px sans-serif
18px sans-serif
根据文档预期结果为:
10px sans-serif
10px sans-serif
根据文档save应当保存当前的上下文的字体,在测试过程中发现font不能保存
是否可以在save的相关文档补充一下哪些属性需要自己保存。
更新：
调用 restore 后，
fillText会使用 restore后 的字体信息,
font getter 会返回 restore前 的字体信息,
measureText 返回的宽度是使用 restore前的字体信息计算的。
是有问题，这样操作的需求场景是？
这个问题可以规避
本来想画：
结果画出来是
牵引线线和文字没有对齐
之前我的代码大概是：
this.dataset =this._build_dataset(this.option);const groups = []for(let item ofthis.dataset) {let g =this._create_arc(item);this.ctx.save();g.layout();this.ctx.restore();groups.push(g);}this._ajust_text_boxs(groups);......g的一些方法：
class valueArc extends ArcGroup {_change_font_if_highlight() {if(!this.highlight) {return;}this.ctx.font =this.ctx.font.replace(/\d+px/,"16px");}layout() {this._change_font_if_highlight();super.layout();\\this.text_box = CalctextRect(this.ctx, this.label);这个方法用到了measureText}.....现在把 _change_font_if_highlight 改成了 _reset_label_font 每次重新设置 font 已经解决了
好像只是 ctx.font 在restore的时候值没有改回去，但实际效果是restore回去了。。