retina屏显示模糊

[AnswerYas]

如题，retina屏下显示效果不佳

[chxj1992]

暂时不知道怎么解决, 哈哈

[SiberiaBlue]

查了一下，这个问题是canvas的问题，一般是两种解决方法。
1.绘图时将像素平移0.5px，但是源码中已经进行了平移，所以不是这个问题。
2.先将画布尺寸放大一倍，再将内容也放大2倍，然后用css进行缩放。

修改kline.css
#chart_mainCanvas {
overflow: hidden;
position: absolute;
z-index: 0;
transform-origin: left top 0; //缩放基点，不设置默认中间
transform:scale(0.5, 0.5); //缩放比例
}

#chart_overlayCanvas {
overflow: hidden;
position: absolute;
z-index: 2;
transform-origin: left top 0;
transform:scale(0.5, 0.5);
}

修改kline.js
修改画布大小，宽高×2，并放大图像
大概第9384行
var mainCanvas = $('#chart_mainCanvas')[0];
var overlayCanvas = $('#chart_overlayCanvas')[0];
// mainCanvas.width = canvasGroupRect.w;
// mainCanvas.height = canvasGroupRect.h;
// overlayCanvas.width = canvasGroupRect.w;
// overlayCanvas.height = canvasGroupRect.h;
mainCanvas.width = canvasGroupRect.w2;
mainCanvas.height = canvasGroupRect.h2;
overlayCanvas.width = canvasGroupRect.w2;
overlayCanvas.height = canvasGroupRect.h2;
document.getElementById("chart_mainCanvas").getContext("2d").scale(2,2);
document.getElementById("chart_overlayCanvas").getContext("2d").scale(2,2);

然后发现虽然是成功缩小且清晰了，但是图的下部和右侧消失了，因为增加画布的宽高之后，画图的时候就根据的是2倍的宽高作画的，所以下部和右侧再缩放回来之后仍然不能回到正确的位置，被卡在画布外面了。
因此还要修改作画区域，使之为放大后的宽高的一半
大概第3422行
ChartManager.prototype.redraw = function (layer, refresh) {
if (layer == undefined || refresh)
layer = "All";
if (layer == "All" || layer == "MainCanvas") {
if (refresh)
this.getFrame("frame0").setChanged(true);
this.layout(this._mainContext, "frame0",
0, 0, this._mainCanvas.width/2, this._mainCanvas.height/2);//此处将所画的图的边界按比例缩小了一半
this.drawMain("frame0", this._mainContext);
}
if (layer == "All" || layer == "OverlayCanvas") {
this._overlayContext.clearRect(
0, 0, this._overlayCanvas.width/2, this._overlayCanvas.height/2);
this.drawOverlay("frame0", this._overlayContext);
}
};

ok了

上头提了这个问题要解决，这个是我目前想的办法，这么做虽然感觉好像有点问题，不过数据没问题，效果还ok，就暂时这么弄了。
如果发现什么问题了麻烦提醒我一下哈

[chxj1992]

@SiberiaBlue 感谢感谢 🎉🎉🎉

[kuailingmin]

不知道怎么解决？？？ 脸皮好厚啊！！！