Blog
首页
文档
收藏
关于
  • 在线转换时间戳 (opens new window)
  • 在线压缩图片 (opens new window)
  • Float-Double转二进制 (opens new window)
  • 文件转Hex字符串 (opens new window)

HiuZing

🍑
首页
文档
收藏
关于
  • 在线转换时间戳 (opens new window)
  • 在线压缩图片 (opens new window)
  • Float-Double转二进制 (opens new window)
  • 文件转Hex字符串 (opens new window)
  • 前端面试题

  • JavaScript

  • Vue2

  • port

  • CSS

  • Node.js

  • JavaScript优化

  • uniapp

  • Mini Program

  • TypeScript

  • 面向对象编程

  • UI组件

  • Plugin

  • Vue3

  • 性能优化

  • Axios

  • 状态管理

  • React

  • Mock

  • Icon

  • Template

  • 构建工具

  • 项目规范配置

  • Taro

    • 踩坑

      • Taro插件依赖 "@tarojs/plugin-html" 加载失败
      • Taro Image
      • Taro中使用canvas
    • 编译配置

  • SVG

  • React Native

  • 前端
  • Taro
  • 踩坑
HiuZing
2023-07-11

Taro中使用canvas

  1. 需要用setTimeout延时绘制,否则可能会出现图片不显示

  2. 使用fillText()文字错位问题解决方案

    const context = wx.createCanvasContext('firstCanvas');
    context.fillText('以字生图',0, 0);
    
    1
    2

在这里插入图片描述

明明设置在左上角x和y轴0点处开始,但是却看不到了

Y轴偏移量错位一定是小程序的Bug

经过测试我发现,fillText(text,x, y),轴的y实际上不是指文字左上角到画布零点的距离,而是指文字的左下角到零点的距离。 所以我们只需要在原本想要设置的y轴上再加上文本的宽度就行了

const context = wx.createCanvasContext('firstCanvas');
const fontWidth= context.measureText('以').width;//获取文本宽度
context.fillText('以字生图', 0, 0 + fontWidth);//本来设置的0,现在需要加上fontWidth
1
2
3
  1. wx.canvasToTempFilePath()保存图片为空白图片?

一:需要加加延迟 二:画布过大在ios上会显示空白,三初始化画布大小必须同步,异步也会导致ios空白,

  1. canvas drawImage绘制两张图片,只绘制成功一张

    1. 确保两张图片已经加载完成

    2. 绘制顺序问题:绘制的顺序会影响图片的显示顺序,后绘制的图片会覆盖先绘制的图片。请确保先绘制的图片不会被后绘制的图片覆盖。可以在绘制方法中先绘制第一张图片,然后再绘制第二张图片。

      image1.onload = function() {
        context.drawImage(image1, x1, y1, width1, height1);
        // 绘制第一张图片后再绘制第二张图片
        image2.onload = function() {
          context.drawImage(image2, x2, y2, width2, height2);
        };
      };
      
      1
      2
      3
      4
      5
      6
      7
上次更新: 2024/08/14, 04:14:33
Taro Image
编译配置详情

← Taro Image 编译配置详情→

最近更新
01
React Native 使用SVG
08-13
02
Docker基础命令
08-04
03
算数逻辑单元
07-30
更多文章>
Theme by Vdoing | Copyright © 2021-2024 WeiXiaojing | 友情链接
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式