wechat-miniprogram / minigame-canvas-engine Goto Github PK

  <view class="container" id="main">
<scrollview class="list" scrollY="true">
        {{~it.data :item:index}}
            <view class="listItem">
              <text class="listItemNum" value="{{= index + 1}}"></text>
              <text class="listItemName" value="{{= item.nickname}}"></text>
              <text class="listItemScore" value="{{= item.rankScore}}"></text>
            </view>
        {{~}}
    </scrollview>
<view class="selfListItem">
        <text class="listItemScore" value="{{= item.rankScore}}"></text>
        <text class="listItemName" value="{{= it.self.nickname}}"></text>
        <text class="listItemNum" value="{{= it.selfIndex}}"></text>
    </view> 
</view>


window.styleValue = {
 container: {
    width: 375,
    height: 812,
  	alignItems:'center',
},

list: {
    width          : 263,
    height         : 262,     
},

listItem: {
    width: 263,
    height: 64,
    flexDirection: 'row',
    alignItems: 'center',
  	backgroundColor:'rgba(166, 96, 255, 1)',
  	borderBottomWidth:1,
  	borderColor:'rgba(255, 255, 255, 0.1)',
},

listItemNum: {
  	width:40,
  	marginLeft:8,
    fontSize: 16,
    fontWeight: 'bold',
color:'#ffffff',
  	textAlign:'center',
},	


listItemScore: {
    fontSize: 16,
  	color:'#ffffff',
    textAlign: 'right',
  	flex:1,
  	marginRight:8,
},

listItemName:{
    fontSize: 16,
    fontWeight: 'bold',
color:'#ffffff',
  	marginLeft:32,
},

selfListItem: {
  	width:335,
  	height:66,
   	borderRadius: 4,
  	borderWidth: 2,
  	borderColor: '#ffffff',
   	flexDirection: 'row',
    alignItems: 'center',
    },
}

/**
  * xml为编辑器实例，挂载到window对象，通过xml.getValue可以拿到模板字符串
  * style为编辑器实例，挂载到window对象，通过style.getValue可以拿到样式对象的字符串值
  * 控制台默认
  */
let xmlValue   = window.xml.getValue();
let styleValue = window.style.getValue();
let styleObj = eval(styleValue);

// 创建mock数据
let item = {
  nickname: "zim",
  rankScore: 1,
  avatarUrl: 'https://res.wx.qq.com/wechatgame/product/webpack/userupload/20191119/wegoing.jpeg',
};
let datasource =  {
  data     :[],
  selfIndex: 1,
  self     : item
}
for ( let i = 0; i < 20;i++ ) {
  var cp = JSON.parse(JSON.stringify(item));
  cp.rankScore = Math.floor(Math.random()*1000+1)
  datasource.data.push(cp);
}

// 将XML模板编译成XML字符串
let tempFn     = window.doT.template(xmlValue);
let resultText = tempFn(datasource);

function init() {
// getElementPagePosition为IDE内置函数
    let pos = window.getElementPagePosition(canvas);
    // 每次初始化之前先执行清理逻辑保证内存不会一直增长
    Layout.clear();
    // 初始化引擎
    Layout.init(resultText, styleObj);

// 设置canvas的尺寸和样式的container比例一致
    canvas.width = 375;
    canvas.height = 812;
    canvas.style.width =  '375px';
    canvas.style.height = '812px';

    Layout.updateViewPort({
      x     : 0,
      y     : 0,
      width : 375,
      height: 812,
    });

    Layout.layout(context);
  }

 init();
 window.onresize = init;

const template = `  <view id="container">
    <text id="testText" class="redText" value="hello canvas"></text>
  </view>`;
const style = {
  container: {
    width: 800,
    height: 400,
    backgroundColor: '#f3f3f3',
    justifyContent: 'center',
    alignItems: 'center',
  },
  testText: {
    color: '#ffffff',
    width: '100%',
    height: '100%',
    lineHeight: 400,
    fontSize: 80,
    textAlign: 'center',
  },
  // 文字的最终颜色为#ff0000
  redText: {
    color: '#ff0000',
  }
}
// 绘制一个页面
export function openPage() {
    let canvas = wx.createCanvas();
    let context = canvas.getContext('2d');
    Layout.init(template, style);
    Layout.updateViewPort(canvas.getBoundingClientRect());
    Layout.layout(context);
}