在安卓手机：小米 5s，系统 MIUI 9.6 | 稳定版，微信版本 6.6.6，Sprite 设置 borderRadius 属性，界面裁剪错

[520ph]

我使用网络图片，本地图片。或者 bgcolor 属性设置 Sprite。加上 borderRadius 就会裁剪错。在模拟器上没问题，暂时只在小米5s上遇到了。

测试代码

<template>
  <view>
    <canvas class="myCanvas" canvas-id="myCanvas" />
  </view>
</template>
<script>
import wepy from 'wepy';
const spritejs = require('../../utils/sprite-wxapp');
export default class GenerateImage extends wepy.page {
  config = {
    navigationBarTitleText: '一起燃烧卡路里',
    navigationBarBackgroundColor: '#FA4676'
  };
  data = {
    avatarUrl: 'https://wx.qlogo.cn/mmopen/vi_32/ZrA7SPMNXYibCdRlsTH0oYnfkv0fKx2FVxHfO7MsiaUubIHRtCTp0Ej2f98lvcWVh9wUXuaHAyepWCTYb2HIy8Ug/132'
  };
  methods = {};
  async onLoad() {
    let scene = new spritejs.Scene(0);
    let layer = scene.layer('myCanvas');
    let avatarUrl = await wepy.downloadFile({
      url: this.avatarUrl
    });
    // let avatar = new spritejs.Sprite(avatarUrl.tempFilePath);
    let avatar = new spritejs.Sprite();
    avatar.attr({
      anchor: [0],
      pos: [50, 100],
      size: [72, 72],
      bgcolor: 'red',
      borderRadius: 10
    });
    layer.append(avatar);
  }
}
</script>
<style lang="less">
page{
  background: #000;
}
.myCanvas {
  position: fixed;
  left: 0;
  top: 0;
  height: 1242px;
  width: 750px;
}
</style>

[akira-cn]

某些版本下小程序canvas本身的bug，我现在没有机器测试。

https://github.com/spritejs/sprite-core/blob/master/src/helpers/render.js

这里的 drawRadiusBox

export function drawRadiusBox(context, {x, y, w, h, r}) {
  context.beginPath();
  context.moveTo(x + r, y);
  context.arcTo(x + w, y, x + w, y + h, r);
  context.arcTo(x + w, y + h, x, y + h, r);
  context.arcTo(x, y + h, x, y, r);
  context.arcTo(x, y, x + w, y, r);
  context.closePath();
}

可能最终显示出来的有问题