momoca

发布：2022-10-17 09:40
更新：2022-10-17 10:09
阅读：526

【报Bug】globalCompositeOperation 不生效和 gcanvas setBackGround 二个问题

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： win11

HBuilderX类型：正式

HBuilderX版本号： 3.6.4

手机系统： Android

手机系统版本号： Android 11

手机厂商：华为

手机机型： oppo

页面类型： nvue

vue版本： vue2

打包方式：云端

项目创建方式： HBuilderX

示例代码：

module.exports = {
data: {
interval: 0,
compositeTypes: [
'source-over',
'source-in',
'source-out',
'source-atop',
'destination-over',
'destination-in',
'destination-out',
'destination-atop',
'lighter',
'darker',
'copy',
'xor',
],
},
methods: {
handleDraw() {
for (var i = 0; i < this.compositeTypes.length; i++) {
this.test(i, this.compositeTypes[i])
}
},
test(i, name) {
var ganvas = this.$refs['gcanvas' + i][0]
/通过元素引用获取canvas对象/
this.canvasObj = enable(ganvas, {
bridge: WeexBridge,
})
//var ctx = gcanvas.getContext("2d");
/获取绘图所需的上下文，目前不支持3d/
const context = this.canvasObj.getContext('2d')
var blue = 'rgba(0,0,255,0.5)'
var red = 'rgba(255,0,0,0.5)'
context.fillStyle = blue
context.fillRect(15, 15, 70, 70)

        // set composite property  
        context.globalCompositeOperation = name  

        // draw circle  
        context.fillStyle = red  
        context.beginPath()  
        context.arc(75, 75, 35, 0, Math.PI * 2, true)  
        context.fill()  
        context.draw()  
    },  
},

}
</script>

.btn-text:active {
background-color: #0f0;
}

.btn-text {
padding-top: 20px;
padding-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
flex-direction: row;
background-color: #ff9537;

border-radius: 10px;  
width: 335px;  
text-align: center;  
color: #fff;

}

/ page /
.container {
flex-direction: column;
background-color: #ff9537;
}
</style>

操作步骤：

执行代码

预期结果：

1.不报错
2.globalCompositeOperation生效

实际结果：

globalCompositeOperation未生效

bug描述：

gcanvas setBackGround 报错

reportJSException >>>> exception function:gcanvas setBackGround for android view, exception:WX_RENDER_ERR_TEXTURE_SETBACKGROUND: TextureView doesn't support displaying a background drawable!

使用globalCompositeOperation后没有效果

2022-10-17 09:40 负责人:无分享

1 个回复

momoca (作者)

事例代码:
1.globalCompositeOperation没生效
2.控制台报错

<template>  
    <view class="container">  
        <view class="" v-for="(item, index) in compositeTypes" :key="index"> <gcanvas :ref="`gcanvas${index}`" class="canvas"></gcanvas>  
         <view class="">  
             {{item}}  
         </view></view>  
        <view class="btn"> <view class="btn-text" @click="handleDraw">开始动画</view> </view>  
    </view>  
</template>  

<script>  
import { enable, WeexBridge } from '../../gcanvas/index.js'  

module.exports = {  
    data: {  
        interval: 0,  
        compositeTypes: [  
            'source-over',  
            'source-in',  
            'source-out',  
            'source-atop',  
            'destination-over',  
            'destination-in',  
            'destination-out',  
            'destination-atop',  
            'lighter',  
            'darker',  
            'copy',  
            'xor',  
        ],  
    },  
    methods: {  
        handleDraw() {  
            for (var i = 0; i < this.compositeTypes.length; i++) {  
                this.test(i, this.compositeTypes[i])  
            }  
        },  
        test(i, name) {  
            var ganvas = this.$refs['gcanvas' + i][0]  
            /*通过元素引用获取canvas对象*/  
            this.canvasObj = enable(ganvas, {  
                bridge: WeexBridge,  
            })  
            //var ctx = gcanvas.getContext("2d");  
            /*获取绘图所需的上下文，目前不支持3d*/  
            const context = this.canvasObj.getContext('2d')  
            var blue = 'rgba(0,0,255,0.5)'  
            var red = 'rgba(255,0,0,0.5)'  
            context.fillStyle = blue  
            context.fillRect(15, 15, 70, 70)  

            // set composite property  
            context.globalCompositeOperation = name  

            // draw circle  
            context.fillStyle = red  
            context.beginPath()  
            context.arc(75, 75, 35, 0, Math.PI * 2, true)  
            context.fill()  
            context.draw()  
        },  
    },  
}  
</script>  

<style>  
.canvas {  
    width: 605upx;  
    height: 400upx;  
}  

.btn-text:active {  
    background-color: #0f0;  
}  

.btn-text {  
    padding-top: 20px;  
    padding-bottom: 20px;  
    margin-left: 20px;  
    margin-right: 20px;  
    flex-direction: row;  
    background-color: #ff9537;  

    border-radius: 10px;  
    width: 335px;  
    text-align: center;  
    color: #fff;  
}  

/* page */  
.container {  
    flex-direction: column;  
    background-color: #ff9537;  
}  
</style>

该问题目前已经被锁定, 无法添加新回复

【报Bug】globalCompositeOperation 不生效和 gcanvas setBackGround 二个问题

操作步骤：

执行代码

预期结果：

1.不报错
2.globalCompositeOperation生效

实际结果：

globalCompositeOperation未生效

bug描述：

1 个回复

公告

相关问题

【报Bug】globalCompositeOperation 不生效 和 gcanvas setBackGround 二个问题

操作步骤： 执行代码

预期结果： 1.不报错 2.globalCompositeOperation生效

实际结果： globalCompositeOperation未生效

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

【报Bug】globalCompositeOperation 不生效和 gcanvas setBackGround 二个问题

操作步骤：

执行代码

预期结果：

1.不报错
2.globalCompositeOperation生效

实际结果：

globalCompositeOperation未生效