kiccer / wx-canvas-2d

微信小程序 canvas-2d 绘图工具🖌️🧑‍🎨 | 支持按需加载🍃,支持内容配置🧩,支持功能扩展🔥 | 适配各种机型📱,超轻量☁️,超易用⚪,无需学习📚️,直接上手🚀
https://kiccer.github.io/wx-canvas-2d/
MIT License
86 stars 10 forks source link

建议绘制文本加上自定义字体相关 api #27

Closed Jasery closed 5 months ago

Jasery commented 5 months ago

对于绘制分享海报类场景,还是有自定义字体的需求,小程序的 canvas 本身是支持的,示例见基础能力 / 画布 / 介绍

kiccer commented 5 months ago
// 引入 `wx-canvas-2d` 插件
import {
    WxCanvas2d
} from 'wx-canvas-2d'

// 实例化对象
const canvas = new WxCanvas2d()

// 创建画布
canvas.create({
    query: '.poster-canvas', // 必传,canvas元素的查询条件
    rootWidth: 750, // 参考设备宽度 (即开发时UI设计稿的宽度,默认375,可改为750)
    bgColor: '#fff', // 背景色,默认透明
    component: this, // 自定义组件内需要传 this
    radius: 16 // 海报图圆角,如果不需要可不填
})

wx.loadFontFace({
    family: 'TencentSans',
    source: 'url("https://h5app.qq.com/act/TEG/tencent_font_switch_w7w3/fonts/TencentSans-W3.woff2")',
    scopes: ['webview', 'native'],
    success: (res) => {
        canvas.fontFamily = 'TencentSans'
    },
    fail: (res) => {
        console.log(res)
    },
    complete: (res) => {
        console.log(res.status)
    }
})