当前位置：网站首页>Dayu200 experience officer homepage AITO video & Canvas drawing dashboard (ETS)

Dayu200 experience officer homepage AITO video & Canvas drawing dashboard (ETS)

2022-07-06 22:51:00 【51CTO】

Catalog

0. explain
1. Homepage video playback

1.1 Video Component summary
1.2 Open screen video implementation

2. Canvas Draw dashboard

2.1 Interface Analysis
2.2 Draw a dial

0. explain

OH System version ：OpenHarmony3.1Release
IDE： 3.0.0.900
Implement language ：ets

APP Open screen videos are quite common ,dayu200 Support video playback ,3.5 The headphone port also outputs audio normally .
Dial is very common in modern cars , There are many styles , Different style ,OHOS API8 It also supports rich 2D Drawing ability , It is relatively easy to draw the dial . The above two are to prepare for the smart cockpit . The combination of the two is shown below ：

1. Homepage video playback

1.1 Video Component summary

Reference address ： be based on TS Of Video Component description
Video The development process is as follows ：

Create a video control object ：

// One VideoController Objects can control one or more video.
controller: VideoController = new VideoController();
controller.start()、 pause()、 stop() 、
setCurrentTime(number,SeekMode) Specify the progress location , And specify the flip mode （ Before and after 、 Recent keyframes and accurate jumps ）、
requesFullscreen(boolean)、exitFullscreen()

     1.
2.
3.
4.
5.

Get the video path ：@State srcs: Resource = $rawfile(‘video1’); Network video can also , Need configuration INTERNET jurisdiction . It is worth noting that , You can also visit through Data Ability Video path provided , That is to say, distributed video can also be realized .
Set up Video attribute ：muted（ Is it mute? ）、autoPlay（ Auto play ）、controls（ Control bar ）、objectFit（ display mode ）、loop（ Loop or not ）. among ,objectFit The parameter setting value is ImageFit.Cover Then spread the whole container .
Video event ：

It needs to be noted that , utilize onFinish（） event , It can realize that after playing the video, we can jump directly to APP Inside .

1.2 Open screen video implementation

Create a new one based on ETS Language project , stay index.ets in , First create a video control object , And video path .

 @State srcs: Resource = $r('app.media.aito');
  @State previewUris: Resource = $r('app.media.car_cover'); // Preview the cover 
  controller: VideoController = new VideoController();

     1.
2.
3.

stay Component Medium build Create Video Components , Use Column The container holds ,

        Column() {
        Video({
          src: this.srcs,
          previewUri: this.previewUris,
          controller: this.controller
        }).width('100%').height('100%')
          .objectFit(ImageFit.Cover)
          .autoPlay(true)
          .controls(false)
          .onStart(() => {
            console.error('onStart');
          })
          .onPause(() => {
            console.error('onPause');
          })
          .onFinish(() => {
            console.error('onFinish');
            router.push({url:'pages/gauge'})
          })
      }.backgroundColor('white').height("100%")

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

Then run the video control when creating the page start Method

2. Canvas Draw dashboard

2.1 Interface Analysis

Reference address ： Canvas components There are many ways to draw images , Here we mainly summarize the commonly used and used in instrument drawing .

establish CanvasRenderingContext2D object

 private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private fuel_gauge: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);

     1.
2.

event ：
onReady(callback: () => void) Event callback of canvas component , You can draw at this time .
attribute ：

// shadow 
shadowBlur	number	0.0	 Set the blur level when painting shadows , The higher the value, the more fuzzy , Accuracy of float.
shadowColor	<color>	-	 Set the shadow color when drawing shadows .
shadowOffsetX	number	-	 Set the horizontal offset value from the original object when drawing shadows .
shadowOffsetY	number	-	 Set the vertical offset value from the original object when drawing shadows .
// Color 
fillStyle、strokeStyle 
// Line width 、 Writing style 、 Line end style 
lineWidth
front
lineCap	string	‘butt’	 Specify the style of the end of the line , Optional value is ：
	- ‘butt’： Line ends in a square .
	- ‘round’： The end of the line ends in a circle .
	- ‘square’： Line ends in a square , Under this style, a segment with the same length and thickness will be added , A rectangle whose width is half the thickness of the line segment .

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

Provide drawing methods

// square 
   this.fuel_gauge.fillStyle = '#0000ff'
   this.fuel_gauge.fillRect(20, 160, 150, 100)// The starting point , Wide and high 
// Frame   No fill 
  1. this.context.strokeRect(30, 30, 200, 150)// Rectangular outline 
  2. stroke(path?: Path2D): void // Draw the outline 
          this.context.moveTo(25, 25)
          this.context.lineTo(25, 105)
          this.context.strokeStyle = 'rgb(0,0,255)'
          this.context.stroke()
// Delete the unwanted area -  Often used when refreshing graphics 
clearRect(x: number, y: number, w: number, h: number): void
// circular 
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void
          this.context.beginPath()
          this.context.arc(100, 75, 50, 0, 6.28)
          this.context.stroke()
