useDraw

Controls the drawing mode and all drawing tool settings on the canvas.

Import

import { useDraw } from '@asset-studio/core'

Usage

function DrawToolbar() {
  const {
    isDrawMode,
    changeDrawMode,
    drawType,
    setDrawType,
    drawColor,
    setDrawColor,
    drawStrokeWidth,
    setDrawStrokeWidth,
  } = useDraw()

  return (
    <div>
      <button onClick={() => changeDrawMode(isDrawMode ? 'select' : 'draw')}>
        {isDrawMode ? 'Exit Draw' : 'Draw'}
      </button>
      <select value={drawType} onChange={e => setDrawType(e.target.value as DrawType)}>
        <option value="free">Freehand</option>
        <option value="straight">Straight</option>
        <option value="shape">Shape</option>
      </select>
      <input
        type="color"
        value={drawColor}
        onChange={e => setDrawColor(e.target.value)}
      />
      <input
        type="range"
        min={1}
        max={50}
        value={drawStrokeWidth}
        onChange={e => setDrawStrokeWidth(Number(e.target.value))}
      />
    </div>
  )
}

Return Value

Property / Function	Type	Description
isDrawMode	boolean	Whether draw mode is currently active.
isSelectionMode	boolean	Whether selection mode is currently active.
changeDrawMode	(value: 'draw' | 'select') => void	Switch between draw and select mode.
drawType	DrawType	Current draw type — 'free', 'straight', or 'shape'.
setDrawType	(value: DrawType) => void	Set the draw type.
drawColor	string	Current stroke color (hex).
setDrawColor	(color: string) => void	Set the stroke color.
drawStrokeWidth	number	Current stroke width in pixels.
setDrawStrokeWidth	(width: number) => void	Set the stroke width.
drawStrokeStyle	'solid' | 'doodle'	Current stroke style.
setDrawStrokeStyle	(style: 'solid' | 'doodle') => void	Set the stroke style.
drawDash	number[] | undefined	Dash pattern for the stroke.
setDrawDash	(dash: number[] | undefined) => void	Set the dash pattern.
drawFillColor	string	Fill color for closed shapes.
setDrawFillColor	(color: string) => void	Set the fill color.
drawShape	number[] | null	Point data for the current shape path.
setDrawShape	(shape: number[] | null) => void	Set the shape point data.
saveDrawShape	() => void	Save the current drawn shape as an item on the canvas.

Types

type DrawType = 'free' | 'straight' | 'shape'

Related

• Draw item type
• useStudio