u | 您所在的位置:网站首页 › uniapp生成海报插件 › u |
更新记录
3.0.2(2023-02-17)
修复打包后 package.json main 字段索引异常
修复打包后混淆 Typescript 类型与 JS 文件
3.0.0(2023-01-03)
支持海报绘制 aligin (left、center、right)去除 center 字段
项目仓库管理采用 Monorepo 项目架构搭建,优化构建系统
清除项目依赖,清除 lodash 等工具库的使用
文档系统迁移(未完成)
新增 vite and hb 运行测试用例(均测试通过)
优化类型命名
查看更多
平台兼容性
Vue2
Vue3
√
√
App
快应用
微信小程序
支付宝小程序
百度小程序
字节小程序
QQ小程序
app-vue app-nvue
√
√
√
√
√
√
钉钉小程序
快手小程序
飞书小程序
京东小程序
×
×
×
×
H5-Safari
Android Browser
微信浏览器(Android)
QQ浏览器(Android)
Chrome
IE
Edge
Firefox
PC-Safari
√
√
√
√
√
√
√
√
√
创建绘制海报canvas矩形方法,内置了图片绘制,圆角矩形绘制,换行字体绘制等方法。 接近原生开发体验,上手快,只需考虑业务逻辑,而不用考虑其他问题。 拥有良好的语法架构,不会在绘制uni/wx矩形时陷入回调地狱。 支持原生小程序,与uniapp多端应用。当是环境为原生小程序时,自动切换为性能更好的type2d绘制方式。 将复杂的逻辑组合为简单的方法,扩展性强,可使用 use|useCtx 引入扩展。 支持typescript,支持vue3模板,具体使用参考 useDrawPoster。 API 文档:u-draw-poster 插件市场:dcloud/u-draw-poster ⚙️ Install pnpm add u-draw-poster --dev # Or Yarn yarn add u-draw-poster --dev 📖 Usage 1. Create Template // 注意:如果使用 HBuilder 引入, 需要引入 '@/js_sdk/u-draw-poster' import { useDrawPoster } from 'u-draw-poster' export default { async onReady() { // 传入选择器, 初始化绘制工具(注意, 不需要传入#符号) 当微信小程序时, 将自动启用type2d绘制 const dp = await useDrawPoster('canvas', { width: 100, height: 100 }) } } 2. Draw Content // 绘制背景与文字 dp.draw((ctx) => { ctx.fillStyle = '#F4F4F4' ctx.fillRect(0, 0, dp.canvas.width, dp.canvas.height) ctx.textBaseline = 'top' ctx.textAlign = 'start' ctx.fillStyle = 'white' ctx.font = `bold ${22}px sans-serif` ctx.fillText('周先生', dp.canvas.width / 2, 38.5) }) // 绘制图片内容 dp.draw(async (ctx) => { // ....... })值得注意的是, draw方法会自动的执行 ctx.save/ctx.restore, 不需要人为操纵绘画栈。 dp.draw((ctx) => { /* ... */ }) // 相当于 ctx.save() /* ... */ ctx.restore() 3. Draw Renderdp.draw 并不会马上绘制,只是将该任务添加到了任务栈,需要使用 dp.render 函数进行绘制,该函数在绘制完毕后将弹出所有任务。 dp.render 在非 2d 绘画中,执行绘画任务完毕后,将自动执行 ctx.draw 方法,并在 draw 绘画才算异步结束。 dp.draw((ctx) => { /* ... */ }) dp.draw(async (ctx) => { /* ... */ }) // 由于每个任务都有可能会有异步的绘制任务, 所以得需要使用await等待绘制 const result = await dp.render() // 绘制成功将返回每个任务的绘制状况组成的数组 console.log('draw绘制状况:', result) // draw绘制状况: [true]当全部同步绘制时,将会出现绘制时间保持不一致的情况。这样就会导致一个问题,绘制图层覆盖导致显示未达到预期效果,之所以设计为异步等待,也是为了绘制图层能保持一致顺序。 4. Create Image如需要保存为图片时,可以使用 dp.create 进行创建图片本地地址,在由 wx 或 uni 的 api 进行保存。 dp.draw(async (ctx) => { /* ... */ }) const result = await dp.render() const posterImgUrl = await dp.create() console.log('draw绘制状况:', result) // [true] console.log('绘制生成本地地址:', posterImgUrl) // ...tmp...你也可以不使用 dp.render 方法,当调用 dp.create 时会自动检测任务列表,如果有则执行绘制任务后在创建地址。 dp.draw(async (ctx) => { /* ... */ }) // 跳过drawPoster.render直接生成地址 const posterImgUrl = await dp.create() console.log('绘制生成本地地址:', posterImgUrl) 博客:Mr.Mao'blog 邮箱:[email protected] |
CopyRight 2018-2019 实验室设备网 版权所有 |