GithubHelp home page GithubHelp logo

Comments (2)

jones2000 avatar jones2000 commented on August 29, 2024

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

from hqchart.

Justonice2019 avatar Justonice2019 commented on August 29, 2024

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

from hqchart.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.