Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
V
V3-TailingPond
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
xinzhedeai
V3-TailingPond
Commits
51ed3a8d
Commit
51ed3a8d
authored
Jun 23, 2025
by
xinzhedeai
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
add:po0 guan0
parent
cd8efe41
Changes
1
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
83 additions
and
62 deletions
+83
-62
index.vue
src/views/dataMonitor/jrx/history/index.vue
+83
-62
No files found.
src/views/dataMonitor/jrx/history/index.vue
View file @
51ed3a8d
...
@@ -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
);
// 恢复默认变换(不翻转)
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment