DIY.JS 开发文档， 一款专用于DIY定制的Canvas图形库

/* 监听图像选中事件 */
stage.on("active", (e) => {
    
    const shape = e.shape;
    
    if (shape.type === 'Image') {
        // 点击的图像
    } else if (shape.type === 'Text') {
        // 点击的文字
    }
});

/* 监听图像选中事件 */
stage.on("to-do", (e) => {
    
    const shape = e.shape;
    
    if (shape.type === 'Image') {
        // 点击的图像
    } else if (shape.type === 'Text') {
        // 点击的文字
    }
});

const active = stage.getActive();

cosnole.log(active.x); // x坐标
cosnole.log(active.y); // y坐标
cosnole.log(active.w); // w宽度
cosnole.log(active.h); // x高度

import DIY from "@/diy";

const element = document.querySelector("#stage");
const stage = new DIY.Stage(element);

/**
 * 初始化图形，设置坐标位置 (0,0)，初始宽度 100%
 */
const model = new DIY.Image({
    x: 0,
    y: 0,
    url: "https://douyin.nicen.cn/icon/cloth-w.png",
    w: '100%'
});

/* 添加到舞台的背景图层 */
stage.addModel(model)

/* 初始化图形 */
const view = new DIY.Image({
    x: 0,
    y: 0,
    url: "https://douyin.nicen.cn/icon/cloth-w.png",
    w: '100%'
});

/* 添加到舞台的背景图层 */
stage.setView(view);

/* 新增素材 */
stage.add(new DIY.Image({
    url: 'https://douyin.nicen.cn/assets/24/9b1445639f6ef9ee3c0430605ac651ee.png'
}))

// 导出JSON
stage.toJson();

// 导入指定json
stage.loadJson(json);

on(type: string, callback: Function): void;

off(type: string): void;

emit(type: string, event?: any): void;

add(shape: Shape, index?: number): void;

get(name: string): Shape | undefined; 

remove(shape: Shape | string, flag: boolean): void; 

clear(): void; 

clearModel(): void; 

reset(): void; 

scale(zoom: number): void; 

getScale(): number; 

shapes(flag: boolean, index: number): Shape[]; 

render(): void; 

setElementStyle(style: object): void; 

enableMultiActive(): void; 

disableMultiActive(): void; 

getIndex(shape: Shape): number; 

renderModel(): void; 

getCenterPoint(): { x: number, y: number } 

getContext(): CanvasRenderingContext2D; 

createCanvas(w: number, h: number, param?: {}): { elem: HTMLCanvasElement, context: CanvasRenderingContext2D } 

getQueue(): []; 

addQueueTask(task: Function): void; 

clearQueue(): void; 

resetOffset(): void; 

export(config: object): Promise<Blob | string>; 

{
   elem: ['model', 'custom', 'view'], //需要导出的元素，canvas,导出整个画布 背景图、所有图形、DIY区域图
   view: true, //仅导出view区域
   clip: true, //裁剪多余的透明部分
   type: 'base64',//输出二进制还是base64
   filter: false, //是否过滤不可导出的图形
   ratio: 3.5, //导出比例
   size: null, //指定导出的图片大小
   frame: null //图框{height:null,width:null,fillColor:null}
}

addModel(shape: Shape): void; 

bound(): { x: number; y: number; w: number; h: number; _w: number; _h: number; } 

dpr(): number; 

getViewBound(): { x: number; y: number; w: number, h: number, _x: number; _y: number; _w: number; _h: number } 

getView(): Shape; 

getActive(): Shape | null; 

getElement(): HTMLElement; 

getConfig(): { maxWidth: number; maxHeight: number; sensitivity: number; minRotatable: number; themeColor: string; activeColor: string; } 

setConfig(key: any, value: any): void; 

load(json: string | object, flag?: boolean): Shape; 

toJson(): string; 

loadJson(json: object, param: object): void; 

loadJsonWithSnap(json: object, param: object): object;

canMultiActive(): boolean;

r(snapshot: null | object): void;

alter(snapshot : object, flag : boolean): void;

undo(): void;

redo(): void;

snap(): object;

clearSnap(): void;

hiddenOutline(): void;

showOutline(): void;

canShowOutline(): void;

pauseEvent(event: string): void;

resumeEvent(event: string): void;

active(shape: object): void;

clear(): void;

getModelShapes(flag: boolean, index: number): Shape;

stop(): void;

resume(): void;

init(): Promise<boolean>; 

click(x: number, y: number, flag?: boolean): boolean; 

emit(type: string, event?: any): void; 

on(type: string, callback: (event?: any) => void, b: boolean): void; 

off(type: string): void; 

move(pos: { x: number; y: number }[], point: { x: number; y: number }): boolean; 

scale(scale: number): void; 

rotate(rotate: number, coords: { x: number; y: number }[]): boolean; 

up(pos: { x: number; y: number }[]): void; 

tap(pos: { x: number; y: number }[]): void; 

_active(status: boolean): void; 

active(): void; 

render(): void; 

deactivate(flag: boolean): void; 

toggle(): void; 

save(config: Object): void; 

restore(): void; 

toJson(): string; 

bound(): object; 

coords(corner: null | number): [] | object; 

stage(): Stage; 

getIndex(): number; 

ColorBound(): { x: number; y: number; w: number, h: number, _x: number, _y: number, _w: number, _h: number }; 

relative(): object; 

getRotateCoords(): { x: number, y: number }[]; 

getRotateBound(): { x: number; y: number; w: number, h: number, }; 

group(): object; 

setPivot(point?: { x: number; y: number }): void;

getColorBound(): { x: number; y: number; w: number, h: number, _x: number, _y: number, _w: number, _h: number }; 

getReference(): { x: number; y: number; w: number, h: number, _x: number, _y: number, _w: number, _h: number }; 

bindContext(context: CanvasRenderingContext2D): void; 

getContext(): CanvasRenderingContext2D; 

moveIndex(target: number, action: boolean): number; 

moveBottom(): number; 

moveTop(): number; 

forward(): number; 

backward(): number; 

destroy(flag: boolean): void; 

set(config: Record<string, any>): void; 

save(): void; 

restore(snap: object): void; 

props(config: object): object; 

adjustX(gap: number): void; 

adjustY(gap: number): void; 

flipX(): void; 

flipY(): void; 

copy(): void; 

group(): Shape | null; 

ungroup(adjust: boolean, remove: boolean, group?: Shape): void; 

getCenterPoint(find?: boolean): { x: number, y: number }; 

getReferCenterCoords(coord: { x: number, y: number }): { x: number, y: number }; 

setAttr(attr: string, value: any): void; 

each(config: object): void;