评论

u-draw-poster canvas 海报绘制工具

绘制海报工具

绘制海报工具简述

  • 创建绘制海报canvas矩形方法,内置了图片绘制,圆角矩形绘制,换行字体绘制等方法。
  • 接近原生开发体验,上手快,只需考虑业务逻辑,而不用考虑其他问题。
  • 拥有良好的语法架构,不会在绘制uni/wx矩形时陷入回调地狱。
  • 支持原生小程序,与uniapp多端应用。当是环境为原生小程序时,自动切换为性能更好的type2d绘制方式。
  • 将复杂的逻辑组合为简单的方法,扩展性强,可使用 use|useCtx 引入扩展。
  • 支持typescript,支持vue3模板,具体使用参考 useDrawPoster
  • 更加强大的图片绘制与裁剪方法(object-fit)

api文档:u-draw-poster

插件市场:dcloud/u-draw-poster

npm 安装插件

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

1. 创建海报绘制工具

<!-- #ifdef MP-WEIXIN -->
<canvas id="canvas" type="2d" style="width:100px; height:100px" />
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<canvas canvas-id="canvas" id="canvas" style="width:100px; height:100px" />
<!-- #endif -->
// 注意:如果使用HBuilder引入, 需要引入 '@/js_sdk/u-draw-poster'
import DrawPoster from 'u-draw-poster'
async onReady() {
 // 传入选择器, 初始化绘制工具(注意, 不需要传入#符号) 当微信小程序时, 将自动启用type2d绘制
 const dp = await DrawPoster.build("canvas")   
}

2. 设置画布尺寸

// 设置长高为100px的矩形宽高
dp.canvas.width = 100
dp.canvas.height = 100

3. 绘制任意内容

// 绘制背景与文字
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()

4. 进行绘制

dp.draw并不会马上绘制,只是将该任务添加到了任务栈,需要使用dp.awaitCreate函数进行绘制,该函数在绘制完毕后将弹出所有任务。
dp.awaitCreate在非2d绘画中,执行绘画任务完毕后,将自动执行ctx.draw方法,并在draw绘画才算异步结束。

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

5. 生成图片本地地址

如需要保存为图片时,可以使用dp.createImgUrl 进行创建图片本地地址,在由wxuniapi进行保存。

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

你也可以不使用dp.awaitCreate方法,当调用dp.createImagePath时会自动检测任务列表,如果有则执行绘制任务后在创建地址。

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

绘制扩展 API

DrawPoster 在创建时,会自动的向ctx(画笔)添加/覆盖扩展方法,以便构建海报矩形。

目前支持绘制图片、圆角图片、绘制裁剪图片(object-fit)、换行字体、圆角矩形、圆角矩形边框、绘制二维码。

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

具体查看API文档:u-draw-poster

全局实例 API

DrawPoster 的静态与扩展方法,除了最常用的:绘制节点、绘画构建、创建绘制、创建图片,以及还有另外的扩展功能:绘画构建、挂载全局扩展、挂载绘制扩展、全局画笔、等待绘制、停止绘画。

具体查看API文档:u-draw-poster

最后一次编辑于  2021-01-02  
点赞 0
收藏
评论

2 个评论

  • 猛男陈阔
    猛男陈阔
    2020-12-08

    pointer貌似很好用 还会有一个可视化的海报生成器

    可视化地址:https://lingxiaoyi.github.io/painter-custom-poster/

    2020-12-08
    赞同
    回复 1
    • 腿毛大人
      腿毛大人
      2021-01-02
      罪恶的 github.io ...,这个我也看了,可是当遇到插件无法满足的情况却很难进行下一步扩展
      2021-01-02
      回复
  • TNT
    TNT
    2020-11-19

    可以再封装的简单点。https://github.com/Kujiale-Mobile/Painter

    2020-11-19
    赞同
    回复 2
    • 腿毛大人
      腿毛大人
      2021-01-02
      对象形式有好也有不好的地方,我的主要初衷是做一个拥有基本的绘制方法且扩展性极强的绘制工具集
      2021-01-02
      回复
    • 腿毛大人
      腿毛大人
      2021-01-02
      当然,这种方式十分简单,只不过有图片绘制时的效率就不会显得那么高效,所以对象形式会在之后以扩展插件的形式发布
      2021-01-02
      回复
登录 后发表内容