Blockbuster! React technology based micro-scene editor is available! Experience the open source address first

Beginner’s mind

On the market, there are many commercial WeChat scenario editor Yi qi rabbit shows On the platform, we can easily drag and drop the way to build a gorgeous WeChat scene Like the wedding invitations, event invitations, product promotion and so on, these can easily build through these platforms that the editor is how to do? With the desire to explore the technology, I tried out such a micro-scene editor

vision

To create a phenomenon micro scene editor free customization, arbitrary, show what I want

Technology stack

react + redux

Product analysis

product

So first of all, what can you build with this editor? When you create a scene, there’s a QR code, and you scan the QR code with your phone and you see what it looks like. It’s actually on a screen, and you swipe up and down to change the scene, just like a horse light, right

The editor

What does an editor need to do to produce the above products

  • Material library – Each element displayed on the page is called a material
    • Materials are elements that enrich the content of a page. They can be text, pictures, forms, art words, any combination of text and pictures, etc
    • Uniform editing behavior of materials includes dragging, zooming, and rotating
    • Materials can have unique properties
  • Hierarchy manager
    • There should be a hierarchy of materials displayed on each page to facilitate the arrangement of materials
  • Page manager
    • The resulting artwork will contain multiple pages, and switch pages to create on different pages
  • Working screen (design size: 320 * 480)
    • The creative work is done in this designated area
    • This shows the materials contained in the page currently being edited

The last

It seems that so long to experience if you have any questions, welcome feedback