微信小程序里自定义组件,canvas组件没有效果

时间:2019-06-28 01:12:56   收藏:0   阅读:1166

 

 

methods: {

    /**
     * el:画圆的元素
     * r:圆的半径
     * w:圆的宽度
     * 功能:画背景
     */
    drawCircleBg: function (el, r, w) {
      const ctx = wx.createCanvasContext(el);
      ctx.setLineWidth(w);// 设置圆环的宽度
      ctx.setStrokeStyle(‘#E5E5E5‘); // 设置圆环的颜色
      ctx.setLineCap(‘round‘) // 设置圆环端点的形状
      ctx.beginPath();//开始一个新的路径
      ctx.arc(r, r, r - w, 0, 2 * Math.PI, false);
      //设置一个原点(110,110),半径为100的圆的路径到当前路径
      ctx.stroke();//对当前路径进行描边
      ctx.draw();

    }
}
 
<view class="circle_box" style="width:{{size}}px;height:{{size}}px">

      <canvas class="circle_draw" canvas-id="{{draw}}" style="width:{{size}}px;height:{{size}}px"></canvas> 
      <slot></slot>    
</view>

 

调用页:

     this.circle = this.selectComponent(‘#circle1‘);
     this.circle.drawCircle("circle", 100 ,4, 1);

 

结果是没有效果,

原因是:

createCanvasContext这个是有两个参数的,在page页面默认传了一个This,组件里面 需要传this

const ctx = wx.createCanvasContext(‘myCanvas‘,this);

 

 

转 : https://segmentfault.com/q/1010000012854159

 

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!