chxj1992
retina屏显示模糊
查了一下，这个问题是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，就暂时这么弄了。 如果发现什么问题了麻烦提醒我一下哈
