vue3项目使用canvas绘制闸门前后水位,输入水位自动调整

<template>
  <canvas ref="canvas" height="150px" width="400px"></canvas>
</template>
<script setup>
import { onMounted, ref } from 'vue'

const canvas = ref()
let ctx = ref()
const skyLevel = 140
const groundLevel = 140 // 地面高度
const damTop = 115 // 大坝顶部高度


const drawRectangle = () => {
  ctx.value.fillStyle = 'brown' // 地面颜色
  ctx.value.fillRect(0, groundLevel, 400, 10) // 绘制地面
}

const drawRectangle1 = () => {
  ctx.value.fillStyle = '3D8FAE' // 填充颜色
  ctx.value.fillRect(150, 10, 10,105) // 绘制矩形
}

const drawWaterLevelBeforeDam = (level) => { 
  const waterHeight = skyLevel - level
  const waterWidth = (skyLevel - damTop) / Math.tan(Math.PI / 6)
  ctx.value.font = '500 20px Arial'
  ctx.value.fillStyle = 'black' // 设置文本颜色为黑色
  ctx.value.fillText('闸前', 40, 20)
  ctx.value.fillText(level+'(m)', 40,waterHeight-10)
  ctx.value.fillStyle = '#5EA3D1' // 半透明蓝色
  ctx.value.beginPath()
  ctx.value.moveTo(0, groundLevel)
  ctx.value.lineTo(150, groundLevel)
  ctx.value.lineTo(150, waterHeight)
  ctx.value.lineTo(0, waterHeight)
  ctx.value.closePath()
  ctx.value.fill()
}
const drawWaterLevelAfterDam = (level) => {
  
  const maxvalue = groundLevel - damTop
  const watermax2 = skyLevel - maxvalue
  const waterHeight = skyLevel - level  
  ctx.value.font = '500 20px Arial'
  ctx.value.fillStyle = 'black' // 设置文本颜色为黑色
  ctx.value.fillText('闸后', 230, 20)
  ctx.value.fillText(level+'(m)', 230,waterHeight-10)
  const waterWidth = (skyLevel - damTop) / Math.tan(Math.PI / 6)
  if (level <= maxvalue) {
    ctx.value.fillStyle = '#5EA3D1' // 半透明蓝色
    const waterHeight = skyLevel - level
    const waterWidth = (skyLevel - damTop) / Math.tan(Math.PI / 6)
    const leftTopY = 190 - (level * 70) / maxvalue
    ctx.value.beginPath()
    ctx.value.moveTo(190, groundLevel) // 左下角
    ctx.value.lineTo(400, groundLevel) // 右下角
    ctx.value.lineTo(400, waterHeight) // 右上角
    ctx.value.lineTo(leftTopY, waterHeight) // 左上角
    ctx.value.closePath()
    ctx.value.fill()
  } else {
    ctx.value.fillStyle = '#5EA3D1' // 半透明蓝色
    ctx.value.beginPath()
    ctx.value.moveTo(190, groundLevel) // 左下角
    ctx.value.lineTo(400, groundLevel) // 右下角
    ctx.value.lineTo(400, watermax2) // 右上角
    ctx.value.lineTo(170, watermax2) // 左上角
    ctx.value.closePath()
    ctx.value.fill()

    ctx.value.fillStyle = '#5EA3D1' // 填充颜色
    ctx.value.beginPath()
    ctx.value.moveTo(160, watermax2) // 左下角
    ctx.value.lineTo(400, watermax2) // 右下角
    ctx.value.lineTo(400, waterHeight) // 右上角
    ctx.value.lineTo(160, waterHeight) // 左上角
    ctx.value.closePath()
    ctx.value.fill()
  }
}
const drawInvertedTrapezoid = () => {
  const damHeight = skyLevel - damTop +90
  ctx.value.fillStyle = 'brown' // 填充颜色
  ctx.value.beginPath()
  ctx.value.moveTo(150, groundLevel) // 左下角
  ctx.value.lineTo(190, groundLevel) // 右下角
  ctx.value.lineTo(170, damHeight) // 右上角
  ctx.value.lineTo(150, damHeight) // 左上角
  ctx.value.closePath()
  ctx.value.fill()
}

const initContext = () => {
  ctx.value = canvas.value.getContext('2d')
}

onMounted(() => {
  initContext()
  drawRectangle()
  drawInvertedTrapezoid()
  drawRectangle1()
  drawWaterLevelBeforeDam(60) // 大坝前水位高度为 40
  drawWaterLevelAfterDam(50)
})
</script>

<style scoped>
canvas {

}
</style>

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【资源说明】 TypeScript基于canvas绘制大坝浸润线源码+使用说明.zipTypeScript基于canvas绘制大坝浸润线源码+使用说明.zip 项目说明: - 传入`大坝高度`、`大坝迎水面宽度`、`大坝背水面宽度`、`大坝坝顶宽度` 等四个参数来绘制大坝形状 - 传入`渗压传感器数据`绘制传感器点位及渗流面 initialize | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | `damHeight` | 大坝高度(m) | `number` | - | | `damLeftWidth` | 大坝迎水面宽度(m) | `number` | - | | `damRightWidth` | 大坝背水面宽度(m) | `number` | - | | `damTopWidth` | 大坝坝顶宽度(m) | `number` | - | | `seaLevel` | 坝外水位 | `number` | - | addSensor | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | `name` | 传感器名称 | `string` | - | | `value` | 传感器值(m) | `number` | - | | `distance` | 传感器距离闸门的距离(m), 闸门位置以迎水坡和背水坡为界。 | `number` | - | - distance: 有效值为 `[-damLeftWidth, +damRightWidth]`。假如迎水坡宽度为`200`,背水坡宽度为`100`, 则取值范围为`[-200, 100]`, `0`表示在闸门处。 methods | 方法名称 | 描述 | 参数 | | --- | --- | --- | | updateSensor | 更新单个传感器 | `{name, value, distance}` | | updateSensors | 全量更新传感器 | `Array<{name, value, distance}>` | 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载,沟通交流,互相学习,共同进步!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值