V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xiaohantx
V2EX  ›  微信

关于微信小程序 canvas 2d 的问题,感觉这块内容好少

  •  
  •   xiaohantx · 203 天前 · 1226 次点击
    这是一个创建于 203 天前的主题,其中的信息可能已经有所发展或是发生改变。
    canvasToTempFilePath 这个 Api 在 Canvas 里转的文件不能显示吗?
    ios 安卓开发者工具都正常,真机模拟(pc 小程序)和 pc 小程序时候都空白,看显示 wxfile://temp/地址

    还有网页
    https://cdnjson.com/image/image.8Guvk
    小程序
    https://cdnjson.com/image/image.8G2LB

    为啥一套代码网页会大那么多。。。

    非 2d 的好像还好,type="2d"这块感觉内容很少,canvasToTempFilePath 有 canvas 和 canvasId 两个参数,我看网页好像不支持 canvasid
    12 条回复    2024-05-16 13:47:39 +08:00
    YorkWong
        1
    YorkWong  
       203 天前
    一切以真机为准
    xiaohantx
        2
    xiaohantx  
    OP
       203 天前
    @YorkWong 就是真机下不统一呀....ios,安卓目前一样,pc 真机目前不显示,网页真机目前不知道为什么倍数放大
    HTML001
        3
    HTML001  
       203 天前
    小程序就这样,某些 API 在 IOS 和安卓表现不一样,在真机和开发者工具不一样,在不同版本的微信上面表现不一样,一些冷门 API 最容易出现这些问题
    Grapevine
        4
    Grapevine  
       203 天前
    小程序真的是毒瘤。。
    toesbieya
        5
    toesbieya  
       203 天前
    canvas 2d 用 toDataURL 获取 base64 然后自己写入本地文件
    大很多可能移动设备 dpi 较高,自己缩放 canvas
    xiaohantx
        6
    xiaohantx  
    OP
       203 天前
    @toesbieya 我输出 devicePixelRatio 的值我看完全一样,width,height 也都一样就很疑惑,写入本地文件的时候是否会向用户申请写入权限。。
    xiaohantx
        7
    xiaohantx  
    OP
       203 天前
    ```
    const drawCanvas = (canvasId, data) => {
    uni.createSelectorQuery().select(canvasId).fields({
    node: true,
    size: true
    }).exec(res => {
    // 处理数据
    demoList[0].value = data.levelOne ?? 0
    demoList[1].value = data.levelTwo ?? 0
    demoList[2].value = data.levelThree ?? 0
    const {
    devicePixelRatio,
    screenWidth
    } = uni.getSystemInfoSync()
    const rpx = devicePixelRatio
    const canvas = res[0].node
    let ctx = canvas.getContext('2d')
    // 初始化画布大小
    canvas.width = res[0].width * rpx
    canvas.height = res[0].height * rpx
    // 获取结束
    const x = res[0].width / 2 * rpx;
    const y = res[0].height / 2 * rpx;
    const lineWidth = 20 * rpx;
    const radius = (res[0].height / 2) * rpx - (lineWidth / 2) // 半径
    const sumResult = canvasId === '#chart' ? data.errorTotal : data.alertTotal;
    let startAngle = 0;
    demoList.map(item => {
    // 绘制数组中的百分比
    ctx.beginPath();
    console.log('sum', sumResult)
    let angle = (item.value / sumResult) * 2 * Math.PI
    ctx.arc(x, y, radius, startAngle, startAngle + angle);
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = item.color;
    ctx.stroke();
    startAngle += angle
    })
    // 文字颜色
    ctx.fillStyle = "#1D2129"
    ctx.font = `${30 * rpx}px sans-serif`
    ctx.textAlign = 'center'
    // // 文字位置
    // // 插入文字
    ctx.fillText(sumResult, canvas.width / 2, y)
    // // 文字大小
    ctx.fillStyle = "#86909C"
    ctx.font = `${12 * rpx}px sans-serif`
    ctx.textAlign = 'center'
    // // 文字颜色
    // // 插入文字
    ctx.fillText('故障总计(台)', canvas.width / 2, y + (20 * rpx))
    uni.canvasToTempFilePath({
    canvas: canvas,
    success: function(res) {
    if (canvasId === '#chart') {
    canvasSrc1.value = res.tempFilePath;
    } else {
    canvasSrc2.value = res.tempFilePath;
    }
    },
    fail: function(res) {
    console.log(222, res)
    }
    })
    })
    }
    ```
    lukesy
        8
    lukesy  
       203 天前
    这个 api 没有问题的
    lukesy
        9
    lukesy  
       203 天前
    你如果要做海报 你直接用这个 https://github.com/Kujiale-Mobile/Painter
    Ashore
        10
    Ashore  
       203 天前
    我用的这个 https://kiccer.github.io/wx-canvas-2d/ 感觉还可以。
    uniapp 可以用这个 https://ext.dcloud.net.cn/plugin?id=2389
    toesbieya
        11
    toesbieya  
       202 天前
    uniapp 啊 他那个 canvas 自己有做缩放,h5 上自己创建 canvas 元素应该就正常了
    yuyuf
        12
    yuyuf  
       202 天前
    空白问题可能是 canvas 还没有绘制完成。可以调用 cavnas.draw() 后,暂停 200ms, 再调 canvasToTempFilePath
    分辨率问题,尽量手动设置 canvas 的大小,还有 destWidth ,destHeight 这两个参数
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5211 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 03:51 · PVG 11:51 · LAX 19:51 · JFK 22:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.