想画圆形图的童鞋们进来看看。

[ablikim915]

先从canvasdrawer.wpy文件中找到画图的这个方法drawImage。然后直接替换下面的代码就可以。 drawImage(params) { this.ctx.save(); const { url, top = 0, left = 0, width = 0, height = 0, borderRadius = 0 } = params; if(borderRadius){ let d = borderRadius * 2; let cx = left + borderRadius; let cy = top + borderRadius; this.ctx.beginPath(); this.ctx.arc(cx, cy, borderRadius, 0, 2 * Math.PI); this.ctx.fill(); this.ctx.clip(); this.ctx.drawImage(url, left, top, d, d); }else{ this.ctx.drawImage(url, left, top, width, height); } this.ctx.restore(); } borderRadius 是圆的半径，image类型的json里加这个属性的时候你画出来的是圆形图。

下面是画圆角矩形，rect类型的json里加一个radius（圆角半径）属性就可以画圆角矩形。 drawRect(params) { this.ctx.save(); const { background, top = 0, left = 0, width = 0, height = 0, radius = 0 } = params; this.ctx.setFillStyle(background); if(radius){ // 开始绘制 this.ctx.beginPath(); // 左上角 this.ctx.arc(left + radius, top + radius, radius, Math.PI, Math.PI * 1.5); // border-top this.ctx.moveTo(left + radius, top); this.ctx.lineTo(left + width - radius, top); this.ctx.lineTo(left + width, top + radius); // 右上角 this.ctx.arc(left + width - radius, top + radius, radius, Math.PI * 1.5, Math.PI * 2); // border-right this.ctx.lineTo(left + width, top + height - radius); this.ctx.lineTo(left + width - radius, top + height); // 右下角 this.ctx.arc(left + width - radius, top + height - radius, radius, 0, Math.PI * 0.5); // border-bottom this.ctx.lineTo(left + radius, top + height); this.ctx.lineTo(left, top + height - radius); // 左下角 this.ctx.arc(left + radius, top + height - radius, radius, Math.PI * 0.5, Math.PI); // border-left this.ctx.lineTo(left, top + radius); this.ctx.lineTo(left + radius, top); // 这里是使用 fill 还是 stroke都可以，二选一即可，但是需要与上面对应 this.ctx.fill(); this.ctx.closePath(); }else{ this.ctx.fillRect(left, top, width, height); } this.ctx.restore(); }

[1104792149]

666哒