Commit 51ed3a8d authored by xinzhedeai's avatar xinzhedeai

add:po0 guan0

parent cd8efe41
...@@ -215,11 +215,16 @@ export default { ...@@ -215,11 +215,16 @@ export default {
this.poImage = new Image(); this.poImage = new Image();
this.poImage.src = require('@/assets/images/jrx/po.png'); this.poImage.src = require('@/assets/images/jrx/po.png');
// 加载 guan.png
this.guanImage = new Image();
this.guanImage.src = require('@/assets/images/jrx/guan0.png');
// 等待所有图片加载完成 // 等待所有图片加载完成
Promise.all([ Promise.all([
new Promise(resolve => this.bgImage.onload = resolve), new Promise(resolve => this.bgImage.onload = resolve),
new Promise(resolve => this.waterImage.onload = resolve), new Promise(resolve => this.waterImage.onload = resolve),
new Promise(resolve => this.poImage.onload = resolve) new Promise(resolve => this.poImage.onload = resolve),
new Promise(resolve => this.guanImage.onload = resolve)
]).then(() => { ]).then(() => {
// 所有图片加载完成后绘制 // 所有图片加载完成后绘制
this.drawAllImages(); this.drawAllImages();
...@@ -252,6 +257,22 @@ export default { ...@@ -252,6 +257,22 @@ export default {
); );
this.ctx.restore(); this.ctx.restore();
// 3. 绘制 guan0.png(po.png 右侧中间,上层)
this.ctx.save();
this.ctx.setTransform(1, 0, 0, 1, 0, 0);
// 计算位置:
// po.png 右侧 x 坐标 = po.png x + po.png 宽度 = 0 + 879 = 879
// po.png 垂直中间 y 坐标 = po.png y + po.png 高度/2 = (canvas.height - 150) + 75 = canvas.height - 75
// guan0.png 垂直居中需要 y = po.png中间y - guan0.png高度/2 = (canvas.height - 75) - (121/2) = canvas.height - 135.5
const guanX = 879-150;
const guanY = this.canvas.height - 135.5;
this.ctx.drawImage(
this.guanImage,
guanX, guanY, // 目标位置(右侧中间)
6, 121 // 目标尺寸(宽6px,高121px)
);
this.ctx.restore();
// 2. 绘制 water.png(临时恢复默认坐标系,避免翻转) // 2. 绘制 water.png(临时恢复默认坐标系,避免翻转)
this.ctx.save(); // 保存当前变换状态 this.ctx.save(); // 保存当前变换状态
this.ctx.setTransform(1, 0, 0, 1, 0, 0); // 恢复默认变换(不翻转) this.ctx.setTransform(1, 0, 0, 1, 0, 0); // 恢复默认变换(不翻转)
......
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