// written words 
fillText(text: string, x: number, y: number): void
// picture 
drawImage(image: ImageBitmap, dx: number, dy: number): void
drawImage(image: ImageBitmap, dx: number, dy: number, dWidth: number, dHeight: number): void

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

How to make the graph move
You can get the system time , Or use setTime To dynamically refresh the image . It seems that the figure is moving, but in fact, some structures are rotating 、 Move or zoom

// turn 
rotate(rotate: number): void // Rotate clockwise for the current axis .
// The zoom 
scale(x: number, y: number): void // Set up canvas The scaling transformation attribute of the canvas , Subsequent painting operations will scale according to the scale .

     1.
2.
3.
4.

gauge Components
Speaking of drawing instrument dial ,gauge Components are also commonly used . and Text Like components ,gauge Highly defined , We can only define parameters simply .gauge Is used as follows ：

// Images can vary with parameters 
          // Electricity meter 
          Gauge({ value: this.fuel_value, min: 0, max: 120 })
            .startAngle(210)
            .endAngle((this.fuel_value))
            .colors([[0xF01020, 1],[0xCFB53B, 1], [0x5BA854, 1]])
            .strokeWidth(20)
            .width(120)
            .height(120)
            .margin({top:30})

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

The effect is as follows ：
#DAYU200 Experience Officer # home page aito video &Canvas Draw dashboard （ets）_Dayu200_03

2.2 Draw a dial

First create 2D Draw objects , And the variables used

private settings: RenderingContextSettings = new RenderingContextSettings(true);
private car_gauge: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);

     1.
2.

Then draw the disc and numbers ：

 // Speedometer 
          Canvas(this.car_gauge)
            .width('45%')
            .height('20%')
            .backgroundColor('#000000')
            .onReady(() => {
              // Epicyclic ring - The speed of the car 
              this.car_gauge.clearRect(-100, -100, 600, 600);
              this.car_gauge.beginPath()
              this.car_gauge.translate(0, 0)
              this.car_gauge.shadowBlur=30
              this.car_gauge.shadowColor=this.car_gauge_col
              this.car_gauge.arc(this.gauge_speed_x, this.gauge_speed_y, 100, 0, 6.28)
              this.car_gauge.fillStyle = 'black'
              this.car_gauge.fill()
              this.car_gauge.closePath()
              // Digital ring 
              this.car_gauge.beginPath()
              this.car_gauge.translate(this.gauge_speed_x, this.gauge_speed_y)
              this.car_gauge.font = '20px bold'
              this.car_gauge.textAlign = 'center'
              this.car_gauge.textBaseline = "middle"
              this.car_gauge.fillStyle = "#cfb35b"
              for (var i = 0;i < this.car_speed.length; i++) {
                this.car_gauge.fillText(
                  this.car_speed[i],
                  80 * Math.cos(((i * 30 - 60) * Math.PI) / 180),
                  80 * Math.sin(((i * 30 - 60) * Math.PI) / 180)
                );
              }
              this.car_gauge.closePath()
              // Speed 
              this.car_gauge.beginPath()
              this.car_gauge.translate(-this.gauge_speed_x, -this.gauge_speed_y)
              this.car_gauge.fillStyle = '#0000000'
              //this.car_gauge.fillText("Km/H", 0, 25, 20)
              this.car_gauge.closePath()

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.

Draw pointer , The pointer needs to rotate a certain angle , So the coordinates must be fixed in the center of the disc

              // Speed pointer 
              this.car_gauge.beginPath()
              this.car_gauge.arc(this.gauge_speed_x, this.gauge_speed_y, 10, 0, 6.28)
              this.car_gauge.fillStyle = 'red'
              this.car_gauge.fill()
              this.car_gauge.closePath()
              var radius = Math.PI / 120 * this.car_velocity
              this.car_gauge.save()
              this.car_gauge.beginPath()
              this.car_gauge.translate(this.gauge_speed_x, this.gauge_speed_y)
              this.car_gauge.lineWidth = 8
              this.car_gauge.strokeStyle = 'red'
              this.car_gauge.lineCap = 'round'
              this.car_gauge.rotate(radius)
              this.car_gauge.moveTo(0, 0)
              this.car_gauge.lineTo(0, 60)
              this.car_gauge.stroke()
              this.car_gauge.closePath()
              this.car_gauge.restore()
            })

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

The effect of the dial is as follows ：
#DAYU200 Experience Officer # home page aito video &Canvas Draw dashboard （ets）_ The dashboard _04
Use the timer to change the pointer rotation angle and shadow color effect , Combined with the homepage video , Get the sample shown in front of the post .

  update_canvas()
  {
    var that = this;
    that.car_velocity =0
    that.intervalID  = setInterval(function(){
      // prompt.showToast({
      // message:"car_velocity"+that.car_velocity,
      // })
      that.car_velocity +=10;
      that.fuel_value +=20
      if(that.car_velocity>120)
      {
        that.car_gauge_col = 'red'
      }
      if(that.car_velocity>240)
      {
        that.car_velocity=0;
        that.fuel_value=60
        clearInterval(that.intervalID)
      }
    },80)
  }

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.