canva绘制圆角矩形

<template>
  <canvas
    :id="options.id"
    ref="canvas"
    class="elem-container"
    :width="canvasWidth"
    :height="canvasHeight"
    :style="assignStyle"
  />
</template>
<script>
import mixins from ‘./canvasMixins.js‘

export default {
  name: ‘RectElem‘,
  mixins: [mixins],
  data() {
    return {
      myOptions: {
        penStyle: 0
      },
      assignStyle: {} // 合并样式
    }
  },
  computed: {
    ‘canvasWidth‘: function() {
      return (parseFloat(this.myOptions.width) + parseFloat(this.myOptions.borderWidth))
    },
    ‘canvasHeight‘: function() {
      return (parseFloat(this.myOptions.height) + parseFloat(this.myOptions.borderWidth))
    },
    ‘radius‘ : function(){
      debugger;
      if(this.myOptions.radius == "none"){ return [0,0,0,0]}
      return !!this.myOptions.radius ? JSON.parse(this.myOptions.radius) : [0,0,0,0]
    }
  },
  mounted() {
    this.initialStyleOfRec()
  },
  methods: {
    initialStyleOfRec() {
      const options = this.myOptions // 父组件传入的参数
      const bWidth = options.borderWidth
      let baseStyle = options.style // 未转为对象前的基础样式（字符串）
      const width = options.width ? `width:${options.borderWidth ? (options.width * 1 + options.borderWidth) : options.width}px;` : ‘‘
      const height = options.height ? `height:${options.borderWidth ? (options.height * 1 + options.borderWidth) : options.height}px;` : ‘‘
      const len = baseStyle.length
      baseStyle = baseStyle.charAt(len - 1) === ‘;‘ ? (baseStyle + width + height) : (baseStyle + ‘;‘ + width + height)
      this.baseStyle = this.style2Object(baseStyle)
      if (bWidth && bWidth !== ‘‘) {
        this.baseStyle.top = `${-0.5 * (this.options.borderWidth || 0)}px`
        this.baseStyle.left = `${-0.5 * (this.options.borderWidth || 0)}px`
      }
      this.assignStyle = this.baseStyle
    },
    // // 把字符串样式转化为{}
    // styleToObject(style) {
    //   let styleObject = {}

    //   if (style && style !== ‘‘ && style !== ‘null‘) {
    //     const len = style.length
    //     styleObject = style.charAt(len - 1) === ‘;‘ ? ‘{‘ + style + ‘}‘ : ‘{‘ + style + ‘;}‘ // 统一样式后面以";"结束

    //     // 将字符串转化为json标准字符串
    //     styleObject = styleObject.replace(/{/g, ‘{\"‘)
    //     styleObject = styleObject.replace(/:/g, ‘\":\"‘)
    //     styleObject = styleObject.replace(/;/g, ‘\",\"‘)
    //     styleObject = styleObject.replace(/,"}/g, ‘}‘)

    //     // 将json标准字符串转化为{}对象
    //     styleObject = JSON.parse(styleObject)
    //   }
    //   return styleObject
    // },
    render(options) {
      const ctx = this.getCleanCtx()// 获取canvas画布
      const penStyle = options.penStyle// 线型
      // 判断
      const halfBW = 0.5 * (options.borderWidth || 0) // 线宽的一半
      const fillColor = options.fillColor

      if (penStyle === 0) {
        ctx.lineWidth === 0
      } else if (penStyle !== 1) {
        ctx.setLineDash(this.getLineDashArr(penStyle))
      }
      let param = {
          x:0 + halfBW,
          y:0 + halfBW,
          w:options.width,
          h:options.height,
          radius:options.radius || [0,0,0,0]
        }
      if (fillColor !== ‘none‘) {
        // 绘制填充矩形
        ctx.fillStyle = fillColor
       // ctx.fillRect(0 + halfBW, 0 + halfBW, options.width, options.height);
        
        //绘制填充圆角矩形
        this.fillRoundRect(ctx,param);
        //ctx.fill()
      }
      ctx.lineWidth = options.borderWidth
      ctx.strokeStyle = options.borderColor
      //ctx.strokeRect(0 + halfBW, 0 + halfBW, options.width, options.height)
      //绘制描边圆角矩形
      this.strokeRoundRect(ctx,param);
    },
    /**该方法用来绘制一个有填充色的圆角矩形 
     *@param cxt:canvas的上下文环境 
     *@param param.x:左上角x轴坐标 
     *@param param.y:左上角y轴坐标 
     *@param param.w:矩形的宽度 
     *@param param.h:矩形的高度 
     *@param param.radius:圆的半径 
     **/
    fillRoundRect(cxt, param) {
        let x = param.x,
        ctx = ctx,
        y = param.y,
        width = param.w,
        height = param.h,
        radius = param.radius;
        //圆的直径必然要小于矩形的宽高          
        if (2 * radius > width || 2 * radius > height) { return false; }
        cxt.save();
        cxt.translate(x, y);
        //绘制圆角矩形的各个边  
        this.drawRoundRectPath(cxt, width, height, radius);
        //cxt.fillStyle = fillColor || "#000"; //若是给定了值就用给定的值否则给予默认值  
        cxt.fill();
        cxt.restore();
    },

    drawRoundRectPath(cxt, width, height) {
      var radius = this.radius;
      var  r0 = radius[0],r1 = radius[1],r2 = radius[2],r3 = radius[3];
      cxt.beginPath(0);
      //从右下角顺时针绘制，弧度从0到1/2PI  
      cxt.arc(width - r0, height - r0, r0, 0, Math.PI / 2);

      //矩形下边线  
      cxt.lineTo(r1, height);

      //左下角圆弧，弧度从1/2PI到PI  
      cxt.arc(r1, height - r1, r1, Math.PI / 2, Math.PI);

      //矩形左边线  
      cxt.lineTo(0, r2);

      //左上角圆弧，弧度从PI到3/2PI  
      cxt.arc(r2, r2, r2, Math.PI, Math.PI * 3 / 2);

      //上边线  
      cxt.lineTo(width - r3, 0);

      //右上角圆弧  
      cxt.arc(width - r3, r3, r3, Math.PI * 3 / 2, Math.PI * 2);

      //右边线  
      cxt.lineTo(width, height - r3);
      cxt.closePath();
    },
    /**该方法用来绘制描边圆角矩形 
     *@param cxt:canvas的上下文环境 
     *@param x:左上角x轴坐标 
     *@param y:左上角y轴坐标 
     *@param width:矩形的宽度 
     *@param height:矩形的高度 
     *@param radius:圆的半径 
     *@param lineWidth:线条粗细 
     *@param strokeColor:线条颜色 
     **/
    strokeRoundRect(cxt,param){
      let x = param.x,
      y = param.y,
      width = param.w,
      height = param.h,
      radius = param.radius;
      //圆的直径必然要小于矩形的宽高          
      if (2 * radius > width || 2 * radius > height) { return false; }

      cxt.save();
      cxt.translate(x, y);
      //绘制圆角矩形的各个边  
      this.drawRoundRectPath(cxt, width, height, radius);
     // cxt.lineWidth = lineWidth || 2; //若是给定了值就用给定的值否则给予默认值2  
      //cxt.strokeStyle = strokeColor || "#000";
      cxt.stroke();
      cxt.restore();
    }
  }
}
</script>