Compartilhar via


@microsoft/live-share-canvas package

Classes

DryCanvas

Represents a canvas suitable for "dry ink", i.e. the persistent drawing. DryCanvas renders synchonously.

DryWetCanvas

Represents the base class from wet and dry canvases, implementing the common rendering logic.

InkingCanvas

Represents the base class for all canvases. InkingCanvas provides resizing, coordinate tramnslation and base drawingprimitives.

InkingManager

Handles user interaction with a canvas, and manages the rendering of wet and dry strokes.

InputFilter

Defines an input filter. Input filters are used to transform input points on the fly.

InputFilterCollection

Represents a collection of input filters.

InputProvider

A basic input event provider implementation.

JitterFilter

Implements a jitter reduction filter, which straightens stroke by ignoring micro movements detected by the input device, mainly pens.

LaserPointerCanvas

Represents a canvas that implements the laser pointer behavior.

LiveCanvas

Enables live and collaborative inking.

LiveCursor

Represents a live (shared) cursor. Applications that want to customize the appearance of cursors on the screen should extend LiveCursor and override its renderedElement property to return a custom HTML element.

MulticastEvent

Implements a simple typed multicast event.

PointerInputProvider

InputProvider implementation that hooks into a DOM element's pointer events.

Stroke

Represents a concrete stroke object.

WetCanvas

Represents a canvas suitable for "wet ink", i.e. an ongoing stroke.

Interfaces

IAddPointsEventArgs

Defines the arguments of the AddPointsEvent.

IAddRemoveStrokeOptions

Defines options used by InkingManager.addStroke and InkingManager.removeStroke.

IBeginStrokeEventArgs

Defines the arguments of the BeginStrokeEvent.

IBrush

Defines a brush as used to draw strokes.

IColor

Defines an RGB color

IMulticastEvent

Defines a typed multicast event, i.e. an event that can have multiple listeners.

IPoint

Defines a 2D point.

IPointerEvent

Represents a pointer event such as up, down or enter.

IPointerMoveEvent

Representes a a pointer move event.

IPointerMovedEventArgs

Defines the arguments of the PointerMovedEvent.

IPointerPoint

Defines a 2D point with pointer pressure.

IRawStroke

Represents the raw data of a stroke.

IRect

Defines a rectangle.

ISegment

Defines a segment between two points.

IStroke

Defines a stroke, i.e. a collection of points that can be rendered on a canvas.

IStrokeCreationOptions

Defines a set of options when creating new strokes.

IUserInfo

Encapsulates information about a user.

IWetStroke

Defines a "wet" stroke, i.e. a stroke as it's being drawn.

Type Aliases

ArrowType
BrushTipShape

Defines the shape of a brush's tip.

BrushType

Defines brush types.

CanvasReferencePoint

Defines the refernece point of a canvas. The reference point is the origin used for panning and zooming operations.

EventListener

Defines a typed callback function used by multicast events.

Enums

InkingTool

Defines available inking tools.

StrokeEndState
StrokeMode

Stroke modes.

StrokeType

Stroke types.

Functions

combineRects(IRect, IRect)
darkenColor(IColor, number)

Darkens the given color by a certain intensity.

expandRect(IRect, IPoint)

Expands the specified rectangle so it contains the specified point.

fromCssColor(string)

Converts a CSS color expressed in the #RRGGBB format into an IColor object

getDistanceBetweenPoints(IPoint, IPoint)

Computes the distance between two points.

getPressureAdjustedSize(number, number)

Adjusts a size given a pointer pressure.

getSquaredDistanceBetweenPoints(IPoint, IPoint)

Computes the square of the distance between two points. This provides a cheaper way to compare multiple distances since it doesn't compute any square root.

lightenColor(IColor, number)

Lightens the given color by a certain intensity.

screenToViewport(IPoint, IPoint, IPoint, number)

Converts screen coordinates to viewport coordinates.

toCssRgbaColor(IColor, number)

Converts an IColor object into its CSS rgba() representation.

viewportToScreen(IPoint, IPoint, IPoint, number)

Converts viewport coordinates to screen coordinates.

Function Details

combineRects(IRect, IRect)

function combineRects(rect1: IRect, rect2: IRect): IRect

Parameters

rect1
IRect
rect2
IRect

Returns

darkenColor(IColor, number)

Darkens the given color by a certain intensity.

function darkenColor(color: IColor, intensity: number): IColor

Parameters

color
IColor

The color to darken.

intensity

number

The intensity of the darkening. Must be between 0 and 100.

Returns

The darkened color.

expandRect(IRect, IPoint)

Expands the specified rectangle so it contains the specified point.

function expandRect(rect: IRect, point: IPoint): IRect

Parameters

rect
IRect

The rectangle to extend.

point
IPoint

The point to extend the rectangle to.

Returns

The expanded rectangle.

fromCssColor(string)

Converts a CSS color expressed in the #RRGGBB format into an IColor object

function fromCssColor(color: string): IColor

Parameters

color

string

The CSS color to convert.

Returns

The converted color as an IColor object, or a default color if the provided color string isn't valid.

getDistanceBetweenPoints(IPoint, IPoint)

Computes the distance between two points.

function getDistanceBetweenPoints(p1: IPoint, p2: IPoint): number

Parameters

p1
IPoint

The first point.

p2
IPoint

The second point.

Returns

number

The distance between p1 and p2.

getPressureAdjustedSize(number, number)

Adjusts a size given a pointer pressure.

function getPressureAdjustedSize(baseSize: number, pressure: number): number

Parameters

baseSize

number

The size to adjust.

pressure

number

The pressure.

Returns

number

The adjusted size.

getSquaredDistanceBetweenPoints(IPoint, IPoint)

Computes the square of the distance between two points. This provides a cheaper way to compare multiple distances since it doesn't compute any square root.

function getSquaredDistanceBetweenPoints(p1: IPoint, p2: IPoint): number

Parameters

p1
IPoint

The first point.

p2
IPoint

The second point.

Returns

number

The square of the distance between p1 and p2.

lightenColor(IColor, number)

Lightens the given color by a certain intensity.

function lightenColor(color: IColor, intensity: number): IColor

Parameters

color
IColor

The color to lighten.

intensity

number

The intensity of the lightening. Must be between 0 and 100.

Returns

The lightened color.

screenToViewport(IPoint, IPoint, IPoint, number)

Converts screen coordinates to viewport coordinates.

function screenToViewport(p: IPoint, viewportReferencePoint: IPoint, viewportOffset: IPoint, scale: number): IPoint

Parameters

p
IPoint

The point to convert.

viewportReferencePoint
IPoint

The videwport's reference point.

viewportOffset
IPoint

The viewport offset.

scale

number

The viewport scale. Defaults to 1 if the provided value is less than or equal to 0.

Returns

The converted point.

toCssRgbaColor(IColor, number)

Converts an IColor object into its CSS rgba() representation.

function toCssRgbaColor(color: IColor, alpha?: number): string

Parameters

color
IColor

The color to convert.

alpha

number

Returns

string

A string representing the CSS rgba() representation of the color.

viewportToScreen(IPoint, IPoint, IPoint, number)

Converts viewport coordinates to screen coordinates.

function viewportToScreen(p: IPoint, viewportReferencePoint: IPoint, viewportOffset: IPoint, scale: number): IPoint

Parameters

p
IPoint

The point to convert.

viewportReferencePoint
IPoint

The viewport's reference point.

viewportOffset
IPoint

The viewport offset.

scale

number

The viewport scale. Defaults to 1 if the provided value is less than or equal to 0.

Returns

The converted point.