更新记录

1.0.0（2024-04-19）

初次发布

平台兼容性

daxiang-nvue-canvas

简介

该组件是为了解决在app端，nvue绘制海报或其他类似的canvas.drawImage需求。因为nvue端的canvas或gcanvas支持度都不太好。 组件采用了app端，跳转一个透明不可见页面的方式，进行vue渲染模式的canvas进行的画布绘制。 同时为了兼容其他端(非app端不能实现透明不可见页面)，采用了组件canvas绘制。

初始化

1、pages.json中定义页面

{
    "path": "uni_modules/daxiang-nvue-canvas/pages/canvas/canvas",
    "style": {
        "navigationBarTitleText": "",
        "navigationStyle": "custom", // 取消本页面的导航栏
        "backgroundColor": "rgba(0,0,0,0)",
        "app-plus": {
            "animationType": "none",
            "background": "transparent", // 背景透明 
            "popGesture": "none" // 关闭IOS屏幕左边滑动关闭当前页面的功能
        }
    }
}

使用方法

1、引入组件

<daxiang-nvue-canvas ref="nvueCanvas" :canvasSize="{width:200,height:200}"></daxiang-nvue-canvas>

2、调用方法

//此处可传入任意绘制需要的数据，当前为绘制一个镂空蒙层图片的示例
let data = {
    circles
};
// 此处事件名可自定义，注意不要与项目中定义的其他uni.$emit事件名冲突，因为在app端启用的uni.$emit和uni.$once进行的canvas绘制通信
let eventName = "blackMarkDraw";
this.$refs.nvueCanvas.draw(data,eventName).then(tempImg=>{
    console.log("画布导出本地路径：",tempImg)
});

3、在canvas-draw.js文件中编写对应的画布绘制代码

// 绘制一个镂空蒙层图片的示例
// 声明的函数名要与调用时传入的eventName一致
export function blackMarkDraw(ctx, {
    canvasSize,
    circles
}, callback) {
    // 绘制黑色透明背景
    ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
    ctx.fillRect(0, 0, canvasSize.width, canvasSize.height);
    circles.forEach(e => {
        const {
            circleX,
            circleY,
            circleRadius
        } = e
        ctx.save();
        ctx.beginPath();
        ctx.arc(circleX, circleY, circleRadius, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.clip();
        // 清除指定位置的像素
        ctx.clearRect(circleX - circleRadius, circleY - circleRadius, circleRadius * 2,
            circleRadius * 2);
        ctx.restore();
    })
    ctx.draw(false, callback)
}