Skip to content

canvassketch.md

Latest commit

 

History

History
539 lines (306 loc) · 18.5 KB

canvassketch.md

File metadata and controls

539 lines (306 loc) · 18.5 KB
Raw

andculturecode-javascript-react-components › CanvasSketch

Class: CanvasSketch

Binds to the provided HTML canvases element in the contructor and provides access to switch the selected tool and selected tool options like color and width through it's API

Hierarchy

  • CanvasSketch

Index

Constructors

Properties

Methods

Constructors

constructor

+ new CanvasSketch(canvasSketchConfig: CanvasSketchConfig): CanvasSketch

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:55

Tracks

Parameters:

Name Type Description
canvasSketchConfig CanvasSketchConfig configuration of object

Returns: CanvasSketch

Properties

Private _backgroundImageContext

• _backgroundImageContext: CanvasRenderingContext2D

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:50

Private _config

• _config: CanvasSketchConfig

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:49

Private _drawToolConfig

• _drawToolConfig: DrawToolConfig

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:52

Private _drawToolUiSettings

• _drawToolUiSettings: DrawToolUiSettings

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:51

Private _isBrowserSupported

• _isBrowserSupported: boolean

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:53

Private _sketchContext

• _sketchContext: CanvasRenderingContext2D

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:54

Private _toolConfig

• _toolConfig: ToolConfig

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:55

backgroundImageTool

• backgroundImageTool: ImageCanvasTool

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:42

imageTool

• imageTool: ImageCanvasTool

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:43

lineDrawTool

• lineDrawTool: LineCanvasDrawTool

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:44

panTool

• panTool: PanCanvasTool

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:45

pencilDrawTool

• pencilDrawTool: PencilCanvasDrawTool

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:46

selectedTool

• selectedTool: CanvasTool

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:47

Methods

Private _clearBackgroundImageCanvas

▸ _clearBackgroundImageCanvas(): void

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:299

Removes the background image from the background image canvas so that it is no longer visible

Returns: void

Private _clearCanvas

▸ _clearCanvas(canvas: HTMLCanvasElement, context: CanvasRenderingContext2D): void

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:320

Removes all drawing on the provided canvas and context

Parameters:

Name Type Description
canvas HTMLCanvasElement The canvas that will have its drawing removed
context CanvasRenderingContext2D The context of the canvas to remove the drawing

Returns: void

Private _clearSketchCanvas

▸ _clearSketchCanvas(): void

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:330

Removes all drawing from the sketch canvas so that it is no longer visible

Returns: void

Private _drawObjects

▸ _drawObjects(objectStack: CanvasToolSettings[]): void

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:343

Draws the provided objects onto the sketch canvas

Parameters:

Name Type Description
objectStack CanvasToolSettings[] The provided objects to be drawn

Returns: void

Private _getStackToDraw

▸ _getStackToDraw(): CanvasToolSettings[]

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:383

Returns an immutable stack of drawn strokes to draw at the point / point in time based on the current object index

Returns: CanvasToolSettings[]

Private _initializeCanvasContexts

▸ _initializeCanvasContexts(): void

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:404

Uses the current canvas instances to establish the sketch and background image contexts and while determining browser compatability with canvas at the same time

Returns: void

Private _initializeCurrentDrawing

▸ _initializeCurrentDrawing(): void

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:442

Uses the current object stack (if provided) to redraw the strokes onto the sketch canvas

Returns: void

Private _initializeTools

▸ _initializeTools(): void

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:464

Uses the current sketch canvas and context to set up all available tools to the caller

Returns: void

Private _isInstanceOfDrawTool

▸ _isInstanceOfDrawTool(tool: CanvasTool): tool is CanvasDrawTool

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:396

Determines if the provided canvas tool is a drawable tool

Parameters:

Name Type Description
tool CanvasTool The tool to evaluate

Returns: tool is CanvasDrawTool

Private _onAddStroke

▸ _onAddStroke(strokeSettings: CanvasDrawToolSettings): void

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:372

Handler bound to tools drawing so capture the drawn stroke int he canvas sketch stack

Parameters:

Name Type Description
strokeSettings CanvasDrawToolSettings The settings of the drawn stroke that was just added

Returns: void

Private _panTo

▸ _panTo(panXDelta: number, panYDelta: number): void

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:523

Positions the canvases (background image and sketch) to the provided coordinate values

Parameters:

Name Type Description
panXDelta number The left pixel number
panYDelta number The top pixel number

Returns: void

Private _redrawBackgroundImage

▸ _redrawBackgroundImage(): void

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:541

Clears the background image canvas and redraws the background image to it

Returns: void

dispose

▸ dispose(): void

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:97

Disposes of any active bound events through the selected tool and anything else that this object may need to clean up

Returns: void

getTool

▸ getTool(toolType: CanvasToolType): CanvasTool | null

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:110

Gets the appropriate canva tool based on the provided tool type

Parameters:

Name Type Description
toolType CanvasToolType The tool type of the tool caller is looking to use

Returns: CanvasTool | null

redrawBackgroundImageUsing

▸ redrawBackgroundImageUsing(backgroundImageUrl: string): void

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:134

Redraws the background image based on the URL provided

Parameters:

Name Type Description
backgroundImageUrl string The URL of the background image to draw

Returns: void

redrawCurrentState

▸ redrawCurrentState(): void

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:146

Forces a redraw of the current state of the canvases. This is useful in cases where the caller needs to redraw on demand

Returns: void

redrawSketch

▸ redrawSketch(): void

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:154

Clears the sketch canvas and redraws all current stack objects to it

Returns: void

redrawSketchAt

▸ redrawSketchAt(objects: CanvasToolSettings[], newCurrentObjectIndex: number): void

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:173

Allows the caller to redraw the sketchpad at any point within the provided stack and point in time within that stack

Parameters:

Name Type Description
objects CanvasToolSettings[] The entire stack of drawn objects
newCurrentObjectIndex number The point in time / point in stack to draw

Returns: void

setOnAddedToolStroke

▸ setOnAddedToolStroke(onAddedStroke: function): void

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:255

Allows the caller to define what happens when a tool successfully adds a stroke to the drawn stack of objects

Parameters:

▪ onAddedStroke: function

The function that is called when a new drawn object is added to the stack. Returns the settings of that drawn object including things like color, width, and the type of tool used

▸ (strokeSettings: CanvasDrawToolSettings): void

Parameters:

Name Type
strokeSettings CanvasDrawToolSettings

Returns: void

setSelectedTool

▸ setSelectedTool(toolType: CanvasToolType): void

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:213

Allows the caller to select one of the availalbe tool type

Parameters:

Name Type Description
toolType CanvasToolType The tool to be selected

Returns: void

setToolColor

▸ setToolColor(color: string): void

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:239

Allows the caller to define the color being used by the tool

example canvasSketch.setToolColor('#5eeb34');

Parameters:

Name Type Description
color string The color to be selected (NOTE: must be in hex format with hash)

Returns: void

setToolWidth

▸ setToolWidth(width: number): void

Defined in src/atoms/forms/canvas-sketch/canvas-sketch.ts:282

Allows the caller to define the width being used by the tool

example canvasSketch.setToolWidth(10);

Parameters:

Name Type Description
width number The width to be seelcted

Returns: void