Helper class to visualize the result of a MediaPipe Vision task.
Signature:
export
declare
class
DrawingUtils
Constructors
| Constructor | Modifiers | Description |
|---|---|---|
| Creates a new DrawingUtils class. | ||
| Creates a new DrawingUtils class. |
Methods
| Method | Modifiers | Description |
|---|---|---|
static
|
Restricts a number between two endpoints (order doesn't matter). | |
| Frees all WebGL resources held by this class. | ||
Draws a bounding box.This method can only be used when DrawingUtils
is initialized with a CanvasRenderingContext2D
. |
||
| Draws a category mask using the provided category-to-color mapping. | ||
| Draws a category mask using the provided color array. | ||
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. |
||
Draws lines between landmarks (given a connection graph).This method can only be used when DrawingUtils
is initialized with a CanvasRenderingContext2D
. |
||
Draws circles onto the provided landmarks.This method can only be used when DrawingUtils
is initialized with a CanvasRenderingContext2D
. |
||
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
