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端有相同的问题:

  1. 不要背景色或者背景色区域不再图片下,显示正常,图片会显示为裁剪后的圆形
  2. 矩形背景色区域为整个画布,此时裁剪的图片无效,会显示会图片原来的完整形状

示例代码:

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+ 已修复此问题

回到顶部