[移动开发] 微信小程序解决canvas在页面优先级过高导致无法遮挡问题

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> 微信小程序解决canvas在页面优先级过高导致无法遮挡问题 -> 正文阅读

[移动开发]微信小程序解决canvas在页面优先级过高导致无法遮挡问题

、

解决方案一：

弹框中如果只有image或者view或者button标签的话，直接使用cover-view、cover-image。

解决方案二：

如果弹框中有其他的标签，比如input。上边的方案就存在弊端。input会被覆盖，无法正常显示。针对这种情况我这边采用的解决方法是将canvas转换为图片展示

我这边使用的是vant组件库，解决方法就是去改了组件的源码，主要是改了index.js文件，

index.js:、、

methods(){
    //添加方法
getImage() {
            const {
                pixelRatio
            } = wx.getSystemInfoSync();
            const width = 130,
                height = 130,
                _this = this
                _this.img = []
            wx.createSelectorQuery().in(_this)
                .select('#van-circle')
                .node()
                .exec(function (res) {
                    console.log("11",res[0])
                    wx.canvasToTempFilePath({
                        x: 0,
                        y: 0,
                        // 画布区域的高宽
                        width,
                        height,
                        // 生成图片的高宽 如果图片不清晰 需要增加pixelRatio
                        destWidth: width * pixelRatio,
                        destHeight: height * pixelRatio,
                        // 当前canvasid
                        canvasId: "van-circle",
                        // 导出图片类型
                        fileType: 'png',
                        // 如果当前canvas的type='2d' 需要指定当前canvas元素
                        // node可以通过 wx.createSelectorQuery
                        canvas: res[0].node,
                        success(imgRes) {
                            // 生成图片
                            _this.img.push(imgRes.tempFilePath)
                            _this.triggerEvent('getImg', imgRes)
                            console.log('imgRes.tempFilePath', _this.img);
                        },
                        fail(error) {
                            console.log(error);
                        }
                    },_this);
                })

        },
},
mounted(){
    //调用这个方法
    this.getImage()
}

?在父组件中调用

js：在dada中定义两个变量：img1:null;

?wxml:js

<view class="comprehensive-score">
                    <van-circle wx:if="{{ !img1 }}" bindgetImg="getImg" value="{{ total_score }}" text="{{total_score}}"
                        stroke-width="8" layer-color="#F7F6F5" color="{{gradientColor}}" />
                    <view class="inn" wx:else>
                        <text class="inntext">{{ total_score }}</text>
                        <image mode="aspectFill" src="{{ img1 }}"></image>
                    </view>
                    <text>综合得分</text>
                </view>

?index.js:

 methods: {
        getImg(e) {
            this.setData({ img1: e.detail.tempFilePath })
            console.log("getImg",e.detail.tempFilePath)
        }
    }