8***@qq.com
8***@qq.com
  • 发布:2023-05-09 11:37
  • 更新:2023-07-24 14:38
  • 阅读:382

【报Bug】renderjs在制作canvas写字板时,拿到实例后无法调用方法。

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.7.11

手机系统: Android

手机系统版本号: Android 12

手机厂商: 华为

手机机型: 小米11 Ultra

页面类型: vue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
    <!-- <uni-popup ref="signCard" type="center" backgroundColor="#fff"> -->  
    <view class="page flex-row items-center" :canvas="canvas" :change:canvas="canvasSign.setCanvas" :canvasStyle="style"  
        :change:canvasStyle="canvasSign.setStyle">  
        <view class="close flex-row justify-center items-center" @click="closeSignCard">  
            <uni-icons type="closeempty" size="22" color="#333"></uni-icons>  
        </view>  
        <view class="flex-col clear-line" @click="clearBoard">  
            <view class="cancel">取消</view>  
        </view>  
        <canvas @touchstart="canvasSign.beginToDraw" @touchmove="canvasSign.processDraw"  
            @touchend="canvasSign.endDrawing" id="sign" canvas-id="sign" :style="style" class="canvas"></canvas>  
        <view @click="exportSinaature" class="done flex-row justify-center items-center">完成</view>  
    </view>  
    <!-- </uni-popup> -->  
    <!-- <button @click="openSignCard">我是一個打開按鈕</button> -->  
</template>  
<script>  
import {  
    reactive,  
    onMounted,  
    getCurrentInstance  
} from 'vue';  
import {  
    onReady  
} from '@dcloudio/uni-app';  
export default {  
    emits: ['getSignPicture'],  
    data() {  

        return {  
            canvas: null,  
            style:{  
                height: 600 + 'px',  
                width: 400 + 'px'  
            }  
        };  
    },  
    onReady() {  
        // console.log('进入onReady');  
        this.canvas = uni.createCanvasContext('sign', this);  
        console.log('this.canvas', this.canvas);  
    },  
    methods: {  
        exportSinaature() {  
            uni.canvasToTempFilePath({  
                canvasId: 'sign',  
                x: 0,  
                y: 0,  
                fileType: 'png',  
                success(res) {  
                    console.log('成功', res);  
                    // thisconfirmSignCard(res.tempFilePath);  
                },  
                fail(err) {  
                    // console.log('失敗',err);  
                    uni.showToast({  
                        icon: 'none',  
                        title: err.errMsg,  
                        duration: 2500  
                    });  
                }  
            });  
        }  
    }  

};  
</script>  
<script lang="renderjs" module="canvasSign">  
    // let canvas = null  
    export default {  
        data() {  
            return {  
                canvas: null,  
                startPoint: {  
                    x: 0,  
                    y: 0  
                },  
                style: {  
                    height: null,  
                    width: null  
                }  
            };  

        },  
        mounted() {  
            // ...  
            // let dom = document.getElementById('sign');  
            // this.canvas = dom.getContext("2d")  
            // this.canvas = document.getElementById('sign');  
            // console.log('this.canvas', this.canvas);  
            // this.canvas.setStrokeStyle('#333');  
        },  
        methods: {  
            // ...  
            setStyle(newV, oldV, ownerInstance, instance) {  
                this.style = newV;  

                console.log('style', newV);  
            },  
            setCanvas(newV, oldV, ownerInstance, instance) {  
                // canvas = document.getElementById('sign');  
                this.canvas = newV  
                // this.canvas.setStrokeStyle('#333');  
                console.log('canvas', this.canvas);  
            },  
            clearBoard() {  
                canvas.clearRect(0, 0, this.style.height, this.style.width);  
                canvas.draw();  
            },  
            beginToDraw(e) {  
                console.log('點擊', this.canvas);  
                this.canvas.lineWidth = 5;  
                this.canvas.lineCap = 'round';  
                this.canvas.lineJoin = 'round';  
                if (this.canvas) {  
                    this.canvas.beginPath();  
                    this.startPoint.x = e.touches[0].x || e.changedTouches[0].x;  
                    this.startPoint.y = e.touches[0].y || e.changedTouches[0].y;  
                }  
            },  

            processDraw(e) {  
                // console.log('滑動');  
                // this.drawing(e.touches[0].x || e.changedTouches[0].x, e.touches[0].y || e.changedTouches[0].y);  
                // this.startPoint.x = e.touches[0].x || e.changedTouches[0].x;  
                // this.startPoint.y = e.touches[0].y || e.changedTouches[0].y;  
            },  

            drawing(x, y) {  
                // console.log('canvas', canvas);  
                canvas.moveTo(this.startPoint.x, this.startPoint.y);  
                canvas.lineTo(x, y);  
                canvas.stroke();  
                canvas.draw(true);  
            },  

            endDrawing(e) {  
                console.log('结束啦', this.canvas)  
                this.startPoint.x = 0;  
                this.startPoint.y = 0;  
            }  
        }  
    };  
</script>  
<style scoped>  
    .canvas {  
        flex: 1 1 auto;  
        color: #000;  
    }  

    .cancel {  
        color: #333;  
        font-size: .9rem;  
        font-weight: 600;  
        transform: rotate(90deg);  
    }  

    .page {  
        width: 100%;  
        height: 100vh;  
        overflow: hidden;  
    }  

    .clear-line {  
        height: 88%;  
        width: 55px;  
        border-right: dashed 1px #979797;  
        justify-content: flex-end;  
        padding-bottom: 1rem;  
    }  

    .done:active {  
        transform: scale(.9) rotate(90deg);  
        transition: all .3s ease;  
    }  

    .done {  
        position: absolute;  
        bottom: 8%;  
        right: 5%;  
        width: 3.2rem;  
        height: 1.9rem;  
        line-height: 1.9rem;  
        background-color: #3173F6;  
        color: #fff;  
        font-size: .9rem;  
        font-weight: 500;  
        border-radius: .25rem;  
        transform: rotate(90deg);  
        z-index: 999;  
        transition: all .3s ease;  

    }  

    .close:active {  
        transform: scale(.9);  
        transition: all .3s ease;  
    }  

    .close {  
        position: absolute;  
        right: 5%;  
        top: 3%;  
        font-weight: 600;  
        width: 3rem;  
        height: 3rem;  
        border-radius: 50%;  
        background-color: #fff;  
        box-shadow: 0 0 0 3px #F2F3F7;  
        z-index: 999;  
        transition: all .3s ease;  
    }  
</style>

操作步骤:

拿到实例后,用户触摸并滑动 实现写字板功能。

预期结果:

成功绘出路径

实际结果:

调用canvas 方法失败。

bug描述:

App 环境下,使用uni.createCanvasContext() 创建canvas 实例,传递给renderjs 模块,使用实例调用canvas方法,全部报错this.canvas.beginPath is not a function。 官方说renderjs可以实现更加流畅的canvas 动画,却没有例子。 用普通VUE实现写字板非常的卡顿, 所以尝试renderjs。试了一天都没有成功,求解啊 是我用的方式不对吗?急急急急急急急急!!!!!!!!! 上传的代码我注释了滑动 @touchmove的部分的回调 processDraw, @touchstart @touchend 只开了这两个事件做方法调用测试。

2023-05-09 11:37 负责人:无 分享
已邀请:
YUANRJ

YUANRJ

s***@sgltech.cn

s***@sgltech.cn

大佬解决了吗

要回复问题请先登录注册