pencilcanvasdrawtool.md

andculturecode-javascript-react-components › PencilCanvasDrawTool

Class: PencilCanvasDrawTool

Hierarchy

• BaseCanvasDrawTool

  ↳ PencilCanvasDrawTool

Implements

• CanvasDrawTool

Index

Constructors

• constructor

Properties

• _canvas
• _color
• _config
• _context
• _currentPosition
• _isPointerActive
• _path
• _previousPosition
• _uiSettings
• _width
• toolType

Methods

• _addCursor
• _addEventListeners
• _drawInteraction
• _drawStroke
• _finishStroke
• _getPath
• _getStrokeSettings
• _move
• _onFinishStroke
• _onMouseDownCanvas
• _onMouseMoveCanvas
• _onMouseUpWindow
• _onTouchEndWindow
• _onTouchMoveCanvas
• _onTouchStartCanvas
• _removeCursor
• _removeEventListeners
• _startStroke
• dispose
• drawStrokes
• initialize

Constructors

constructor

+ new PencilCanvasDrawTool(drawToolConfig: DrawToolConfig): PencilCanvasDrawTool

Overrides BaseCanvasDrawTool.constructor

Defined in src/atoms/forms/canvas-sketch/tools/pencil-canvas-draw-tool.ts:33

Parameters:

Name	Type
drawToolConfig	DrawToolConfig

Returns: PencilCanvasDrawTool

Properties

Protected _canvas

• _canvas: HTMLCanvasElement

Inherited from BaseCanvasDrawTool._canvas

Defined in src/atoms/forms/canvas-sketch/tools/base-canvas-draw-tool.ts:35

---

Protected _color

• _color: string

Inherited from BaseCanvasDrawTool._color

Defined in src/atoms/forms/canvas-sketch/tools/base-canvas-draw-tool.ts:36

---

Protected _config

• _config: DrawToolConfig

Inherited from BaseCanvasDrawTool._config

Defined in src/atoms/forms/canvas-sketch/tools/base-canvas-draw-tool.ts:37

---

Protected _context

• _context: CanvasRenderingContext2D

Inherited from BaseCanvasDrawTool._context

Defined in src/atoms/forms/canvas-sketch/tools/base-canvas-draw-tool.ts:38

---

Protected _currentPosition

• _currentPosition: PointerPosition

Inherited from BaseCanvasDrawTool._currentPosition

Defined in src/atoms/forms/canvas-sketch/tools/base-canvas-draw-tool.ts:39

---

Protected _isPointerActive

• _isPointerActive: boolean

Inherited from BaseCanvasDrawTool._isPointerActive

Defined in src/atoms/forms/canvas-sketch/tools/base-canvas-draw-tool.ts:40

---

Protected _path

• _path: PointerPosition[]

Defined in src/atoms/forms/canvas-sketch/tools/pencil-canvas-draw-tool.ts:33

---

Protected _previousPosition

• _previousPosition: PointerPosition

Inherited from BaseCanvasDrawTool._previousPosition

Defined in src/atoms/forms/canvas-sketch/tools/base-canvas-draw-tool.ts:41

---

Protected _uiSettings

• _uiSettings: DrawToolUiSettings

Inherited from BaseCanvasDrawTool._uiSettings

Defined in src/atoms/forms/canvas-sketch/tools/base-canvas-draw-tool.ts:42

---

Protected _width

• _width: number

Inherited from BaseCanvasDrawTool._width

Defined in src/atoms/forms/canvas-sketch/tools/base-canvas-draw-tool.ts:43

---

toolType

• toolType: CanvasToolType

Implementation of CanvasDrawTool.toolType

Defined in src/atoms/forms/canvas-sketch/tools/pencil-canvas-draw-tool.ts:31

Methods

Private _addCursor

▸ _addCursor(): void

Defined in src/atoms/forms/canvas-sketch/tools/pencil-canvas-draw-tool.ts:120

Returns: void

---

Private _addEventListeners

▸ _addEventListeners(): void

Defined in src/atoms/forms/canvas-sketch/tools/pencil-canvas-draw-tool.ts:127

Binds the necessary mouse and touch events

Returns: void

---

Private _drawInteraction

▸ _drawInteraction(): void

Defined in src/atoms/forms/canvas-sketch/tools/pencil-canvas-draw-tool.ts:156

Draws the current state of the interaction

Returns: void

---

Private _drawStroke

▸ _drawStroke(startX: number, startY: number, endX: number, endY: number, color: string, width: number): void

Defined in src/atoms/forms/canvas-sketch/tools/pencil-canvas-draw-tool.ts:177

Draws the interaction based on the provided state

