@actly/drawjs v0.1.1

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/drawjs@0.1.1/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

用法

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;
}

可选渲染元素

图像 image(options: ITexture): Draw

类型声明

export interface ITexture extends IDisplayObject {
  image: HTMLImageElement;
}

文本 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;
}

圆形 circle(options: ICircle): Draw

类型声明

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

矩形 rectangle(options: IRectangle): Draw

类型声明

export interface IRectangle extends IDisplayObject {
  color?: typeColor;
  borderWidth?: number;
  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