zhangyq
zhangyq
  • 发布:2022-02-11 20:15
  • 更新:2022-05-13 10:17
  • 阅读:365

【报Bug】canvas绘制圆角图片,绘制一个矩形区域后,在区域上进行裁剪clip绘制圆形图片失效

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 18363.1198

HBuilderX类型: 正式

HBuilderX版本号: 3.3.11

手机系统: Android

手机系统版本号: Android 11

手机厂商: 小米

手机机型: MIX 3

页面类型: vue

vue版本: vue2

nvue编译模式: fast

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

'''
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()  
            }  
        })  

'''

操作步骤:

在绘制图片之前绘制一个画布大小相同的矩形区域,然后在绘制圆形裁剪区域,图片,裁剪

预期结果:

一个圆形的图片在黄色的画布上显示

实际结果:

图片未被裁剪,不绘制矩形背景区域才能正常裁剪

bug描述:

在画布区域绘制黄色背景,然后在上面绘制圆形图片(clip裁剪),app和h5端有相同的问题:
1.不要背景色或者背景色区域不再图片下,显示正常,图片会显示为裁剪后的圆形

  1. 矩形背景色区域为整个画布,此时裁剪的图片无效,会显示会图片原来的完整形状
2022-02-11 20:15 负责人:无 分享
已邀请:
FullStack

FullStack - 【插件开发】【专治疑难杂症】【解决问题 >50$】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=22130】【骗子请绕道】QQ:543610866

已验证,确实存在这个情况

取舍

取舍 - 我们都如流星短暂 但谁能像它闪耀

有此问题, 用moveTo、lineTo 连接一个矩形 clip 也失效

  • 取舍

    APP、H5、QQ小程序 都有此问题

    2022-05-13 08:21

  • 取舍

    hbx 3.4.7

    2022-05-13 08:22

  • 取舍

    QQ小程序 真机没问题

    2022-05-13 10:18

DCloud_UNI_HDX

DCloud_UNI_HDX

3.4.8+ 已修复此问题

要回复问题请先登录注册