Recently, I want to make a lightweight online album and poster design tool, and the recently released LeaferUI is especially suitable for such a scene.
What is LeaferUI?
Leafer UI is a set of colorful UI drawing framework developed based on LeaferJS, which helps developers quickly generate graphical interfaces. LeaferJS is a 2D drawing rendering engine developed based on HTML5 Canvas . It has excellent drawing performance on the web. Compared with similar graphics engines, it takes less time to render and occupies ultra-low memory.
As a domestic drawing engine, LeaferJS has a big vision:
We are committed to implementing a simple, open and modern UI drawing language standard through LeaferJS, and providing a cross-platform, lightweight and high-performance runtime for digital product development. We hope that different software can communicate, collaborate, and share drawing data and digital interfaces. Through continuous innovation of graphics technology and supporting support, more developers will be attracted to join in the use, and an open ecological environment will be established to communicate with each other. To promote the rapid development of the industry and produce more innovative technologies and products.
— LeaferJS mission and vision
Leafer UI provides commonly used UI drawing components and out-of-the-box functions, allowing us to easily exchange data with Figma , Sketch and other products, and provides a unified and rich platform for cross-platform development Interaction events, such as dragging, rotating, zooming gestures, etc.
Technical Features of Leafer UI
- Easy to learn and use: Based on Javascript and Canvas API, it provides easy-to-use API and documentation;
- Simple, open and modern UI drawing framework, and provides cross-platform, lightweight and high-performance runtime;
- Rich graphics performance, can achieve a variety of colorful effects, comparable to the current mainstream design software;
- Excellent performance, creating 1 million interactive rectangles, the fastest rendering of the first screen takes only 1.5 seconds. About 10 times faster than similar engines;
- Low memory usage, create 1 million interactive rectangles, only occupying 350M memory. Save more than 10 times memory than similar engines;
- It supports web and node.js servers, and will soon support applets. This is what I want, and I am looking forward to it.
What do I use LeaferUI for?
Recently, there is a need to create a small program for online design of poster albums. Users can use some pre-made design templates and only need to replace pictures and copywriting to quickly create aesthetic online and stylish albums and posters. During the early technical evaluation, I investigated and understood related technologies, and discovered the 2D graphics engine LeaferJS, which just meets the needs.
Get started
Install LeaferUI
You can also directly import
simple usage example
This way you can run. LeaferUI is very similar to a game engine. It has built-in drawing APIs that can be easily called, such as drawing various rectangles, circles, fans, and various common polygons. Of course, basic pictures and text can also be rendered. In addition, there are APIs such as containers, gradients, and lines. With these APIs, I can easily build a simple user design operation interface, and realize the function of synthesizing albums or posters according to the design template.
In addition to building the interface, user operations are also essential. LeaferUI provides events such as user click, drag, slide, zoom in and out, etc., which is easy to handle. At present, many APIs of LeaferUI have been perfected, and it is worth trying.
Complete documentation
LeaferUI provides user documentation that is easy to learn, and each important function has detailed code examples and example effects. Interested developers can go to the official website to read.
Free Open Source Instructions
Leafer UI is a free and open source JavaScript project. It adopts the MIT license . We can download it for free and use it for commercial projects.
Original link: https://www.thosefree.com/leaferui