156 lines
4.5 KiB
Vue
156 lines
4.5 KiB
Vue
<template>
|
||
<view>
|
||
<view class="box1">
|
||
<canvas canvas-id="ecg" style="width: 3000px; height: 300px;"></canvas>
|
||
</view>
|
||
<view class="box2" :style="{'left': pLeft + 'px'}">
|
||
<canvas canvas-id="myCanvas" style="width: 3000px; height: 300px;"></canvas>
|
||
</view>
|
||
|
||
<view class="" @click="play">
|
||
点击播放{{pLeft}}
|
||
</view>
|
||
<view @click="stop">
|
||
停止播放{{pLeft}}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
dataId: '',
|
||
interval:null,
|
||
pLeft:'-10',
|
||
// list: [139, 148, 158, 168, 176, 183, 190, 196, 201, 204, 204, 203, 198, 192, 182, 170, 156, 139, 120, 101, 80, 59, 37, 16, -4, -25, -44, -63, -81, -98, -112, -124, -135, -144, -151, -157, -161, -165, -168, -172, -176, -179, -182, -184, -186, -187, -187, -185, -183, -180, -177, -174, -171, -168, -165, -162, -160, -157, -154, -151, -147, -144, -141, -139, -137, -135, -133, -132, -132, -131, -130, -128, -126, -124, -122, -119, -116, -112, -109, -106, -102, -98, -94, -89, -84, -79, -74, -68, -63, -58, -53, -50, -48, -47, -47, -48, -51, -54, -58, -61, -64, -66, -68, -69, -69, -69, -71, -74, -78, -84, -89, -96, -103, -109, -111, -110, -103, -239, -145, -9, 160, 347, 533, 693, 805, 857, 846, 773, 643, 471, 276, 86, -72, -187, -225, -206, -187, -173, -163, -159, -162, -164, -161, -155, -147, -137, -129, -119, -103, -89, -79, -71, -66, -61, -52, -44, -38, -32, -24, -15, -3, 7, 16, 25, 34, 43, 54, 64, 74, 84, 96, 109, 123, 138, 152, 166, 181, 195, 209, 222, 233, 243, 251, 257, 261, 262, 260, 256, 249, 240, 227, 212, 195, 176, 156, 134, 111, 88, 67, 46, 27, 8, -8, -24, -37, -50, -61, -71, -80, -88, -94, -98, -101, -103, -105, -107, -107, -107, -107, -107, -106, -106, -104, -102, -99, -97, -94, -91, -87, -84, -81, -78, -75, -72, -69, -66, -63, -61, -59, -57, -56, -54, -53, -52, -52, -51, -50, -49, -47, -45, -44, -42, -40, -37, -35, -32],
|
||
// list: [],
|
||
list:[
|
||
-0.0008,
|
||
-0.0016,
|
||
-0.0016,
|
||
-0.0016,
|
||
-0.0016,
|
||
-0.0008,
|
||
-0.0008,
|
||
-0.0016,
|
||
-0.0016,
|
||
-0.0024000000000000002,
|
||
-0.004,
|
||
-0.0048000000000000004,
|
||
-0.005600000000000001,
|
||
-0.007200000000000001,
|
||
-0.0088,
|
||
-0.009600000000000001,
|
||
-0.011200000000000002,
|
||
-0.012,
|
||
-0.0128,
|
||
-0.013600000000000001,
|
||
-0.015200000000000002,
|
||
-0.016,
|
||
-0.016800000000000002,
|
||
-0.0176,
|
||
-0.018400000000000003
|
||
],
|
||
height: 300,
|
||
width: 3000,
|
||
centerY: 200 // y轴中心作
|
||
}
|
||
},
|
||
onShow() {
|
||
// this.notifyMonitorValueChange();
|
||
|
||
},
|
||
|
||
onReady() {
|
||
this.list = this.list.filter(val => val !== 0)
|
||
const ctx = uni.createCanvasContext('ecg', this);
|
||
ctx.setStrokeStyle('#d5d5d5') //
|
||
ctx.setLineWidth(1) // 线条宽度
|
||
for (var x = 0.5; x < 3000; x += 15) {
|
||
ctx.moveTo(x, 0)
|
||
// 结束点
|
||
ctx.lineTo(x, 3000)
|
||
// 描边，不调用stroke则看不到画的内容
|
||
ctx.stroke()
|
||
}
|
||
for (var y = 0.5; y < 3000; y += 15) {
|
||
ctx.moveTo(0, y)
|
||
// 结束点
|
||
ctx.lineTo(3000, y)
|
||
// 描边，不调用stroke则看不到画的内容
|
||
ctx.stroke()
|
||
}
|
||
// ctx.fill();
|
||
ctx.draw()
|
||
this.drawCurve()
|
||
},
|
||
methods:{
|
||
play(){
|
||
this.interval = setInterval(() => {
|
||
console.log(123)
|
||
this.move()
|
||
},50)
|
||
},
|
||
stop(){
|
||
if(this.interval){
|
||
clearInterval(this.interval)
|
||
}
|
||
},
|
||
move(){
|
||
this.pLeft -= 1
|
||
},
|
||
|
||
drawCurve () {
|
||
let ctx = uni.createCanvasContext('myCanvas', this)
|
||
let list = this.list;
|
||
let centerY = this.centerY;
|
||
let width = this.width;
|
||
let xScale = width / (list.length - 1); // 计算每个数据点占据的宽度
|
||
let yScale = centerY / (Math.max(...list) - Math.min(...list))
|
||
// yScale *= 3
|
||
let x = 0;
|
||
let y = centerY / 2 - (list[0] * yScale)
|
||
ctx.beginPath();// 开始绘制
|
||
ctx.moveTo(x, y);
|
||
ctx.setStrokeStyle('#c96d79'); // 设置线条颜色
|
||
ctx.setLineWidth(2); // 设置线条宽度
|
||
for (let i = 1; i < list.length; i++) {
|
||
let x = i * xScale;
|
||
let y = centerY / 2 - ((list[i] / 2) * yScale); // 负数在中心下方，正数在中心上方
|
||
ctx.lineTo(x, y);
|
||
|
||
}
|
||
ctx.stroke()// 绘制线条
|
||
// ctx.fill();
|
||
ctx.draw(false);
|
||
|
||
// 绘制到canvas上，不需要等待上一步绘制完成
|
||
}
|
||
}
|
||
|
||
}
|
||
</script>
|
||
<style>
|
||
.box1 {
|
||
position: absolute;
|
||
left: 0px;
|
||
top: 50px;
|
||
width: 3000rpx;
|
||
}
|
||
|
||
.box2 {
|
||
position: absolute;
|
||
left: 0px;
|
||
top: 50px;
|
||
width: 3000rpx;
|
||
|
||
}
|
||
|
||
.myScoll {
|
||
width: 100%;
|
||
height: 500rpx;
|
||
white-space: nowrap;
|
||
position: relative;
|
||
}
|
||
</style> |