当前位置：网站首页>Summer Challenge harmonyos realizes a hand-painted board

Summer Challenge harmonyos realizes a hand-painted board

2022-07-27 15:35:00 【51CTO】

This article is participating in the starlight project 3.0– Summer Challenge

Preface

Studying recently openHarmony, I know it just before canvas, So this article shares a hand-painted board I implemented , utilize openHarmony Built in API cnavas Component implementation .

Introduce

This is a hand drawn board , And according to the sliding screen speed , Dynamically generate line size , When the user touches the screen , Lines will be generated , And the faster , The thinner the lines .

Effect display

# Summer Challenge # HarmonyOS Realize a hand-painted board _2d

Principle analysis

1. Drawing principle

Before using , Need line understanding canvas Components , You can refer to harmonyOS Developer documentation , The documentation is very detailed , I won't go into that

First , We need to canvas Context object , It needs to be bound in the touch mobile event , Because we generate the corresponding lines by touching .

then , Attribute selection lineCap, There are three types of attribute values ：butt、round、square, I tried and found round It works better .

The property value is butt The effect of the
The property value is round
The property value is square
Actually butt The effect is not bad , The serration is too serious , although API There is built-in anti aliasing property in , But I don't know why it has no effect , Maybe the granularity is too large , Now the granularity is a little stuck , If the granularity is small, it is estimated to be more stuck
To sum up, I chose round, It will end the end of the line with a circle , So the effect is more rounded

Finally, take out the last value in the array , As moveTo Coordinates of , Take the point after moving the mouse as lineTo Coordinates of , And then through stroke Can draw an image .

Draw a straight line , Usually use moveTo () And lineTo () Two methods .. moveTo () Method is used to move the brush to the specified point and take the changed point as the starting point of the line ,lineTo () Is the end point .

        const el = this.$refs.canvas;
        this.ctx = el.getContext('2d')
        this.ctx.lineWidth =this.lineWidth/2
        this.ctx.beginPath()
        //  Add a round cap to each end of the line .
        this.ctx.lineCap = 'square'
        //  Take out the last value in the array every time , As starting point 
        this.ctx.moveTo(this.ArrX[this.ArrX.length-1],this.ArrY[this.ArrY.length-1])
        this.ctx.lineTo(e.touches[0].localX,e.touches[0].localY)
        this.ctx.stroke()
        this.ArrX.push(e.touches[0].localX)
        this.ArrY.push(e.touches[0].localY)

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

2. Line thickness

Want to calculate the line thickness through speed , Then you need to get the time between two points , Get speed through time and distance

When triggered touchmove event , Store the current timestamp , The time obtained by the last trigger event - The time obtained by the current trigger event , You can get the event interval of two triggering events , At this point, we have time between two points

Then calculate the distance between two points （ Square sum and then root ）, adopt distance / Time = Speed Calculate the speed between two points , Thus, the line thickness can be dynamically generated

        //  Calculate the line thickness 
        const currTime = Date.now()
        if(this.startTime !== 0){
            const duration = currTime - this.startTime
            //  Pass in the penultimate point and the last point , And duration , Will return the acceleration 
            const v = this.speed(this.ArrX[this.ArrX.length-2],this.ArrY[this.ArrY.length-2],this.ArrX[this.ArrX.length-1],this.ArrY[this.ArrY.length-1],duration)
            this.lineWidth =   this.lineWidth/v
            if(this.lineWidth>25){
                this.lineWidth = 25
            }
            if(this.lineWidth<1){
                this.lineWidth = 1
            }
        }
        this.startTime = currTime

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

Complete code

index.js

// @ts-nocheck
export default {
    data: {
        ctx:'',
        ArrX:[],
        ArrY:[],
        //         Starting time 
        startTime:0,
        lineWidth:14
    },
    //  Offset a lot 
    touchstart(e){
        //         Start time empty 
        this.startTime = 0
        this.ArrX.push(e.touches[0].localX)
        this.ArrY.push(e.touches[0].localY)
    },
    //     Calculate the speed of the last two points 
    speed(x1,y1,x2,y2,s){
        const x = Math.abs(x1-x2)*Math.abs(x1-x2)
        const y = Math.abs(y1-y2)*Math.abs(y1-y2)
        return Math.sqrt(x+y)/s
    },
    touchmove(e){
        //  Calculate the line thickness 
        const currTime = Date.now()
        if(this.startTime !== 0){
            const duration = currTime - this.startTime
            //  Pass in the penultimate point and the last point , And duration , Will return the acceleration 
            const v = this.speed(this.ArrX[this.ArrX.length-2],this.ArrY[this.ArrY.length-2],this.ArrX[this.ArrX.length-1],this.ArrY[this.ArrY.length-1],duration)
            this.lineWidth =   this.lineWidth/v
            if(this.lineWidth>25){
                this.lineWidth = 25
            }
            if(this.lineWidth<1){
                this.lineWidth = 1
            }
        }
        this.startTime = currTime

        const el = this.$refs.canvas;
        this.ctx = el.getContext('2d')
        this.ctx.lineWidth =this.lineWidth/2
        this.ctx.beginPath()
        //  Add a round cap to each end of the line .
        this.ctx.lineCap = 'square'
        //  Take out the last value in the array every time , As starting point 
        this.ctx.moveTo(this.ArrX[this.ArrX.length-1],this.ArrY[this.ArrY.length-1])
        this.ctx.lineTo(e.touches[0].localX,e.touches[0].localY)
        this.ctx.stroke()
        this.ArrX.push(e.touches[0].localX)
        this.ArrY.push(e.touches[0].localY)
    },
    touchend(e){
        this.startTime = 0
    }
}

     
      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.
      38.
      39.
      40.
      41.
      42.
      43.
      44.
      45.
      46.
      47.
      48.
      49.
      50.
      51.
      52.
      53.
      54.
      55.
      56.
      57.

index.hml

<div class="container">
    <canvas ref="canvas" class="canvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"/>
</div>

     1.
2.
3.
4.

index.css

.container{
    margin: 50px;
}
.canvas{
    height: 100%;
    width: 100%;
    background-color: #eee;
    border: 1px solid #ffc300;
}


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