zoukankan      html  css  js  c++  java
  • canvas 实现圆角矩形与文字

     1.data数据

    data () {
      return {
      startX: 74,
      startY: 900
     } 
    }
    

      

    2.methods

    methods{
      drawArcTo (ctx, w, r) {
        let x = parseFloat(this.startX + '')
        let y = parseFloat(this.startY + '')
        let endX = x + w + 2 * r + 15
        if (endX > 700) {
          y += 2 * r + 16
          x = 74
          endX = x + w + 2 * r + 15
        }
        this.startX = endX
        this.startY = y
        this.list.push(w)
        ctx.beginPath()
        ctx.moveTo(x + r, y) // 创建开始点
        ctx.lineTo(x + w + r, y) // 创建水平线
        ctx.strokeStyle = '#2486FF'
        ctx.arcTo(x + w + 2 * r, y, x + w + 2 * r, y + r, r) // 创建弧
        ctx.arcTo(x + w + 2 * r, y + (2 * r), x + w, y + (2 * r), r)
        ctx.lineTo(x + r, y + (2 * r))
        ctx.arcTo(x, y + (2 * r), x, y + r, r)
        ctx.arcTo(x, y, x + r, y, r)
      
        ctx.setFillStyle('#2486FF')
        ctx.fill()
        ctx.stroke();
      
        return [x + r, y + r]
      },
    
      markPoster () {
        let ctx = wx.createCanvasContext('poster')
        let txtArr = ['11万公里','2018年','排量1.6L','挂牌价11万元']
        for (let i = 0; i < txtArr.length; i++) {
          ((i) => {
            ctx.font = '24px Microsoft YaHei'
            let item = txtArr[i]
            let width = ctx.measureText(item).width
            let coordinates = this.drawArcTo(ctx, width, 28)
            ctx.setFillStyle('#ffffff')
            ctx.fillText(item, coordinates[0], coordinates[1])
          })(i)
        }
        
        ctx.draw(true, () => {
          setTimeout(() => {
            wx.canvasToTempFilePath({
              x: 0,
              y: 0,
               750,
              height: 1334,
              canvasId: 'poster',
              success: (file) => {
                this.posterImg = file.tempFilePath
              }
            })
          }, 1000)
        })
      }  
    }
    

      

      

      

  • 相关阅读:
    JAVA高级编程数据源datasource

    编写自己的JDBC框架
    libevent带负载均衡的多线程使用示例
    游戏数据分析-基本指标
    学习日记-----各种问题
    学习日记-----ORM
    【转】Delphi利用系统环境变量获取常用系统目录
    [转]Delphi多线程编程入门(二)——通过调用API实现多线程
    [转]Delphi多线程编程入门(一)
  • 原文地址:https://www.cnblogs.com/dyy-dida/p/14651882.html
Copyright © 2011-2022 走看看