Elgato_dark/idraw
1
0
Fork 0
mirror of https://github.com/idrawjs/idraw synced 2026-05-24 10:08:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: core draw context by requestAnimateFrame

Browse source
This commit is contained in:
chenshenhai 2021-05-31 09:03:15 +08:00
parent ce61857caa
commit b7dda1acfc
1 changed files with 63 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

117
packages/core/src/lib/renderer.ts
View file

@ -1,67 +1,76 @@
// import { TypeData, TypeHelperConfig, } from '@idraw/types';
// import util from '@idraw/util';
// import Board from '@idraw/board';
// import { drawContext } from './draw';
// const { requestAnimationFrame } = window;
// const { deepClone } = util.data;
// type QueueItem = { data: TypeData, helper: TypeHelperConfig };
// enum DrawStatus {
// FREE = 'free',
// DRAWING = 'drawing',
// }
// export class Renderer {
// private _queue: QueueItem[] = [];
// private _board: Board;
// private _status: DrawStatus = DrawStatus.FREE;
// constructor(board: Board) {
// this._board = board;
// }
// render(data: TypeData, helper: TypeHelperConfig): void {
// const _data: QueueItem = deepClone({ data, helper }) as QueueItem;
// this._queue.push(_data);
// if (this._status === DrawStatus.FREE) {
// this._status = DrawStatus.DRAWING;
// this._drawFrame();
// }
// }
// private _drawFrame() {
// requestAnimationFrame(() => {
// const item: QueueItem | undefined = this._queue.shift();
// if (item) {
// drawContext(this._board.getContext(), item.data, item.helper);
// this._board.draw();
// this._drawFrame();
// } else {
// this._status = DrawStatus.FREE
// }
// })
// }
// }
import { TypeData, TypeHelperConfig, } from '@idraw/types';
import util from '@idraw/util';
import Board from '@idraw/board';
import { drawContext } from './draw';
const { requestAnimationFrame } = window;
const { deepClone } = util.data;
type QueueItem = { data: TypeData, helper: TypeHelperConfig };
enum DrawStatus {
FREE = 'free',
DRAWING = 'drawing',
}
export class Renderer {
private _board: Board;
private _queue: QueueItem[] = [];
private _board: Board;
private _status: DrawStatus = DrawStatus.FREE;
constructor(board: Board) {
this._board = board;
}
render(data: TypeData, helper: TypeHelperConfig): void {
drawContext(this._board.getContext(), data, helper);
this._board.draw();
const _data: QueueItem = deepClone({ data, helper }) as QueueItem;
this._queue.push(_data);
if (this._status === DrawStatus.FREE) {
this._status = DrawStatus.DRAWING;
this._drawFrame();
}
}
}
private _drawFrame() {
requestAnimationFrame(() => {
const item: QueueItem | undefined = this._queue.shift();
if (item) {
drawContext(this._board.getContext(), item.data, item.helper);
this._board.draw();
this._drawFrame();
this._retainQueueOneItem();
} else {
this._status = DrawStatus.FREE
}
})
}
private _retainQueueOneItem() {
if (this._queue.length === 0) {
return;
}
const lastOne = deepClone(this._queue[this._queue.length - 1]);
this._queue = [lastOne];
}
}
// import { TypeData, TypeHelperConfig, } from '@idraw/types';
// import Board from '@idraw/board';
// import { drawContext } from './draw';
// export class Renderer {
// private _board: Board;
// constructor(board: Board) {
// this._board = board;
// }
// render(data: TypeData, helper: TypeHelperConfig): void {
// drawContext(this._board.getContext(), data, helper);
// this._board.draw();
// }
// }