CodePen Embed - Layout View

Live

​x
 
<script type="text/template" id="template">
  <scrollview id="container" scrollY = "true">
    <text class="text lineHeightText" value="View使用示例"></text>
  
    <text class="text" value="要了解View，首先要学习Flex布局，这非常重要。"></text>
    <text class="text" value="Flex很强大，但不外乎下面几个要点，尝试仔细理解它！"></text>
    <text class="text " value="flexDirection 默认是column，所以默认是一行一行往下排列。"></text>
    
    <view class="flexContainer">
      <view class="flexItem">1</view>
      <view class="flexItem">2</view>
      <view class="flexItem">3</view>
    </view>
  
    <text class="text " value="你可以设置为row，改变盒子的排列方向"></text>
  
    <view class="flexContainer flexContainerRow">
      <view class="flexItem">1</view>
      <view class="flexItem">2</view>
      <view class="flexItem">3</view>
    </view>
  
    <text class="text " value="大部分时候，你可以通过alignItems让盒子们都垂直居中对齐"></text>
  
    <view class="flexContainer flexContainerRow flexContainerVerticalCenter">
      <view class="flexItem">1</view>
      <view class="flexItem">2</view>
      <view class="flexItem">3</view>
    </view>
  
   <text class="text " value="如果横向也要居中，再加个 justifyContent 设置即可"></text>
  
    <view class="flexContainer flexContainerRow flexContainerVerticalCenter flexContainerHorizontalCenter">
      <view class="flexItem">1</view>
      <view class="flexItem">2</view>
      <view class="flexItem">3</view>
    </view>
  </scrollview>
</script>
​
<script id="style">
  window.styleValue = {
    container: {
      width: 1000,
      height: 1200,
      backgroundColor: '#f7f7f7',
    },
    text: {
      width: '100%',
      fontSize: 30,
      marginTop: 10,
    },
    lineHeightText: {
      height: 50,
      fontSize: 30,
      lineHeight: 50,
      textAlign: 'center',
    },
    flexContainer: {
      width: '100%',
      height: 200,
      backgroundColor: 'white',
      marginTop: 10,
    },
    flexContainerRow: {
      flexDirection: 'row',
    },
    flexItem: {
      width: 50,
      height: 50,
      margin: 5,
      backgroundColor: '#f2a93b',
    },
    flexContainerVerticalCenter: {
      height: 200,
      alignItems: 'center',
    },
    flexContainerHorizontalCenter: {
      justifyContent: 'center',
    }
  }
</script>
​
<canvas id="canvas">

Live

xxxxxxxxxx
 
import Layout from "https://cdn.skypack.dev/minigame-canvas-engine";
​
/**
 * 只需要在Web端调试场景下引用
 * 引入minigame-canvas-engine-devtools之后，layoutDevtools会自动挂载到windows
 */
import LayoutDevTools from "https://cdn.skypack.dev/minigame-canvas-engine-devtools";
window.layoutDevtools.init(Layout);
​
const template = document.getElementById("template").innerHTML;
const style = eval(document.getElementById("style").innerHTML);
​
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
​
Layout.init(template, style);
​
const container = Layout.getElementsById("container")[0];
​
// 设置canvas的尺寸和样式的container比例一致
canvas.style.width = container.style.width / 2 + "px";
canvas.style.height = container.style.height / 2 + "px";
canvas.width = container.style.width;
canvas.height = container.style.height;
​
Layout.updateViewPort(canvas.getBoundingClientRect());
​
Layout.layout(context);
​

This Pen is owned by yuanzm on CodePen.

See more by @yuanzm on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.