Based on the exploration experience of participating in the visualization project, the author has made a sort of key points of the layout of the front and back of the visualization project. Because the most difficult and important area is the layout design of the canvas area, while other areas are relatively simpler, this time I will share the layout scheme of this area.
Background layout design
Let’s take a look at the general framework of the background project:
Background projects usually have a header with some functionality or options.
Then there’s the left component area. Whether you’re doing visual page generation, visual form generation, or big screen data projects, this is a great place to put a list of components that have been added to the canvas.
Next comes the configuration items area on the far right, which holds the list of configuration items for the currently selected component.
The last one is the focus: the canvas area. I was not satisfied with the layout of the canvas area when I first got in touch with the visualization project. Later, AFTER many explorations, I found a relatively satisfactory layout scheme.
Let’s take a look at the canvas area demo based on this scheme:
The gray area can be viewed as our screen (think of it as the screen size of a mobile phone).
The gray area and the background image (think of it as a real big screen) have some spacing, which is added for the background to make it easy to view and edit.
You can see in the header there I put a control bar, which controls the zoom of the canvas.
Finally, the background picture inside is the real canvas area. According to the current PREFERENCES of UI and the current display ratio on the market, the original size of the canvas is generally set as 1920 * 1080, which corresponds to the 16:9 scale.
According to the above description, the solution uses four layers to implement, look at the code (I did it based on Vue, the principle of other frameworks is the same) :
<! The first layer (imaginary device screen layer) is used to define the maximum width (imaginary phone screen width). The width of itself is set by absolute in this example (of course you can use other methods to set). When the content inside exceeds its width, there will be a scroll bar.
<div class="screen-layer">
<! The second layer is used to set the size and position of the viewport (this layer can be omitted), usually leaving a white edge of dozens of pixels for easy viewing and operation, which can be imagined as a blank edge around a Word document). The size is scaled according to the size of the original canvas.
<div class="viewport-layer" :style="computeViewport">
<! -- Layer 3: Zoom control layer, used to scale the canvas size -->
<div class="scale-layer" :style="computeScale">
<! -- Layer 4: Canvas, size is the initial canvas size, for example: 1920 * 1080 -->
<div class="canvas-layer" :style="computeCanvas"></div>
</div>
</div>
</div>
Copy the codeIf you don’t need white space, you can remove the second layer and make it three.
The style of each layer needs to be calculated on its own, it is very simple, here is the relevant sample code:
export default {
data() {
return {
scale: 1.canvasWidth: 1920.canvasHeight: 1080}; },computed: {
computeScale() {
return {
transform: `scale(The ${this.scale}) `}; },computeViewport() {
return {
width: Math.round(this.scale * this.canvasWidth + 50) + "px".height: Math.round(this.scale * this.canvasHeight + 50) + "px"}; },computeCanvas() {
return {
width: this.canvasWidth + "px".height: this.canvasHeight + "px"}; }},}Copy the codeFinally, paste the class of each layer:
.screen-layer {
position: absolute;
top: 60px;
left: 100px;
right: 100px;
bottom: 30px;
overflow: auto;
box-shadow: 0 0 4px 2px #ccc;
background: url(../assets/bg_m.png) center / 8px 8px;
}
.viewport-layer {
display: flex;
justify-content: center;
align-items: center;
min-width: 100%;
min-height: 100%;
}
.scale-layer {
transition: transform ease 0.15 s;
transform-origin: center center;
box-shadow: rgba(0.0.0.0.24) 0px 2px 4px 0px;
}
.canvas-layer {
position: relative;
background: url(../assets/canvas_bg.jpeg) center / 100% 100% no-repeat;
}
Copy the codeThis is the layout of the background canvas area. The following front layout is similar to the background layout, but without the second layer of white edges.
Front desk Layout design
The foreground is very simple, just need to show the entire canvas, that is, need to be full browser, of course, this is also based on your actual needs, this article will be full to do.
Take a look at the renderings:
Without further ado, on the code:
<! -- Layer 1: Illusion screen layer -->
<div class="screen-layer">
<! -- Second layer: zoom layer, used to control the zoom of large screen content to fit -->
<div class="scale-layer" :style="computeScale">
<! -- Layer 3: large screen layer, according to the real size layout -->
<div ref="screen-layout" :style="computeSize" class="screen-layout">
</div>
</div>
</div>
Copy the codeYou can see the lack of white space compared to the background canvas.
For the corresponding logic, note that the zoom scale needs to be calculated based on the browser window size:
data() {
return {
width: 1920.height: 1080.scale: "scale(1)"}; },computed: {
computeScale() {
return {
transform: this.scale,
};
},
computeSize() {
return {
width: this.width + "px".height: this.height + "px"}; }},mounted() {
this.watchResize();
},
methods: {
/** * listen for window changes */
watchResize() {
// Set a zoom scale when the page is initially loaded
this.calcScale();
// When the window size changes
window.addEventListener(
"resize",
debounce(() = > {
this.calcScale();
}, 150)); },/** * computes the scale */
calcScale() {
const scale = {
x: window.innerWidth / this.width,
y: window.innerHeight / this.height,
};
this.scale = `scale(${scale.x}.${scale.y}) `; }},Copy the codeCorresponding canvas section style:
/* The size of the screen layer can be set in a variety of ways, using absolute is relatively easy, and can be adapted to browser adjustments */
.screen-layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.scale-layer {
transform-origin: left top;
}
.screen-layout {
background: url(../assets/canvas_bg.jpeg) center center / 100% 100% no-repeat;
}
Copy the codeFull Project Address
Gitee.com/kybetter/da…