ngx-clip-path-editor
Advanced tools
ngx-clip-path-editor is an Angular component for editing a CSS clip-path visually within an image element. It is customizable, responsive, lightweight and heavily Change Detection optimized.
A demo can be found on Stackblitz.
If you've ever read a print magazine and compared the layout and style with typical websites you might have spotted some noticeable differences. When it comes to typography CSS got a lot of great features over the last couple of years. Furthermore, in terms of layout possibilities we are pretty much on par with print media nowadays. However, images on the web are typically just rectangular blocks and people barely get creative with fancy image layouts. This is the case because most editors don't cover options for stylizing pretty text flows around non-rectangular images - even though we already have the necessary technology.
Properties like clip-path and shape-outside are widely supported and grant us the opportunity to create fancy layouts that don't evoke the impression that we are just staring at a bunch of rectangular blocks.
Some years ago I tried using these properties within a blog and people truly appreciated the more dynamic text flows. However, manually adding these properties to images was a tedious process. That's the reason I decided to create an editor component for creating clip paths. With an easy-to-use component everyone can create better layouts in no time.
| Input | Type | - | Description |
|---|---|---|---|
| src | string | Required | Sets the source of the image |
| mask | string | Optional | A clip-path string. If the mask Input is set the string will be parsed and visualized. |
| disabled | boolean | Optional | If set to true no points can be added or removed. |
| visualizeMask | boolean | Optional | If set to false the image background mask will not be shown. |
| visualizePath | boolean | Optional | If set to false the visualization of the path will not be shown. |
| visualizePoints | boolean | Optional | If set to false no points will be shown. |
The OnChange Event gets triggered whenever a new point gets added, an old point gets removed or the window resizes. It emits a clip-path string.
Triggering clear will clear all points.
The component makes heavy use of custom CSS properties which makes it easy to customize certain aspect via the Shadow DOM. The component also uses the BEM approach so conflicts shouldn't occur when running without ViewEncapsulation.
| Variable | Description |
|---|---|
--mask-opacity | Regulates the opacity of the background mask |
--mask-z-index | The z-index value for the SVG element |
--path-unit | A base unit size for the path and points |
--path-opacity | The default opacity for the path |
--point-opacity | The default opacity for points |
FAQs
Angular component for editing CSS clip-paths on image elements
We found that ngx-clip-path-editor demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.
