fix: HiChart用canvas自身getBoundingClientRect获取渲染尺寸,消除CSS拉伸导致的线条变形

This commit is contained in:
qinglong
2026-06-14 16:30:53 +08:00
parent f40b87ea52
commit 280cd3e994
+4 -4
View File
@@ -157,12 +157,12 @@
window.addEventListener('resize', function(){ self._resize(); }); window.addEventListener('resize', function(){ self._resize(); });
} }
HiChart.prototype._resize = function() { HiChart.prototype._resize = function() {
var rect = this.canvas.parentElement.getBoundingClientRect(); // 用 canvas 自身的 CSS 渲染尺寸 → 内部分辨率 = CSS尺寸 × DPR (保持高清)
var w = Math.max(rect.width - 8, 100); var box = this.canvas.getBoundingClientRect();
var h = 60; var w = box.width, h = box.height;
if (w <= 0 || h <= 0) { w = 280; h = 60; } // fallback
this.canvas.width = w * this._dpr; this.canvas.width = w * this._dpr;
this.canvas.height = h * this._dpr; this.canvas.height = h * this._dpr;
// CSS controls display size via width:100%;height:60px
this.ctx.setTransform(this._dpr, 0, 0, this._dpr, 0, 0); this.ctx.setTransform(this._dpr, 0, 0, this._dpr, 0, 0);
this._draw(); this._draw();
}; };