web端不支持强制横屏模式的问题
Closed this issue · 2 comments
Justonice2019 commented
我想知道既然web端不支持强制横屏模式, dom元素可以通过css3的translate方式旋转90度达到切换横屏效果, hqChart到底是什么方式实现canvas横屏模式的呢? 自己使用原生canvas实现过简单的k线绘制
jones2000 commented
在竖屏画布上把横屏线段画上去就可以. 除了文字需要旋转,其他的都是线段直接根据横屏的画就可以了.
Justonice2019 commented
这是HQCharts源码的vuehqchart\src\jscommon\umychart.vue\umychart.vue.js :15700处的代码:
{
this.Canvas.beginPath();
if (isHScreen)
{
this.Canvas.moveTo(yHigh,ToFixedPoint(x));
this.Canvas.lineTo(yLow,ToFixedPoint(x));
}
else
{
this.Canvas.moveTo(ToFixedPoint(x),yHigh);
this.Canvas.lineTo(ToFixedPoint(x),yLow);
}
this.Canvas.stroke();
}
这是我自己仿造这样坐标转换的代码实现:
this.ctx.beginPath()
if (this.isHScreen) {
this.ctx.strokeStyle = 'red'
this.ctx.moveTo(y1, x1) // 这样转换好像不能达到横屏画图的效果, 不应该是this.ctx.moveTo(this.canvasWidth - y1, x1)
this.ctx.lineTo(y2, x2) // 这样转换好像不能达到横屏画图的效果, this.ctx.lineTo(this.canvasWidth - y2, x2)
this.ctx.stroke()
} else {
this.ctx.strokeStyle = 'green'
this.ctx.moveTo(x1, y1)
this.ctx.lineTo(x2, y2)
this.ctx.stroke()
}
这是我自己写的矩形图的转换代码:
JChart.prototype.drawRect = function (x1, y1, width, height) {
this.ctx.fillStyle = 'green'
if (this.isHScreen) {
this.ctx.save()
this.ctx.translate(this.canvasWidth, 0)
this.ctx.rotate(90 * Math.PI / 180)
this.ctx.fillRect(y1, x1, width, height)
this.ctx.restore()
} else {
this.ctx.fillRect(x1, y1, width, height)
}
}
还是说HQCharts做了别的转换吗? 实在感到困惑!!!