Lasīt angliski

Kopīgot, izmantojot


InkingCanvas class

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

Constructors

InkingCanvas(HTMLElement)

Creates a new InkingCanvas instance, attached to the provided HTMLElement.

Properties

brush

Gets the canvas' brush.

canvas

Gets the underlying HTML5 Canvas element.

fadeOutDuration

Configures the time it takes, in milliseconds, for an InkingCanvas to fade out.

highlighterOpacity

Configures the opacity of highlighter strokes.

laserShadowOpacity

Configures the opacity of the laser stroke shadow.

offset

Gets the offset from the canvas' reference point, in pixels.

referencePoint

The canvas' reference point.

scale

Gets the canvas' scale. Defaults to 1.

Methods

addPoint(IPointerPoint)

Adds a points to the current stroke.

beginStroke(IPointerPoint)

Begins a stroke in the canvas.

cancelStroke()

Cancels the current stroke.

clear()

Clears the canvas.

endStroke(IPointerPoint)

Ends the current stroke in the canvas.

fadeOut()

Fades the canvas out by decreasing its opacity, and eventually removes it from the DOM.

removeFromDOM()

Removes the canvas from the DOM.

renderStroke(IStroke)

Renders the specified stroke onto the canvas.

resize(number, number)

Resizes this canvas.

setBrush(IBrush)

Sets the current brush for the canvas.

Constructor Details

InkingCanvas(HTMLElement)

Creates a new InkingCanvas instance, attached to the provided HTMLElement.

TypeScript
new InkingCanvas(_parentElement?: HTMLElement)

Parameters

_parentElement

HTMLElement

The HTML element this canvas is attached to. InkingCanvas dynamically creates an HTML5 Canvas element and adds it as a child to parentElement.

Property Details

brush

Gets the canvas' brush.

TypeScript
IBrush brush

Property Value

canvas

Gets the underlying HTML5 Canvas element.

TypeScript
HTMLCanvasElement canvas

Property Value

HTMLCanvasElement

fadeOutDuration

Configures the time it takes, in milliseconds, for an InkingCanvas to fade out.

TypeScript
static fadeOutDuration: number

Property Value

number

highlighterOpacity

Configures the opacity of highlighter strokes.

TypeScript
static highlighterOpacity: number

Property Value

number

laserShadowOpacity

Configures the opacity of the laser stroke shadow.

TypeScript
static laserShadowOpacity: number

Property Value

number

offset

Gets the offset from the canvas' reference point, in pixels.

TypeScript
Readonly<IPoint> offset

Property Value

Readonly<IPoint>

referencePoint

The canvas' reference point.

TypeScript
referencePoint: CanvasReferencePoint

Property Value

scale

Gets the canvas' scale. Defaults to 1.

TypeScript
number scale

Property Value

number

Method Details

addPoint(IPointerPoint)

Adds a points to the current stroke.

TypeScript
function addPoint(p: IPointerPoint)

Parameters

p
IPointerPoint

The point to add to the current stroke.

beginStroke(IPointerPoint)

Begins a stroke in the canvas.

TypeScript
function beginStroke(p: IPointerPoint)

Parameters

p
IPointerPoint

The starting point of the stroke.

cancelStroke()

Cancels the current stroke.

TypeScript
function cancelStroke()

clear()

Clears the canvas.

TypeScript
function clear()

endStroke(IPointerPoint)

Ends the current stroke in the canvas.

TypeScript
function endStroke(p?: IPointerPoint)

Parameters

p
IPointerPoint

Optional. The end point of the stroke. If not specified, the end point is the last one added.

fadeOut()

Fades the canvas out by decreasing its opacity, and eventually removes it from the DOM.

TypeScript
function fadeOut()

removeFromDOM()

Removes the canvas from the DOM.

TypeScript
function removeFromDOM()

renderStroke(IStroke)

Renders the specified stroke onto the canvas.

TypeScript
function renderStroke(stroke: IStroke)

Parameters

stroke
IStroke

The stroke to render.

resize(number, number)

Resizes this canvas.

TypeScript
function resize(width: number, height: number)

Parameters

width

number

The new width of the canvas, in pixels.

height

number

The new height of the canvas, in pixels.

setBrush(IBrush)

Sets the current brush for the canvas.

TypeScript
function setBrush(value: IBrush)

Parameters

value
IBrush

The brush.