web端不支持强制横屏模式的问题

[Justonice2019]

我想知道既然web端不支持强制横屏模式, dom元素可以通过css3的translate方式旋转90度达到切换横屏效果, hqChart到底是什么方式实现canvas横屏模式的呢? 自己使用原生canvas实现过简单的k线绘制

[jones2000]

在竖屏画布上把横屏线段画上去就可以. 除了文字需要旋转,其他的都是线段直接根据横屏的画就可以了.

[Justonice2019]

这是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做了别的转换吗？ 实在感到困惑！！！