H5-dooring has been very busy recently, and h5-Dooring is also under continuous iteration. Next, I will introduce the new functions of H5-Dooring and introduce the implementation scheme of grid reference line. The content is very short, and the implementation scheme is also very simple.

H5-dooring Update log

  • Add canvas mesh guides and shortcut toggles
  • Added text running lantern component
  • The Canvas manipulation control supports drag and drop
  • Dooring uses video tutorials
  • Multiple page links are automatically associated

Grid guides for implementing visual editors

The grid reference lines are designed to give H5 makers more precise control over the location and size of components as a design aid. We can use keyboard shortcuts CTRL + H (Windows) or COMand + H to show or hide the reference grid, similar to PS software. Let’s look at the details:

There are two key points to this functionality:

  • Draw grid lines
  • Listen for keyboard events to show/hide grid lines

Draw grid lines

There are many schemes for drawing grid lines, such as background picture repetition, Canvas drawing and CSS implementation. Here, the author adopts the third scheme.

Using CSS to achieve the author’s idea is to do through the background gradient, the principle is as follows:

We know that CSS3 supports multiple backgrounds, so we can use the background gradient to draw a vertical rectangle and a horizontal rectangle, and then set the width and height to repeat them, as follows:

{
  backgroundImage: 
    linear-gradient(90deg.#ccc 5%,transparent 0),
    linear-gradient(#ccc 5%, transparent 0);
  backgroundSize: 15px 15px;
  backgroundRepeat: repeat
}
Copy the code

For more in-depth knowledge of CSS3, please refer to my article, which I will not introduce in detail. Our final results are as follows:

Listen for keyboard events to show/hide grid lines

Listening for keyboard events I recommend keyMaster, a handy library that is a must-have keyboard shortcut for almost any powerful online editor. Supports single key and combination key listening, as well as listening lists. We only need to define CTRL + H and Command + h, and perform the logical operation inside the listener function, as follows:

// dva modal
showGrid(state) {
  overSave('showGrid', !state.showGrid)
  return { 
    ...state, 
    showGrid: !state.showGrid
  }
},
// Display the guides
key('⌘ + h, CTRL + h'.() = > {
  dispatch({
    type: 'editorModal/showGrid'
  });
})
Copy the code

Online experience address: H5 editor | building block structures, H5 page quickly

More recommended

  • Easy to teach you to handle components drag, zoom, multi-control point scaling and drag data report
  • Based on natural flow layout visual drag build platform design
  • How to build building blocks to quickly develop H5 pages?
  • Low code development platform core function design — component custom interaction implementation
  • How does the front end generate multi-dimensional data visualization analysis report with one click
  • How to design template library in H5 editor and realize automatic generation of cover art