Important: this is an experimental feature, please proceed with caution.
We're kindly asking you to report any bugs and suggest following changelog for the most recent updates.
Custom elements allow you to create your own shapes and add them to the canvas.
By design Polotno
supports several main types of elements: text
, image
, svg
, line
, group
. In some cases you may want to create your own custom elements.
Before you start, please note that:
Custom elements are not supported in Cloud Render API.
By default polotno-node (for backend rendering) does not support custom elements. But with some extra configuration you can make it work.
You will need to know some Polotno internals to support animations for custom elements. Please write us if you need need help.
In the future there will be more options for design export (e.g. to SVG, print-ready PDF, etc). You will need to write some adopters to make it work with custom elements.
If possible, try to use built-in elements. For example you can draw some complex shapes using svg
element (you can generate src in the runtime).
How to create custom shapes with Polotno?
As the demonstration we will create a custom star
element. Creating new elements consists of three main steps.
1. Create model for your element
First define any additional attributes for the new element. All the basic attributes such as id
, x
, y
, rotation
, filters attributes, and etc. are defined by default. All that needed is additional data and default values:
import { unstable_registerShapeModel } from 'polotno/config';
unstable_registerShapeModel(
{
type: 'star',
radius: 100,
fill: 'black',
numPoints: 6,
},
(starModel) => {
return starModel.actions((self) => {
return {
setNumPoints(numPoints) {
self.numPoints = numPoints;
},
};
});
}
);
Now polotno
store knows that we can define star
model.
2. Create react component for new element
Next define how to display the model. To get there, create a react component with react-konva
shapes.
import { observer } from 'mobx-react-lite';
import { Star } from 'react-konva';
import { unstable_registerShapeComponent } from 'polotno/config';
export const StarElement = observer(({ element, store }) => {
const ref = React.useRef(null);
const handleChange = (e) => {
const node = e.currentTarget;
const scaleX = node.scaleX();
node.scaleX(1);
node.scaleY(1);
element.set({
x: node.x(),
y: node.y(),
rotation: e.target.rotation(),
radius: element.radius * scaleX,
});
};
return (
<Star
ref={ref}
name="element"
id={element.id}
x={element.x}
y={element.y}
fill={element.fill}
offsetX={-element.radius}
offsetY={-element.radius}
rotation={element.rotation}
opacity={element.opacity}
draggable={!element.locked}
outerRadius={element.radius}
innerRadius={element.radius * 0.5}
onDragMove={handleChange}
onTransform={handleChange}
/>
);
});
unstable_registerShapeComponent('star', StarElement);
3. Create custom top toolbar (optional)
A custom toolbar can be defined to change star properties.
import React from 'react';
import { observer } from 'mobx-react-lite';
import { NumericInput, Navbar, Alignment } from '@blueprintjs/core';
import ColorPicker from 'polotno/toolbar/color-picker';
import { unstable_registerToolbarComponent } from 'polotno/config';
const StarToolbar = observer(({ store }) => {
const element = store.selectedElements[0];
return (
<Navbar.Group align={Alignment.LEFT}>
<ColorPicker
value={element.fill}
onChange={(fill) =>
element.set({
fill,
})
}
store={store}
/>
<NumericInput
onValueChange={(radius) => {
element.set({ height: radius });
}}
value={element.radius}
style={{ width: '50px', marginLeft: '10px' }}
min={1}
max={40}
/>
</Navbar.Group>
);
});
unstable_registerToolbarComponent('star', StarToolbar);