Features
Canvas Rulers
Show and toggle rulers to improve alignment and precision
Rulers in Polotno SDK's canvas editor ensure consistent alignment and precision, enhancing design cohesion. By defining guidelines and constraints, they streamline the design process, enabling users to create polished compositions efficiently.
How to enable rulers?
To control rulers from code, use the Store API.
// hide/show rulers
store.toggleRulers();
// check if rulers are currently visible
console.log(store.rulersVisible);Ruler styling
Customize the ruler appearance through Workspace props:
<Workspace
store={store}
rulerBackgroundColor="#1e1e2e" // ruler track background
rulerTextColor="#cdd6f4" // measurement labels
rulerBorderColor="#585b70" // border between ruler and canvas
rulerBorderSize={1} // border thickness in px
rulerTickColor="#7f849c" // tick marks along the ruler
rulerTickSize={8} // tick mark length in px
/>All six props are optional and fall back to the built-in theme when omitted.