Commit 76936d94 authored by xinzhedeai's avatar xinzhedeai

add:po 动态test 数量4

parent 8ec065fa
......@@ -159,7 +159,7 @@ export default {
// Canvas绘制配置(支持批量扩展)
poConfigs: [
{ x: 0, y: null, width: 879, height: 150 }, // 第一张po.png配置
{ x: 0, y: null, width: 879 - 250, height: 150 } // 第二张po.png配置(宽度减少250px)
{ x: 0, y: null, width: 879 - 250, height: 150 }, // 第二张po.png配置(宽度减少250px)
],
guanConfigs: [
{ x: null, y: null, width: 6, height: 121, image: 'guanImage' }, // 第一张guan0.png
......@@ -180,6 +180,28 @@ export default {
this.pageApi.created && this.pageApi.created();
},
mounted() {
// 数据清洗
const canvasH = 600
this.poConfigs = []
for (let index = 0; index < 4; index++) {
this.poConfigs.push({
x: 0, y: canvasH-((index+1)*150), width: 879 - (index*250), height: 150
})
// this.guanConfigs.push({
// x: null, y: null, width: 6, height: index==0?121:200, image: 'guanImage'
// })
}
// lineConfigs: [
// { points: [], color: 'red', lineWidth: 2 }, // 红色连接线配置
// { points: [], color: 'yellow', lineWidth: 2 } // 黄色连接线配置
// ]
this.$nextTick(() => {
this.loadData();
});
......@@ -232,11 +254,10 @@ export default {
this.ctx.save();
this.ctx.setTransform(1, 0, 0, 1, 0, 0);
// 动态计算y坐标(若未指定则默认画布底部-高度)
const y = config.y ? config.y : (this.canvas.height - config.height);
this.ctx.drawImage(
this.poImage,
config.x,
y,
config.y,
config.width,
config.height
);
......@@ -308,12 +329,13 @@ export default {
this.drawBackground();
// 2. 绘制po.png(遍历配置数组)
console.log(this.poConfigs, 'poConfigs')
this.poConfigs.forEach((config, index) => {
// 第二张po.png的y坐标需要基于第一张计算(顶部对齐)
if (index === 1) {
const prevPo = this.poConfigs[0];
config.y = (canvasHeight - prevPo.height) - config.height; // 第一张顶部位置 - 自身高度
}
// // 第二张po.png的y坐标需要基于第一张计算(顶部对齐)
// if (index === 1) {
// const prevPo = this.poConfigs[0];
// config.y = (canvasHeight - prevPo.height) - config.height; // 第一张顶部位置 - 自身高度
// }
this.drawPoImage(config);
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment