微信小程序里自定义组件,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)