Comments (4)
不知道怎么解决??? 脸皮好厚啊!!!
from kline.
查了一下,这个问题是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,就暂时这么弄了。
如果发现什么问题了麻烦提醒我一下哈
from kline.
暂时不知道怎么解决, 哈哈
from kline.
@SiberiaBlue 感谢感谢 🎉🎉🎉
from kline.
Related Issues (20)
- 如何去除指标这一行
- Kline移动端版本已经弄出来了 https://gitee.com/koch/exchange-app
- 不能实例化多个
- 移动端怎么阻止纵向滑动呢
- 鼠标滚轮控制缩放 HOT 2
- PC端如何让k线跟随浏览器大小自动改变大小
- PC k线图右侧买卖档位排序问题 HOT 1
- webscoket 正确返回格式是什么
- stomp方式在创建Kline实例时报错Error in mounted hook: "ReferenceError: SockJS is not defined"
- 有没有成功的案例参考一下,引用了该项目文档启动后一直显示正在读取数据
- 请问是否可以支持本地的数据库?
- frame0.k0 这个有什么用?
- K线插件接入手机端时,K线无法滑动,请问有解决方案吗?前面的那个类似问题没有解决 HOT 1
- 加载历史数据 HOT 1
- dependency was not found
- 我们后台传的分时数据没有高开低收 只有现价 均价 成交量 请问怎么画线
- 怎么重绘K线图? HOT 2
- 价格为负数时,K线和分时线均不可见
- 将Kline安装在ruby项目里,如何安装或引用?
- Provisional headers are shown HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from kline.