绘制多端海报工具，支持uni多端与微信环境执行

绘制海报工具简述

• 创建绘制海报canvas矩形方法，内置了图片绘制，圆角矩形绘制，换行字体绘制等方法。

• 接近原生开发体验，上手快，只需考虑业务逻辑，而不用考虑其他问题。

• 拥有良好的语法架构，不会在绘制uni/wx矩形时陷入回调地狱。

• 支持原生小程序，与uniapp多端应用。当是环境为原生小程序时，自动切换为性能更好的type2d绘制方式。

• 将复杂的逻辑组合为简单的方法，扩展性强，可使用 use|useCtx 引入扩展。

• 支持typescript，支持vue3模板

• 支持声明式绘制扩展，自定义海报必备 具体使用参考 draw-painter

npm i --save-dev u-draw-poster

1. 创建海报绘制工具

<canvas canvas-id="canvas" id="canvas" type="2d" style="width:100px; height:100px" />

// 注意：如果使用HBuilder引入, 需要引入 '@/js_sdk/u-draw-poster'
import { useDrawPoster } from 'u-draw-poster'
async onReady() {
 // 传入选择器, 初始化绘制工具, 当微信小程序时, 将自动启用type2d绘制
 const dp = await useDrawPoster("canvas", {
 // 设置画布宽高
 width: 100,
 height: 100
 })
}

2. 绘制任意内容

// 绘制背景与文字
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) => {
 await ctx.drawImage('...')
})

dp.draw((ctx) => {/* ... */})
// 相当于
ctx.save()
/* ... */
ctx.restore()

3. 进行绘制

dp.draw((ctx) => {/* ... */})
dp.draw(async (ctx) => {/* ... */})
// 由于每个任务都有可能会有异步的绘制任务, 所以得需要使用await等待绘制
console.log("draw绘制状况:", await dp.render()); // draw绘制状况: [true]

4. 生成图片本地地址

dp.draw(async (ctx) => {/* ... */})
const result = await dp.render();
const posterImgUrl = await dp.create();
console.log("draw绘制状况:", result); // [true]
console.log("绘制生成本地地址:", posterImgUrl); // ...tmp...

dp.draw(async (ctx) => {/* ... */})
// 跳过drawPoster.awaitCreate直接生成地址
const posterImgUrl = await dp.create();
console.log("绘制生成本地地址:", posterImgUrl);

绘制扩展 API

dp.draw(async (ctx) => {
 // ctx.drawImage | ctx.drawRoundImage | ctx.fillWarpText | ....
})

全局实例 API

使用建议

canvas 当做为生成工具

.canvas-hide {
 /* 1 */
 position: fixed;
 right: 100vw;
 bottom: 100vh;
 /* 2 */
 z-index: -9999;
 /* 3 */
 opacity: 0;
}

支持重复调用 (单例模式)

data: () => ({}),
// 不存入实例(推荐)
method: {
 async draw() {
 const dp = await useDrawPoster("canvas")
 //...
 }
},
onReady() {
 this.draw()
 // 重复调用....
 this.draw()
}

// 存入实例(不推荐)
data: () => ({
 dp: null
}),
method: {
 async draw() {
 if (!this.dp) {
 const dp = await useDrawPoster("canvas")
 this.dp = dp
 }
 //...
 }
},
onReady() {
 this.draw()
 // 重复调用....
 this.draw()
}

常见问题

微信小程序手机浏览空白

微信小程序无法真机调试

绘制完毕后没有效果

<!-- #ifdef MP-WEIXIN -->
<canvas id="canvas" type="2d" style="width: 300px; height: 300px" />
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<canvas canvas-id="canvas" id="canvas" style="width: 300px; height: 300px" />
<!-- #endif -->

绘制多个图片加载慢

dp.draw(async (ctx) => {
 // // 用户头像
 await ctx.drawRoundImage(headImgUrl, 39, 790, 90, 90, 100);
 await Promise.all([
 ctx.drawImage('/static/logo1.png', 20, 20, 35, 35),
 ctx.drawImage('/static/tp.png', 19, 86, 612, 459),
 ctx.drawImage('/static/bw.png', 188, 559, 274, 50),
 // // 用户二维码
 ctx.drawImage(codeImgUrl, 518, 780, 92, 92),
 ]);
});