Shulou(Shulou.com)06/03 Report--

This article mainly explains "the methods and steps of grid line design of visual platform". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "the methods and steps of grid line design for visual platform construction".

H5-Dooring update log

Add canvas grid guides and quick toggle

Add text Jockey Lantern component

Canvas manipulation controls support drag and drop

Dooring using video tutorials

Automatic association of multi-page links

Grid guides for visual editors

Grid guides are designed to allow H 5 makers to more accurately control the location and size of components as design assistance. We can use keyboard shortcuts ctrl + h (window system) or comand + h to show or hide the reference grid, similar to PS software. Let's take a look at the details:

This feature requires nothing more than two key points:

Draw gridlines

Monitor keyboard events to show / hide gridlines

Draw gridlines

There are many ways to draw grid lines, such as background picture repetition, canvas drawing, css realization. Here the author adopts the third scheme.

The author's idea of using css is to do it through background gradient, and 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 let them repeat the drawing, the code is as follows:

{backgroundImage: linear-gradient (90deg, # ccc 5% focus 0), linear-gradient (# ccc 5% charge 0); backgroundSize: 15px 15px; backgroundRepeat: repeat}

More in-depth knowledge of css3 can refer to my article, the author will not introduce it in detail here. Our final results are as follows:

Monitor keyboard events to show / hide gridlines

Monitoring keyboard events here the author recommends a relatively easy-to-use library keymaster, which is a necessary keyboard shortcut plug-in for almost any powerful online editor. Support single key and key combination monitoring, as well as listening list. We just need to define ctrl + h and command + h, and perform logical operations inside the listener function, as follows:

/ / dva modal showGrid (state) {overSave ('showGrid',! state.showGrid) return {... state, showGrid:! state.showGrid}}, / / display guide key (' ⌘ + h, ctrl+h', () = > {dispatch ({type: 'editorModal/showGrid'})) }) at this point, I believe you have a deeper understanding of "the methods and steps of grid line design for visual platform construction". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.