Shapes

Shapes are used in the Annotate, Decorate, and the Sticker plugins, they're also used to render image overlays in the willRenderCanvas hook of the editor.

The editor also uses shapes internally to draw parts of the user interface.

Types

Doka termines the type of a shape (and how to draw and interact with it) based on the defined props on the shape.

Name Requirements
Path Has points property.
Line Has x1, y1, x2, and y2 property.
Rectangle Has width, height properties. Or a width and height can be derived from the bounds properties x, y, top, right, bottom, and left.
Ellipse Has rx and ry property.
Text Has text property.
Triangle Has x1, y1, x2, y2, x3, and y3 property

Styles

Layout related styles can be defined in pixels or in percentages.

When defined in percentages the Doka Image Editor will calculate the pixel value automatically relative to the shape parent context.

When annotating an image the parent context is the image itself, when decorating a crop, the parent context is the crop selection.

const absoluteShape = {
    x: 0,
    y: 0,
    // ...other styles
};

const relativeShape = {
    x: '10%',
    y: '15%',
    // ...other styles
};

Shared

Property Description
x The x position of the shape. Either in pixels or a percentage.
y The y position of the shape. Either in pixels or a percentage.
rotation Shape rotation in radians.
backgroundColor_ Array of 3 or 4 color values ranging between 0 and 1.
opacity The opacity of the shape. Value betwen 0 and 1
context The context of the shape, a Rect or Size set by Doka.

rotation

The rotation of the shape in radians.

const shape = {
    rotation: Math.PI / 4, // 45 degrees
    // ...other styles
};

If you want to set the rotation in degrees you can use the degToRad method.

import { degToRad } from './doka.js';

const shape = {
    rotation: degToRad(45),
    // ...other styles
};

Rectangle

const shape = {
    x: 0,
    y: 0,
    width: 128,
    height: 128,
    backgroundColor: [1, 0, 0],
};
Property Description
width The width of the rectangle.
height The height of the rectangle.
left The position of the rectangle relative to the left of its context.
top The position of the rectangle relative to the top of its context.
right The position of the rectangle relative to the right of its context.
bottom The position of the rectangle relative to the bottom of its context.
cornerRadius The rectangle corner radius.
backgroundImage The resource to use as a background image for this shape.
backgroundSize How the image is fitted in the rectangle, either undefined, 'contain', or 'cover'.
aspectRatio The aspect ratio the rectangle should adhere to.
strokeColor_ Array of 3 or 4 color values ranging between 0 and 1.
strokeWidth The width of the stroke to use for the rectangle.

backgroundSize

When set to undefined the shape will be forced to match the backgroundImage aspect ratio.

Set the value to 'contain' to center the backgroundImage in the rectangle.

Setting the value to 'cover' will cover the rectangle with the backgroundImage.

Ellipse

const shape = {
    x: 32,
    y: 32,
    rx: 64,
    ry: 64,
    backgroundColor: [1, 0, 0],
};
Property Description
rx The radius of the ellipse on the x axis.
ry The radius of the ellipse on the y axis.
strokeColor_ Array of 3 or 4 color values ranging between 0 and 1.
strokeWidth The width of the stroke to use for the ellipse.

Line

const shape = {
    x1: 0,
    y1: 0,
    x2: 128,
    y2: 128,
    strokeColor: [1, 0, 0],
};
Property Description
x1 The start position of the line on the x axis.
y1 The start position of the line on the y axis.
x2 The end position of the line on the x axis.
y2 The end position of the line on the y axis.
strokeColor_ Array of 3 or 4 color values ranging between 0 and 1.
strokeWidth The width of the stroke to use for the line.
lineStart_ The decorative shape to use for the start of the line.
lineEnd_ The decorative shape to use for the end of the line.

Decorative Shapes

Shape Description
'none'
Don't render a decorative shape
'bar'
Render a bar.
'arrow'
Renders an open arrow.
'arrow-solid'
Renders a solid arrow.
'circle'
Render a open circle.
'circle-solid'
Renders a solid circle.
'square'
Render a open square.
'square-solid'
Renders a solid square.

Text

const shape = {
    x: 0,
    y: 0,
    width: 128,
    height: 128,
    text: 'Hello World',
    color: [1, 0, 0],
};
Property Description
fontSize The font size to use for the text element.
fontFamily The font family to use for the text element.
lineHeight The line height of the text element.
color_ Array of 3 or 4 color values ranging between 0 and 1.
textAlign Alignment of the text, "left", "center", or "right", defaults to "left".
text The text to show.

Path

const shape = {
    path: [
        {
            x: 0,
            y: 0,
        },
        {
            x: 128,
            y: 0,
        },
        {
            x: 128,
            y: 128,
        },
        {
            x: 0,
            y: 128,
        },
    ],
    strokeColor: [1, 0, 0],
};
Property Description
points Array of { x, y } coordinates.
strokeColor_ Array of 3 or 4 color values ranging between 0 and 1.
strokeWidth The width of the stroke to use for the path

State

Property Description
isSelected The shape is currently selected.
isDraft The shape is in draft state, this is true when the shape is being created.
isComplete Is true when all shape resources have loaded.
isError Something went wrong while loading shape resources.
isLoading Currently loading shape resources.
isEditing Currently editing this shape.
isFormatted The shape has been formatted by Doka.

Rights

Property Description
disableStyle Prevents changing the styles of the shape.
disableErase Prevents erasing the shape with eraser.
disableSelect Prevents selecting the shape.
disableRemove Prevents removing the shape.
disableDuplicate Prevents duplicating the shape.
disableReorder Prevents reordering the shape.
disableFlip Prevents flipping the shape.
disableInput Prevents updating the text of the shape.
disableManipulate Prevents manipulating the shape in any way.
disableMove Prevents moving the shape.
disableResize Prevents resizing the shape.
disableRotate Prevents rotating the shape.

disableStyle

If set to true all styles are locked.

Alternatively it can be set to an array of disabled style names.

const shape = {
    x: 0,
    y: 0,
    width: 128,
    height: 128,
    backgroundColor: [1, 0, 0],
    strokeColor: [1, 1, 1],
    strokeWidth: 20,
    disableStyle: ['strokeWidth', 'strokeColor'],
};

disableInput

Only applies to Text shapes. If set to true will prevent the user from updating the text value.

Can alternatively be set to a function in which case the function receives a string and can return a formatted string. In the example below we disallow any numeric input.

const shape = {
    x: 0,
    y: 0,
    width: 128,
    height: 128,
    text: 'Hello World',
    disableInput: (text) => text.replace(/[0-9]/g, ''),
};

Colors

Shape colors are defined with an array of 3 or 4 color values.

The array format is [R, G, B] or [R ,G ,B ,A] each value ranges between 0 and 1.

Setting the color red using the RGB array.

const shape = {
    // red
    backgroundColor: [1, 0, 0],
    // ...other styles
};

Setting an RGBA value.

// red with 50% opacity
const shape = {
    backgroundColor: [1, 0, 0, 0.5],
    // ...other styles
};

We can automatically create these arrays from more familiar CSS color values by using the colorStringToColorArray method exported by the editor.