uni-app canvas绘制圆角图片问题:绘制矩形区域后,在区域上进行裁剪clip以绘制圆形图片失效
uni-app canvas绘制圆角图片问题:绘制矩形区域后,在区域上进行裁剪clip以绘制圆形图片失效
| 项目 | 内容 |
|---|---|
| 产品分类 | uniapp/App |
| PC开发环境操作系统 | Windows |
| PC开发环境操作系统版本号 | 18363.1198 |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 3.3.11 |
| 手机系统 | Android |
| 手机系统版本号 | Android 11 |
| 手机厂商 | 小米 |
| 手机机型 | MIX 3 |
| 页面类型 | vue |
| vue版本 | vue2 |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
bug描述: 在画布区域绘制黄色背景,然后在上面绘制圆形图片(clip裁剪),app和h5端有相同的问题:
- 不要背景色或者背景色区域不再图片下,显示正常,图片会显示为裁剪后的圆形
- 矩形背景色区域为整个画布,此时裁剪的图片无效,会显示会图片原来的完整形状
示例代码:
const context = uni.createCanvasContext('my_card')
uni.getImageInfo({
src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png',
success: function (res) {
context.rect(0, 0, 375, 400) //图片无法被裁剪
//context.rect(0, 0, 375, 10) //裁剪的图片不再矩形区域可以正常裁剪显示
context.setFillStyle('blue')
context.fill()
context.save()
context.beginPath()
context.setStrokeStyle('red')
context.setFillStyle('red')
context.arc(96, 96, 48, 0, 2 * Math.PI)
context.clip()
context.drawImage(res.path, 48, 48)
context.restore()
context.draw()
}
})
更多关于uni-app canvas绘制圆角图片问题:绘制矩形区域后,在区域上进行裁剪clip以绘制圆形图片失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html
6 回复
已验证,确实存在这个情况
更多关于uni-app canvas绘制圆角图片问题:绘制矩形区域后,在区域上进行裁剪clip以绘制圆形图片失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html
有此问题, 用moveTo、lineTo 连接一个矩形 clip 也失效
APP、H5、QQ小程序 都有此问题
hbx 3.4.7
QQ小程序 真机没问题
3.4.8+ 已修复此问题
