Как использовать OffscreenCanvas в проекте TypeScript

Question

Я бы хотел использовать OffscreenCanvas в проекте машинописного текста, но я не знаю, как это сделать.Когда я пытаюсь:

let offscreen = new OffscreenCanvas(256, 256);

, мой иде говорит: «Не удается найти имя OffscreenCanvas».

Есть подсказки?

Answer 1

В настоящее время вам необходимо изменить lib.dom.d.ts или аналогичный.

В node_modules/typescript/lib/lib.dom.d.ts найдите interface HTMLCanvasElement extends HTMLElement и добавьте строки

interface HTMLCanvasElement extends HTMLElement {
    // ...
    transferControlToOffscreen(): OffscreenCanvas;
}

interface OffscreenCanvasRenderingContext2D extends CanvasState, CanvasTransform, CanvasCompositing, CanvasImageSmoothing, CanvasFillStrokeStyles, CanvasShadowStyles, CanvasFilters, CanvasRect, CanvasDrawPath, CanvasUserInterface, CanvasText, CanvasDrawImage, CanvasImageData, CanvasPathDrawingStyles, CanvasTextDrawingStyles, CanvasPath {
    readonly canvas: OffscreenCanvas;
}
declare var OffscreenCanvasRenderingContext2D: {
    prototype: OffscreenCanvasRenderingContext2D;
    new(): OffscreenCanvasRenderingContext2D;
}
interface OffscreenCanvas extends EventTarget {
    width: number;
    height: number;
    getContext(contextId: "2d", contextAttributes?: CanvasRenderingContext2DSettings): OffscreenCanvasRenderingContext2D | null;
}
declare var OffscreenCanvas: {
    prototype: OffscreenCanvas;
    new(width: number, height: number): OffscreenCanvas;
}

Инаконец, отредактируйте определения Transferable в lib.dom.d.ts и lib.webworker.d.ts:

type Transferable = ArrayBuffer | MessagePort | ImageBitmap | OffscreenCanvas;

На этом этапе вы поработаете с функциями, чтобы все изменить.

Также обратите внимание: OffscreenCanvas s 'width и height элементы могут быть изменены, и при использовании canvas.transferControlToOffscreen() width и height элемента будут синхронизироваться в следующем кадре, если они будут изменены.

Обратите внимание, что это не работает с контекстами webgl, поскольку это немного более подробно.Или, скорее, копировать так много, что в этом нет смысла, если только вы не пытаетесь его настроить.

Это глупо, но работает.В идеале вы должны вернуться и сделать пиар на машинке, но сейчас этого более чем достаточно.

Answer 2

Вы можете установить @types/offscreencanvas в свой проект.

Пряжа

yarn add @types/offscreencanvas

npm

npm i @types/offscreencanvas

Теперь наслаждайтесь!

Для более https://www.npmjs.com/package/@types/offscreencanvas

Answer 3

Все переменные нуждаются в определении типа в Typescript, поэтому он называется Typescript.Когда у нас нет определений типов для объекта, мы можем сами определить тип или использовать любой:
let offscreen: any = new OffscreenCanvas(256, 256);

Обратите внимание, что использование любого не рекомендуется в Typescript, если вы делаете это для каждогопеременная, которую вы также можете не использовать Typescript.

Читайте о файлах объявлений здесь: https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html