Parameters:

Name	Type	Description
startX	number	-
startY	number	-
endX	number	-
endY	number	-
color	string	-
width	number

Returns: void

---

Private _finishStroke

▸ _finishStroke(): void

Defined in src/atoms/forms/canvas-sketch/tools/pencil-canvas-draw-tool.ts:201

Finalizes the entire stroke interaction

Returns: void

---

Private _getPath

▸ _getPath(): [PathType, number, number][]

Defined in src/atoms/forms/canvas-sketch/tools/pencil-canvas-draw-tool.ts:220

Returns the path of the entire stroke that can then be persisted for later use

Returns: [PathType, number, number][]

---

Private _getStrokeSettings

▸ _getStrokeSettings(): PencilStrokeSettings

Defined in src/atoms/forms/canvas-sketch/tools/pencil-canvas-draw-tool.ts:241

Returns the stroke settings for the entire interaction including the stroke, color, and width

Returns: PencilStrokeSettings

---

Private _move

▸ _move(newCurrentPosition: PointerPosition): void

Defined in src/atoms/forms/canvas-sketch/tools/pencil-canvas-draw-tool.ts:256

Handles the move interaction while drawing

Parameters:

Name	Type	Description
newCurrentPosition	PointerPosition

Returns: void

---

Protected _onFinishStroke

▸ _onFinishStroke(strokeSettings: CanvasDrawToolSettings): void

Inherited from BaseCanvasDrawTool._onFinishStroke

Defined in src/atoms/forms/canvas-sketch/tools/base-canvas-draw-tool.ts:65

Parameters:

Name	Type
strokeSettings	CanvasDrawToolSettings

Returns: void

---

Private _onMouseDownCanvas

▸ _onMouseDownCanvas(e: MouseEvent): void

Defined in src/atoms/forms/canvas-sketch/tools/pencil-canvas-draw-tool.ts:327

Parameters:

Name	Type
e	MouseEvent

Returns: void

---

Private _onMouseMoveCanvas

▸ _onMouseMoveCanvas(e: MouseEvent): void

Defined in src/atoms/forms/canvas-sketch/tools/pencil-canvas-draw-tool.ts:334

Parameters:

Name	Type
e	MouseEvent

Returns: void

---

Private _onMouseUpWindow

▸ _onMouseUpWindow(): void

Defined in src/atoms/forms/canvas-sketch/tools/pencil-canvas-draw-tool.ts:341

Returns: void

---

Private _onTouchEndWindow

▸ _onTouchEndWindow(e: TouchEvent): void

Defined in src/atoms/forms/canvas-sketch/tools/pencil-canvas-draw-tool.ts:345

Parameters:

Name	Type
e	TouchEvent

Returns: void

---

Private _onTouchMoveCanvas

▸ _onTouchMoveCanvas(e: TouchEvent): void

Defined in src/atoms/forms/canvas-sketch/tools/pencil-canvas-draw-tool.ts:349

Parameters:

Name	Type
e	TouchEvent

Returns: void

---

Private _onTouchStartCanvas

▸ _onTouchStartCanvas(e: TouchEvent): void

Defined in src/atoms/forms/canvas-sketch/tools/pencil-canvas-draw-tool.ts:362

Parameters:

Name	Type
e	TouchEvent

Returns: void

---

Private _removeCursor

▸ _removeCursor(): void

Defined in src/atoms/forms/canvas-sketch/tools/pencil-canvas-draw-tool.ts:267

Returns: void

---

Private _removeEventListeners

▸ _removeEventListeners(): void

Defined in src/atoms/forms/canvas-sketch/tools/pencil-canvas-draw-tool.ts:274

Removed the bound mouse and touch events

Returns: void

---

Private _startStroke

▸ _startStroke(startingPosition: PointerPosition): void

Defined in src/atoms/forms/canvas-sketch/tools/pencil-canvas-draw-tool.ts:305

Captures the starting position and begins the entire stroke interaction

Parameters:

Name	Type	Description
startingPosition	PointerPosition

Returns: void

---

dispose

▸ dispose(): void

Defined in src/atoms/forms/canvas-sketch/tools/pencil-canvas-draw-tool.ts:49

Returns: void

---

drawStrokes

▸ drawStrokes(strokes: CanvasDrawToolSettings[]): void

Defined in src/atoms/forms/canvas-sketch/tools/pencil-canvas-draw-tool.ts:54

Parameters:

Name	Type
strokes	CanvasDrawToolSettings[]

Returns: void

---

initialize

▸ initialize(): void

Defined in src/atoms/forms/canvas-sketch/tools/pencil-canvas-draw-tool.ts:109

Returns: void