Element
represents a graphical object on the page or group. An element can have one of these types:
text
image
svg
line
figure
video
group
const element = store.activePage.addElement({
type: 'text',
x: 50,
y: 50,
fill: 'black',
text: 'hello',
});
console.log(element.x);
element.set({ x: 100 });
Basic actions
Read properties
At any time, you can access any property of an element. See documentation for every type of element to see all available properties.
const element = store.selectedElements[0];
console.log(element.type);
console.log(element.id);
element.set(attrs)
Set new attributes to the element.
text.set({ x: text.x + 10, text: 'new text' });
Custom properties
You can't write ANY property directly into an element. If you want to write some additional data into the element, you can use custom
attribute.
element.set({ userId: '12' });
element.set({ custom: { userId: '12' } });
console.log(element.custom?.userId);
element.moveUp()
Move element up on z-index.
element.moveDown()
Move element down on z-index.
element.moveTop()
Move element to the top of the page or a group.
element.moveBottom()
Move element to the bottom of the page or a group.
Locking
You can use draggable
, contentEditable
, styleEditable
, removable
and resizable
attributes to lock element editing.
element.set({
draggable: false,
contentEditable: false,
styleEditable: false,
resizable: false,
removable: false,
});
console.log(element.locked);
element.set({
draggable: true,
contentEditable: true,
styleEditable: true,
resizable: true,
removable: true,
});
Text element
Text elements allow you to create a text on the canvas.
Here is the example of default properties.
page.addElement({
type: 'text',
x: 0,
y: 0,
rotation: 0,
locked: false,
blurEnabled: false,
blurRadius: 10,
brightnessEnabled: false,
brightness: 0,
shadowEnabled: false,
shadowBlur: 5,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'black',
shadowOpacity: 1,
name: '',
text: 'Hey, polotno',
placeholder: '',
fontSize: 14,
fontFamily: 'Roboto',
fontStyle: 'normal',
fontWeight: 'normal',
textDecoration: '',
fill: 'black',
align: 'center',
width: 0,
strokeWidth: 0,
stroke: 'black',
lineHeight: 1,
letterSpacing: 0,
backgroundEnabled: false,
backgroundColor: '#7ED321',
backgroundOpacity: 1,
backgroundCornerRadius: 0.5,
backgroundPadding: 0.5,
selectable: true,
alwaysOnTop: false,
showInExport: true,
draggable: true,
contentEditable: true,
removable: true,
resizable: true,
styleEditable: true,
});
text.toggleEditMode()
Enable edit mode for the text. It puts cursor inside the text and a user can do regular text editing.
You can use text.toggleEditMode()
to enter "edit mode" programmatically. For example, right after you created a new text element.
Image element
Image element will draw an image on the canvas. By default images will do smart-cropping to fit into its size.
page.addElement({
type: 'image',
x: 0,
y: 0,
rotation: 0,
locked: false,
blurEnabled: false,
blurRadius: 10,
brightnessEnabled: false,
brightness: 0,
shadowEnabled: false,
shadowBlur: 5,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'black',
shadowOpacity: 1,
name: '',
src: 'https://example.com/image.png',
keepRatio: false,
clipSrc: '',
width: 100,
height: 100,
cropX: 0,
cropY: 0,
cropWidth: 1,
cropHeight: 1,
cornerRadius: 0,
borderColor: 'black',
borderSize: 0,
flipX: false,
flipY: false,
selectable: true,
alwaysOnTop: false,
showInExport: true,
draggable: true,
contentEditable: true,
removable: true,
resizable: true,
});
image.toggleCropMode()
Enter into "crop mode" of the image programmatically.
<Button
minimal
icon={<Crop />}
onClickCapture={(e) => {
e.stopPropagation();
element.toggleCropMode(true);
}}
/>
SVG element
SVG
elements works very similar to Image
element, but has ability to replace its internal colors (not supported for all possible svgs).
const svgElement = page.addElement({
type: 'svg',
src: 'https://example.com/image.svg',
maskSrc: '',
keepRatio: false,
x: 0,
y: 0,
rotation: 0,
locked: false,
blurEnabled: false,
blurRadius: 10,
brightnessEnabled: false,
brightness: 0,
shadowEnabled: false,
shadowBlur: 5,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'black',
shadowOpacity: 1,
name: '',
width: 100,
height: 100,
flipX: false,
flipY: false,
cornerRadius: 0,
selectable: true,
alwaysOnTop: false,
showInExport: true,
draggable: true,
contentEditable: true,
removable: true,
resizable: true,
colorsReplace: {},
});
svgElement.colors
⚠️ Removed from v1.0.0-5 – please do not use it.
Array of colors detected in the svg image. You can use this array to replace colors in the svg image.
console.log(svgElement.colors);
Workaround:
If you want to detect colors in svg string you can use this:
import { urlToString, getColors, useSvgColors } from 'polotno/utils/svg';
const Toolbar = ({ element }) => {
const colors = useSvgColors(element.src);
};
async function getSvgColors(element) {
const svgString = await urlToString(element.src);
const colors = getColors(svgString);
}
svgElement.replaceColor(oldColor, newColor)
Some svg files support color replacement. Polotno
can do that when a color of internal svg node is defined as fill
property. You can replace some colors, to modify original image.
svgElement.replaceColor('red', 'blue');
Line element
You can use line
element to draw lines and arrows on the canvas. For now line elements may not support all available filters from JSON.
const lineElement = page.addElement({
type: 'line',
x: 0,
y: 0,
width: 400,
height: 10,
name: '',
color: 'black',
rotation: 0,
dash: [],
startHead: '',
endHead: '',
selectable: true,
alwaysOnTop: false,
showInExport: true,
draggable: true,
contentEditable: true,
removable: true,
resizable: true,
styleEditable: true,
});
Figure element
You can use figure
to draw basic shapes on the canvas. It has large collection of shapes that can be controlled with subType
property.
const figureElement = page.addElement({
type: 'figure',
subType: 'rect',
x: 0,
y: 0,
width: 400,
height: 400,
fill: 'black',
stroke: 'red',
strokeWidth: 40,
cornerRadius: 40,
});
Currently supported list of subType
:
rect
, circle
, star
, triangle
, rightTriangle
, diamond
, pentagon
, hexagon
, speechBubble
, cross
, arc
, cloud
, rightArrow
, leftArrow
, downArrow
, upArrow
, asterisk1
, asterisk2
, bookmark
, butterfly
, cylinder
, diamond2
, door
, drop1
, drop2
, explosion
, flag
, flower
, frame
, heart1
, home
, home2
, hourglass
, house
, keyhole
, kiss
, leaf
, lightning1
, lightning2
, magnet
, mithosis
, orangeRicky
, party
, pillow
, polygon
, rainbow
, rhodeIsland
, shell
, shield1
, shield2
, skewedRectangle
, softFlower
, softStar
, stairs1
, stairs2
, teewee
, blob1
, blob10
, blob11
, blob12
, blob13
, blob14
, blob15
, blob16
, blob17
, blob18
, blob19
, blob2
, blob20
, blob21
, blob22
, blob23
, blob24
, blob25
, blob26
, blob27
, blob28
, blob29
, blob3
, blob30
, blob31
, blob32
, blob4
, blob5
, blob6
, blob7
, blob8
, blob9
Video element
You can use video
to render video on the canvas. video
element has a lot of similar properties to image
element.
const videoElement = page.addElement({
type: 'video',
x: 0,
y: 0,
rotation: 0,
src: 'https://example.com/image.png',
startTime: 0,
endTime: 1,
shadowEnabled: false,
shadowBlur: 5,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'black',
shadowOpacity: 1,
name: '',
width: 100,
height: 100,
cropX: 0,
cropY: 0,
cropWidth: 1,
cropHeight: 1,
borderColor: 'black',
borderSize: 0,
flipX: false,
flipY: false,
selectable: true,
alwaysOnTop: false,
showInExport: true,
draggable: true,
contentEditable: true,
removable: true,
resizable: true,
});
Group element
Group element is a container for other elements. It can be used to move multiple elements together.
Here is the example of default properties.
const page = store.addPage();
page.addElement({
type: 'text',
text: 'Hello world',
id: 'text-1',
});
page.addElement({
type: 'text',
text: 'Hello world',
id: 'text-2',
});
const group = store.groupElements(['text-1', 'text-2']);
group.set({
name: 'group',
opacity: 0.5,
custom: {},
visible: true,
selectable: true,
removable: true,
alwaysOnTop: false,
showInExport: true,
});
store.ungroupElements([group.id]);