微信小程序canvas绘制自定义圆角矩形

最新推荐文章于 2024-12-06 16:06:19 发布

门前小小小树

最新推荐文章于 2024-12-06 16:06:19 发布

阅读量2.4k

点赞数 2

分类专栏：圆角矩形工具方法实现方案文章标签： canvas vue.js

本文链接：https://blog.youkuaiyun.com/weixin_44263646/article/details/114939007

版权

分享一个可以自定义每个角的圆角的canvas方法：

  /** @description canvas 绘制自定义圆角的矩形(默认填充色)-hyf
   *  x-位置x坐标, y-位置y坐标, w-元素宽度, h-元素高度, r-圆角
   *  if config = color // 默认填充色
   * else config = {
   * type: fill / stroke / both,填充/描边/填充和描边
   * fillColor: color, //填充色
   * strokeColor: color, //描边色
   * round:{ // 配置哪个方向的角是圆角，默认不传全是圆角
   *   leftTop: boole, // 是否圆角
   *   leftBottom: boole, // 是否圆角
   *   rightTop: boole, // 是否圆角
   *   rightBottom: boole, // 是否圆角
   * }
    }**/
  roundRect (ctx, x, y, w, h, r, config) {
   
    let color = 'transparent'
    if (typeof config === 'string') {
   
      color = config
    }
    ctx.save()
    // 开始绘制
    ctx.beginPath()
    // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
    if (config.type) {
   
      if (config.type === 'fill') {
   
        ctx.setFillStyle(config.fillColor || 'transparent')
      } else if (config.type === 'stroke') {
   
        ctx.setStrokeStyle(config.strokeColor || 'transparent')
      } else if (config.type