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.
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]);