Helper class to visualize the result of a MediaPipe Vision task.
Signature:
export declare class DrawingUtils
Constructors
| Constructor | Modifiers | Description |
|---|---|---|
| (constructor)(gpuContext) | Creates a new DrawingUtils class. | |
| (constructor)(cpuContext, gpuContext) | Creates a new DrawingUtils class. |
Methods
| Method | Modifiers | Description |
|---|---|---|
| clamp(x, x0, x1) | static |
Restricts a number between two endpoints (order doesn't matter). |
| close() | Frees all WebGL resources held by this class. | |
| drawBoundingBox(boundingBox, style) | Draws a bounding box.This method can only be used when DrawingUtils is initialized with a CanvasRenderingContext2D. |
|
| drawCategoryMask(mask, categoryToColorMap, background) | Draws a category mask using the provided category-to-color mapping. | |
| drawCategoryMask(mask, categoryToColorMap, background) | Draws a category mask using the provided color array. | |
| drawConfidenceMask(mask, defaultTexture, overlayTexture) | Blends two images using the provided confidence mask.If you are using an ImageData or HTMLImageElement as your data source and drawing the result onto a WebGL2RenderingContext, this method uploads the image data to the GPU. For still image input that gets re-used every frame, you can reduce the cost of re-uploading these images by passing a HTMLCanvasElement instead. |
|
| drawConnectors(landmarks, connections, style) | Draws lines between landmarks (given a connection graph).This method can only be used when DrawingUtils is initialized with a CanvasRenderingContext2D. |
|
| drawLandmarks(landmarks, style) | Draws circles onto the provided landmarks.This method can only be used when DrawingUtils is initialized with a CanvasRenderingContext2D. |
|
| lerp(x, x0, x1, y0, y1) | static |
Linearly interpolates a value between two points, clamping that value to the endpoints. |
DrawingUtils.(constructor)
Creates a new DrawingUtils class.
Signature:
constructor(gpuContext: WebGL2RenderingContext);
Parameters
| Parameter | Type | Description |
|---|---|---|
| gpuContext | WebGL2RenderingContext | The WebGL canvas rendering context to render into. If your Task is using a GPU delegate, the context must be obtained from its canvas (provided via setOptions({ canvas: .. })). |
DrawingUtils.(constructor)
Creates a new DrawingUtils class.
Signature:
constructor(cpuContext: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, gpuContext?: WebGL2RenderingContext);
Parameters
| Parameter | Type | Description |
|---|---|---|
| cpuContext | CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D | The 2D canvas rendering context to render into. If you are rendering GPU data you must also provide gpuContext to allow for data conversion. |
| gpuContext | WebGL2RenderingContext | A WebGL canvas that is used for GPU rendering and for converting GPU to CPU data. If your Task is using a GPU delegate, the context must be obtained from its canvas (provided via setOptions({ canvas: .. })). |
DrawingUtils.clamp()
Restricts a number between two endpoints (order doesn't matter).
Signature:
static clamp(x: number, x0: number, x1: number): number;
Parameters
| Parameter | Type | Description |
|---|---|---|
| x | number | The number to clamp. |
| x0 | number | The first boundary. |
| x1 | number | The second boundary. The clamped value. |
Returns:
number
DrawingUtils.close()
Frees all WebGL resources held by this class.
Signature:
close(): void;
Returns:
void
DrawingUtils.drawBoundingBox()
Draws a bounding box.
This method can only be used when DrawingUtils is initialized with a CanvasRenderingContext2D.
Signature:
drawBoundingBox(boundingBox: BoundingBox, style?: DrawingOptions): void;
Parameters
| Parameter | Type | Description |
|---|---|---|
| boundingBox | BoundingBox | The bounding box to draw. |
| style | DrawingOptions | The style to visualize the boundin box. |
Returns:
void
DrawingUtils.drawCategoryMask()
Draws a category mask using the provided category-to-color mapping.
Signature:
drawCategoryMask(mask: MPMask, categoryToColorMap: Map<number, RGBAColor>, background?: RGBAColor | ImageSource): void;
Parameters
| Parameter | Type | Description |
|---|---|---|
| mask | MPMask | A category mask that was returned from a segmentation task. |
| categoryToColorMap | Map<number, RGBAColor> | A map that maps category indices to RGBA values. You must specify a map entry for each category. |
| background | RGBAColor | ImageSource | A color or image to use as the background. Defaults to black. |
Returns:
void
DrawingUtils.drawCategoryMask()
Draws a category mask using the provided color array.
Signature:
drawCategoryMask(mask: MPMask, categoryToColorMap: RGBAColor[], background?: RGBAColor | ImageSource): void;
Parameters
| Parameter | Type | Description |
|---|---|---|
| mask | MPMask | A category mask that was returned from a segmentation task. |
| categoryToColorMap | RGBAColor[] | An array that maps indices to RGBA values. The array's indices must correspond to the category indices of the model and an entry must be provided for each category. |
| background | RGBAColor | ImageSource | A color or image to use as the background. Defaults to black. |
Returns:
void
DrawingUtils.drawConfidenceMask()
Blends two images using the provided confidence mask.
If you are using an ImageData or HTMLImageElement as your data source and drawing the result onto a WebGL2RenderingContext, this method uploads the image data to the GPU. For still image input that gets re-used every frame, you can reduce the cost of re-uploading these images by passing a HTMLCanvasElement instead.
Signature:
drawConfidenceMask(mask: MPMask, defaultTexture: RGBAColor | ImageSource, overlayTexture: RGBAColor | ImageSource): void;
Parameters
| Parameter | Type | Description |
|---|---|---|
| mask | MPMask | A confidence mask that was returned from a segmentation task. |
| defaultTexture | RGBAColor | ImageSource | An image or a four-channel color that will be used when confidence values are low. |
| overlayTexture | RGBAColor | ImageSource | An image or four-channel color that will be used when confidence values are high. |
Returns:
void
DrawingUtils.drawConnectors()
Draws lines between landmarks (given a connection graph).
This method can only be used when DrawingUtils is initialized with a CanvasRenderingContext2D.
Signature:
drawConnectors(landmarks?: NormalizedLandmark[], connections?: Connection[], style?: DrawingOptions): void;
Parameters
| Parameter | Type | Description |
|---|---|---|
| landmarks | NormalizedLandmark[] | The landmarks to draw. |
| connections | Connection[] | The connections array that contains the start and the end indices for the connections to draw. |
| style | DrawingOptions | The style to visualize the landmarks. |
Returns:
void
DrawingUtils.drawLandmarks()
Draws circles onto the provided landmarks.
This method can only be used when DrawingUtils is initialized with a CanvasRenderingContext2D.
Signature:
drawLandmarks(landmarks?: NormalizedLandmark[], style?: DrawingOptions): void;
Parameters
| Parameter | Type | Description |
|---|---|---|
| landmarks | NormalizedLandmark[] | The landmarks to draw. |
| style | DrawingOptions | The style to visualize the landmarks. |
Returns:
void
DrawingUtils.lerp()
Linearly interpolates a value between two points, clamping that value to the endpoints.
Signature:
static lerp(x: number, x0: number, x1: number, y0: number, y1: number): number;
Parameters
| Parameter | Type | Description |
|---|---|---|
| x | number | The number to interpolate. |
| x0 | number | The x coordinate of the start value. |
| x1 | number | The x coordinate of the end value. |
| y0 | number | The y coordinate of the start value. |
| y1 | number | The y coordinate of the end value. The interpolated value. |
Returns:
number