nxs
nxs
  • 发布:2024-03-20 11:04
  • 更新:2024-03-20 15:12
  • 阅读:75

页面中直接调用没问题,封装成组件,就没任何效果,也没报错

分类:uni-app

将<template>中的代码放到页面中,
script中的onReady(){}也整个放到页面中,canvas就可以绘制出图案。
但是做成组件,然后在页面中引用,就只有一个背景色,但是没有绘制出图案。
请问是哪里的问题?
另外,在可以绘制出水印的情况下,如果把onReady(){}中的代码,封装成一个方法,放到methods中,然后在onReady中调用,也无法绘制出图案
代码如下:

<template>  
    <view class="watermark">  
        <canvas id="hxbu" canvas-id="hxbu" style="width: 400px; height: 900px"/>  
    </view>  
</template>  

<script>  
export default {  
    name: 'Watermark',  
    props: {  
        phone: {  
            type: String,  
            default: '123'  
        },  
        username: {  
            type: String,  
            default: '姓名'  
        }  
    },  
    data() {  
        return {}  
    },  
    onReady() {  
        const phone = this.phone  
        const username = this.username  

        let x = 50  
        let y = 100  

        const angle = 325 * Math.PI / 180  

        const ctx = uni.createCanvasContext('hxbu')  
        ctx.setFontSize(20)  
        ctx.setFillStyle('#888')  

        for (let i = 1; i < 28; i++) {  
            // 保存当前的绘图上下文状态  
            ctx.save()  

            // 将绘图上下文旋转325度  
            ctx.translate(x, y) // 移动到指定的绘制位置  
            ctx.rotate(angle)  

            // 绘制文字  
            ctx.fillText(phone, 0, 0, 100) // 从(0, 0)开始绘制  
            ctx.fillText(username, 5, 30, 95)  

            // 恢复绘图上下文状态  
            ctx.restore()  

            // 更新x和y坐标,以便下一次绘制  
            if (i % 4 === 0) {  
                x = 50  
                y += 180  
            } else {  
                x += 130  
            }  
        }  

        ctx.draw()  
    },  
}  
</script>  

<style lang="scss">  
.watermark {  
    position: fixed;  
    top: 0;  
    z-index: 20000;  

    width: 100%;  
    opacity: 0.1;  
    background: orange;  

    pointer-events: none;  
}  
</style>  
2024-03-20 11:04 负责人:无 分享
已邀请:
JXWang

JXWang

onReady是页面生命周期,监听页面初次渲染完成,组件没有这个生命周期。可以换成 mounted

  • nxs (作者)

    感谢回复

    有换成mounted,也是不行的。不是onReady中的代码没有执行,是执行了,但是没有绘制出文字。

    在onReay中多处做了输出,分别是开始的位置,for循环中,和ctx.draw()之后,都做了console.log,都是可以正常输出的,但是就是没有绘制内容出来。

    另外,整个watermark的css中有写background: orange,这个也是生效的

    2024-03-20 17:12

  • JXWang

    回复 nxs: 运行到哪个平台?是安卓吗

    2024-03-20 18:54

  • JXWang

    创建 canvas 绘图上下文(指定 canvasId)。在自定义组件下,第二个参数传入组件实例this,以操作组件内 <canvas/> 组件

    2024-03-20 19:07

  • nxs (作者)

    回复 JXWang: 非常感谢,再次去看了文档,原来您的回复在文档中就有,谢谢!

    2024-03-21 09:38

  • JXWang

    回复 nxs: 不客气

    2024-03-21 10:08

要回复问题请先登录注册