Draw.js

适用于浏览器的快速生成海报的 Javascript 库

🚀 功能

• 🧩 图片

• 🔡 文本

• 🟡 圆形

• ⏹ 矩形

📦 安装

npm

npm install @actly/drawjs

浏览器

<script src="/path/to/@actly/drawjs.js"></script>

CDN

<script src="https://cdn.jsdelivr.net/npm/@actly/[email protected]/dist/draw.min.js"></script>

🔧 用法

示例

import Draw, { utils } from '@actly/drawjs'
const bg = require('./assets/bg-poster.png')

const draw = new Draw({
  width: 750,
  height: 1334
})

async function toPoster() {
  // image base64
  const imgSrc = draw.image({
    image: await utils.loadImage(bg)
  })
  .rectangle({
    x: 32,
    y: 0,
    width: 226,
    height: 420,
    color: '#000',
    opacity: 0.5
  })
  .toDataURL()
}
toPoster()

Draw

• options: DrawOptions

| 参数 | 类型 | 默认值 | 备注 | | :----: | :----: | :----: | :--------: | | width | number | 750 | 画布的宽度 | | height | number | 1334 | 画布的高度 |

用法

const draw = new Draw({
  width: 750,
  height: 1334
})

类型声明

interface DrawOptions {
  width: number;
  height: number;
}

export declare class Draw {
  // 原生canvas
  canvas: HTMLCanvasElement;
  // canvas对应的2d context
  context: CanvasRenderingContext2D;
  // 配置项
  __options: DrawOptions;
  constructor(options?: DrawOptions);
  // 绘制文本
  text(options: IText): Draw;
  // 绘制图像
  image(options: ITexture): Draw;
  // 绘制矩形
  rectangle(options: IRectangle): Draw;
  // 绘制圆形
  circle(options: ICircle): Draw;
  // 清理画布
  clear(): void;
  // 导出base64 同canvas.toDataURL
  toDataURL(type?: 'image/png' | 'image/jpeg' | string, quality?: number): string;
}

元素共享参数

• options: IDisplayObject

类型声明

export interface IDisplayObject {
  x?: number;
  y?: number;
  width?: number;
  height?: number;
  rotate?: number;
  opacity?: number;
  beforeRender?: renderHook;
  afterRender?: renderHook;
}

| 参数 | 类型 | 默认值 | 备注 | | :----------: | :------: | :------: | :----------------: | | x | number | 0 | 坐标x | | y | number | 0 | 坐标y | | width | number | 750 | 画布的宽度 | | height | number | 1334 | 画布的高度 | | rotate | number | 0 | 旋转角度，单位：度 | | opacity | number | 1 | 不透明度 |

| 名称 | 类型 | 默认值 | 备注 | | :----------: | :------: | :------: | :----------------: | | beforeRender | function | () => {} | 渲染前的钩子 | | afterRender | function | () => {} | 渲染后的钩子 |

可选渲染元素

图像 image(options: ITexture): Draw

类型声明

export interface ITexture extends IDisplayObject {
  image: HTMLImageElement;
}

| 参数 | 类型 | 默认值 | 备注 | | :-----: | :----: | :----: | :----------------: | | image | HTMLImageElement | - | 用于渲染在画布的img |

文本 text(options: IText): Draw

类型声明

export interface IText extends IDisplayObject {
  text: string;
  justifyAlign?: TextJustifyAlign;
  itemAlign?: TextItemAlign;
  rowSpacing?: number;
  font?: string;
  fontSize?: number;
  fontFamily?: string;
  fontWeight?: string;
  letterSpacing?: number;
  color?: string;
}

| 参数 | 类型 | 默认值 | 备注 | | :----------: | :------: | :------: | :----------------: | | text | string | | 渲染在画布上的文本 | | justifyAlign | TextJustifyAlign | left | 水平对齐方式 | | itemAlign | TextItemAlign | top | 垂直对齐方式 | | rowSpacing | number | 0 | 行间距 | | fontSize | number | 0 | 字体大小 | | fontFamily | string | | 字体 | | fontWeight | string | normal | 字体粗细 | | letterSpacing | number | 0 | 字间距 | | color | string | | 文本颜色 |

圆形 circle(options: ICircle): Draw

类型声明

export interface ICircle extends IDisplayObject {
  color?: typeColor;
  radius: number;
}

| 参数 | 类型 | 默认值 | 备注 | | :----------: | :------: | :------: | :----------------: | | color | string | | 填充颜色 | | radius | number | 0 | 圆的半径 |

矩形 rectangle(options: IRectangle): Draw

类型声明

export interface IRectangle extends IDisplayObject {
  color?: typeColor;
  borderWidth?: number;
  borderColor?: string;
}

| 参数 | 类型 | 默认值 | 备注 | | :----------: | :------: | :------: | :----------------: | | color | string | | 填充颜色 | | borderWidth | number | 0 | 边框的宽度 | | borderColor | string | | 边框的颜色 |

工具方法

import Draw, { utils } from '@actly/drawjs'
import bg from './assets/bg.png'
import font from './assets/font.ttf'

async function loadResource() {
  await utils.loadFont('myFont', font)
  await utils.loadImage(bg)
}

// 或者
async function loadResource() {
  await utils.load('myFont', font)
  await utils.load(bg)
}
loadResource()

• load(srcName: string, url: string): Promise<void>

• load(srcName: string): Promise<HTMLImageElement | void>

加载图片或者字体资源

• loadImage(src: string): Promise<HTMLImageElement | void>

加载图片资源

• loadFont(fontFamily: string, url: string): Promise<void>

加载字体资源

Issues

https://github.com/HeartCNC/drawjs/issues