小程序canvas绘制K线,从0开始的日记(一)

2017-01-11


只有canvas的api,要搞一个成熟的K线图组件出来,对我来说是一个巨大的挑战,但是没办法,小程序中,由于api的细微差别,成熟的三方框架用不了,只好硬着头皮自己来。从熟读api开始,一步一步尝试,希望能有所成就。- -!压力巨大,开撸吧!!


先创建一个canvas元素,以后所有的例子都要用到他,设置好id,绑定好事件,不出意外,canvas元素应该不会改动了


// canvas.wxml

<canvas canvas-id="stage" class="stage"

        bindtouchstart="touchstart"

        bindtouchmove="touchmove"

        bindtouchend="touchend"

        bindtouchcancel="touchcancel"

        bindlongtap="longtap" >

</canvas>

// canvas.wxss

.stage {

    width: 100%;

    height: 200px;

    margin: 20px auto;

    background-color: #fff;

}

通过官方文档api的学习,发现一个图形,从绘制开始,到结束都有一定的规律,比如画一个矩形


// 第一步:声明一个canvas对象

const ctx = wx.createCanvasContext('stage')


// 第二步:定义要绘制的内容

ctx.setFillStyle('red')

ctx.fillRect(10, 10, 150, 75)


// 第三步:根据第二步中绘制的内容,将图像画出来

ctx.draw()


这样,就搞定了矩形


小程序canvas绘制K线,从0开始的日记(一)


第一个矩形

填充样式很多,比如说线性渐变,圆角渐变等,这些都不是重点,需要的时候找api即可,重点在于如果想要绘制图片的同时,还想画一条线,并且写入几个文字应该怎么玩?


根据刚才发现的规律,在第二步中分别定义就行,试试看


const ctx = wx.createCanvasContext('stage')


ctx.setFillStyle('red')

ctx.fillRect(10, 10, 150, 75)


ctx.beginPath()

ctx.moveTo(10, 100)

ctx.lineTo(150, 100)

ctx.setStrokeStyle('red')

ctx.stroke()


ctx.setFontSize(20)

ctx.setFillStyle('orange')

ctx.fillText('canvas 真尼玛难!', 10, 150)


ctx.draw()


发现凡是填充内容,都是用的跟fill有关的api,凡是填充线条,都是跟stroke有关的api,每一个图形的绘制,都以一次填充结束,上面我们画的图形如下


小程序canvas绘制K线,从0开始的日记(一)


同时绘制矩形线条和文字

思考坐标

.

canvas 画布的坐标跟我们数学上常用的坐标不太一样,它的(0, 0)点在画布的左上角,可是实际使用时,我们要将坐标原点放在左下角,或者我们生成的坐标系的原点处。因此,在传入数据时,我们要讲数据进行处理才能符合我们的实际使用。


我的canvas高度为200,因此左下角的坐标点为(0, 200),这时我们根据常识希望画一个从(0, 0)到(200, 100)的直线,那么我们应该这样做


line([0, 0], [200, 100])


function line (coors, coore) {

  const ctx = wx.createCanvasContext('stage')

  ctx.beginPath()

  ctx.setStrokeStyle('red')

  ctx.moveTo(coors[0], 200 - coors[1])

  ctx.lineTo(coore[0], 200 - coore[1])

  ctx.stroke()

  ctx.draw()

}


小程序canvas绘制K线,从0开始的日记(一)


坐标转换

如果我们想要画一个折线图,从上面的例子可以看出,无非就是根据传入的数据,多做几次ctx.lineTo操作即可,根据这个思路可以封装一个折线图方法


line (canvasId, options) {

  let windowWidth = 0

  wx.getSystemInfo({

    success (result) {

      windowWidth = result.windowWidth

    }

  })

  let a = windowWidth / (options.xAxis.length-1)

  let data = []

  options.xAxis.map((item, i) => {

    data.push([i * a, 200 - options.yAxis[i]])

  })


  const ctx = wx.createCanvasContext(canvasId)

  ctx.beginPath()

  data.map((item, i) => {

    if (i == 0) {

      ctx.moveTo(item[0], item[1])

    }

    ctx.lineTo(item[0], item[1])

  })

  ctx.setLineWidth(1)

  ctx.setLineCap('square')

  ctx.setStrokeStyle('red')

  ctx.stroke()

  ctx.draw()

}


在onLoad中调用


onLoad (e) {

  this.line('stage', {

    xAxis: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],

    yAxis: [11, 33, 22, 32, 14, 15, 20, 60, 23, 44, 77, 122, 133, 89, 156, 122,128, 143, 111, 101, 132, 99, 98, 44, 12, 14, 111, 13, 12, 55]

  })

},


小程序canvas绘制K线,从0开始的日记(一)




0
收藏