Docs
API Docs

Brush

The highly efficient brush engine of PhotoEditor SDK is optimized for touch screen interaction and supports different brush strokes that can be edited in terms of thickness and color.

Please note that the thickness is relative to the shortest edge of your image. If your image is 200x500 pixels and the brush thickness is 0.05, the final thickness on the image will be 200 * 0.05 = 10 pixels.

Localization

You can override all the labels used in brush tool using the custom.languages object in configuration, below are the default brush localization lables

await PhotoEditorSDKUI.init({
  ...,
  custom: {
    languages: {
      en: {
        ...,
        brush: {
          title: 'Brush',
          controls: {
            // Relevant for AdvancedUI
            sliderSize: 'Brush Size',
            sliderHardness: 'Brush Hardness',
            selectColor: 'Brush Color',
            // Relevant for BasicUI
            tabSize: 'Size',
            tabHardness: 'Hardness',
            tabColor: 'Color',
          },
          history: {
            brushStroke: 'Brush Stroke',
          },
        }
      }
    }
  }
})

Custom Colors

You can override all the colors used in brush tool using the colors array

await PhotoEditorSDKUI.init({
  ...,
  brush: {
    colors: [
      {
        // color is represented as a number array which encodes
        // as a RGBA tuple of floating point values where
        // each channel is defined in the range of `[0, 1]
        color: [1.00, 1.00, 1.00, 1],
        // name must be unique
        name: "white",
      },
      { color: [0.49, 0.49, 0.49, 1], name: "gray" },
      { color: [0.00, 0.00, 0.00, 1], name: "black" },
      { color: [0.40, 0.80, 1.00, 1], name: "light blue" },
      { color: [0.40, 0.53, 1.00, 1], name: "blue" },
      { color: [0.53, 0.40, 1.00, 1], name: "purple" },
      { color: [0.87, 0.40, 1.00, 1], name: "orchid" },
      { color: [1.00, 0.40, 0.80, 1], name: "pink" },
      { color: [0.90, 0.31, 0.31, 1], name: "red" },
      { color: [0.95, 0.53, 0.33, 1], name: "orange" },
      { color: [1.00, 0.80, 0.40, 1], name: "gold" },
      { color: [1.00, 0.97, 0.39, 1], name: "yellow" },
      { color: [0.80, 1.00, 0.40, 1], name: "olive" },
      { color: [0.33, 1.00, 0.53, 1], name: "green" },
      { color: [0.33, 1.00, 0.92, 1], name: "aquamarin" },
    ]
  },
  ...,
})