当前位置：网站首页>Constantly changing harmonyos custom JS components during the Spring Festival - Smart Koi

Constantly changing harmonyos custom JS components during the Spring Festival - Smart Koi

2022-07-04 03:01:00 【Harmonyos technology community】

The Spring Festival keeps changing , This article is being attended 「 Project starlight - Spring festival activities 」

author ： Bao Yuedong

brief introduction

Today I will show you how to use pure JS Code Canvas Draw a swimming Koi

Let's take a look at the renderings first

# The Chinese New Year keeps changing #HarmonyOS Customize JS Components — Smart Koi _ Custom components

Realize the idea

Split

First look at the design drawings , Our little fish by the head 、 fin 、 The body 、 Arthropod 、 The tail consists of five parts .

# The Chinese New Year keeps changing #HarmonyOS Customize JS Components — Smart Koi _JS_02

The implementation of each part is given below api

The head is a solid circle , Can pass canvas.arc()
The fin is composed of a straight line and a curve , use path, Curves can use Bezier curves canvas.quadraticCurveTo().
The body is made up of two straight lines and curves , Bezier curve is also selected , Through the control point, you can control the small fish fat and thin
Arthropod 1 It consists of two solid circles and a trapezoid . The trapezoid can be seen as four closed line segments .
Arthropod 2 By a trapezoid and a circle , The scheme is the same as above
The tail consists of two triangles , It is also a closed segment

Parameters

Datum dimension parameters

First, we set a benchmark size parameter to control the size of the small fish , Here we choose the radius of the fish head R

Other parameters are as follows ：

 The length of the small fish is set to ：3.2R
 Arthropod 1 The radius of the big circle is set to ：0.7R
 Arthropod 1 The radius of the middle circle is set to ：0.7*0.6R=0.42R
 Arthropod 1 The trapezoid height is set to ：(0.7+0.42)R=1.12R
 Arthropod 2 The radius of the small circle is set to ：0.4*0.42R=0.168R
 Arthropod 2 The trapezoid height is set to ：0.42*（0.4+2.7）R=1.302R
 Total length of small fish ：R+3.2R+1.12R+0.168R+1.302R=6.79R
 The length and width of the canvas ：2*(6.79R-R-1.6R)=2*4.19R=8.38R

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

The overall size of the fish is as follows ：

# The Chinese New Year keeps changing #HarmonyOS Customize JS Components — Smart Koi _JS_03

It is worth noting that , The length of the canvas is not equal to the length of the fish , Because the center of gravity of the small fish is not located in the center of the fish's length , It's the center of the little fish , But the little fish turns around it , Therefore, the radius of our canvas needs to be expanded into the length from the center of the small fish body to the tail of the small fish , The size of the entire canvas =4.19R*4.19R, as follows

# The Chinese New Year keeps changing #HarmonyOS Customize JS Components — Smart Koi _ Custom components _04

Datum rotation parameter

In order to make our little fish turn around , Here we need a rotation angle , We choose fishMainAngle As a protagonist .

Implementation steps

Customize a Canvas The components of

Hold the context relevant to the drawing

onAttached() {
    setTimeout(() => { // Here we need to delay getting canvas
    	this.canvas = this.$refs.fishcanvas.getContext('2d', {antialias: true});
    	this.onDraw()
    },200)
}

     1.
2.
3.
4.
5.
6.

Here we delay 200ms, stay js In order to get hml Defined fishcanvas Components , to context And hold . Then perform onDraw Drawing

Define the drawing method

onDraw() {
    // Clear the canvas 
    this.clearCanvas()
    // Draw the small fish head 
    this.drawHead(this.canvas,fishAngle)
    // Draw the left and right small fins 
    this.drawFins(this.canvas, leftFinsPoint, this.FIND_FINS_LENGTH, fishAngle, false);
    this.drawFins(this.canvas, rightFinsPoint, this.FIND_FINS_LENGTH, fishAngle, true);
    // Draw the arthropod 1
    let middleCircleCenterPoint = this.drawSegment(this.canvas, bodyBottomCenterPoint,
        this.BIG_CIRCLE_RADIUS,
        this.MIDDLE_CIRCLE_RADIUS,
        this.FIND_MIDDLE_CIRCLE_LENGTH, fishAngle, true);
    // Draw the arthropod 2
    this.drawSegment(this.canvas, middleCircleCenterPoint, this.MIDDLE_CIRCLE_RADIUS, this.SMALL_CIRCLE_RADIUS,
        this.FIND_SMALL_CIRCLE_LENGTH, fishAngle, false);
    let findEdgeLength = Math.abs(Math.sin(MathUtils.toRadians(this.currentValue * 1.5)) * this.BIG_CIRCLE_RADIUS);
    //  Draw a small fishtail size triangle 
    this.drawTriangle(this.canvas, middleCircleCenterPoint, this.FIND_TRIANGLE_LENGTH, findEdgeLength, fishAngle);
    let findEdgeLengthS = Math.abs(Math.sin(MathUtils.toRadians(this.currentValue * 1.5 - 90)) * this.BIG_CIRCLE_RADIUS);
    this.drawTriangle(this.canvas,middleCircleCenterPoint,this.FIND_TRIANGLE_LENGTH*0.8,findEdgeLengthS*0.8,fishAngle);
    //  Draw the body of a small fish 
    this.drawBody(this.canvas, this.headPoint, bodyBottomCenterPoint, fishAngle)
},

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

The following is a step-by-step description

Clear the canvas

We need to erase the canvas before each painting , Otherwise, it will pollute the subsequent drawing

Draw the small fish head

Draw the small fish head , You need the coordinates of the center of the small fish head , Small fish head radius . The center coordinate of the small fish head can be determined by the center of gravity coordinate middlePoint、 distance 、 The current angle is calculated .

drawHead(canvas,fishAngle) {
    canvas.fillStyle = 'rgba(244, 92,71,0.5)'
    drawCircle(canvas, this.headPoint, this.HEAD_RADIUS)
    // Draw small fish eyes 
    this.drawEye(canvas,fishAngle)
},

     1.
2.
3.
4.
5.
6.

Note that the canvas coordinate axis is in the upper left corner ,x Shaft to the right ,y Axis down

# The Chinese New Year keeps changing #HarmonyOS Customize JS Components — Smart Koi _JS_05

Draw small fish eyes , The small fish eye is realized by two ellipses , Use canvas.ellipse() draw

drawEye(canvas, fishAngle) {
    canvas.fillStyle = 'rgba(0, 0,0,1)'
    // The left eye 
    canvas.beginPath();
    let leftEye = MathUtils.calculatePoint(this.headPoint, this.HEAD_RADIUS * 0.7, fishAngle + 45)
    canvas.ellipse(leftEye.x, leftEye.y,
        this.HEAD_RADIUS * 0.12, this.HEAD_RADIUS * 0.07, -Math.PI * 0.3,
        Math.PI * 0, Math.PI * 2, 1
    );
    canvas.fill();
    // Right eye 
    canvas.beginPath()
    let rightEye = MathUtils.calculatePoint(this.headPoint, this.HEAD_RADIUS * 0.7, fishAngle - 45)
    canvas.ellipse(rightEye.x, rightEye.y,
        this.HEAD_RADIUS * 0.12, this.HEAD_RADIUS * 0.07, Math.PI * 0.3,
        Math.PI * 0, Math.PI * 2, 1
    );
    canvas.fill();
}

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

Draw small fins

utilize startPoint,controlPoint,endPoint Draw Bessel's closure path

drawFins(canvas, startPoint, length, fishAngle, isRightFins) {
    canvas.fillStyle = 'rgba(244, 92,71,0.5)'
    let controlAngle = 115;
    //  The end point 
    let endPoint = MathUtils.calculatePoint(startPoint, length, fishAngle - 180);
    //  The control points 
    let controlPoint = MathUtils.calculatePoint(startPoint, 1.8 * length,
            isRightFins ? fishAngle - controlAngle : fishAngle + controlAngle
    );
    drawPath(canvas, ['M', startPoint, 'Q', controlPoint, endPoint])
},

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

# The Chinese New Year keeps changing #HarmonyOS Customize JS Components — Smart Koi _JS_06

Draw the arthropod

The limbs are round 、 Trapezoidal structure , First draw a circle, then talk about trapezoidal drawing

/** *  Draw an arthropod  * * @param bottomCenterPoint  Coordinates of the center point at the bottom of the ladder （ Long side ） * @param bigRadius  The radius of the big circle  * @param smallRadius  Radius of a small circle  * @param findSmallCircleLength  Find the line length of the trapezoidal circle  * @param isBigCircle  Is there a big circle  */
drawSegment(canvas, bottomCenterPoint, bigRadius, smallRadius, findSmallCircleLength, fishAngle, isBigCircle) {
    canvas.fillStyle = this.defaultFillStyle
    //  The angle of limb swing 
    let segmentAngle = 0;
    //  Arthropod 1  use  cos
    if (isBigCircle) {
        segmentAngle = (fishAngle + Math.cos(MathUtils.toRadians(this.currentValue * 1.5)) * 15);
    } else {
        segmentAngle = (fishAngle + Math.sin(MathUtils.toRadians(this.currentValue * 1.5)) * 35);
    }
    segmentAngle = fishAngle +this.currentValue
    //  The center point of the top and bottom of the trapezoid （ Short side ）
    let upperCenterPoint = MathUtils.calculatePoint(bottomCenterPoint, findSmallCircleLength, segmentAngle - 180);
    //  The four vertices of the trapezoid 
    let bottomLeftPoint = MathUtils.calculatePoint(bottomCenterPoint, bigRadius, segmentAngle + 90);
    let bottomRightPoint = MathUtils.calculatePoint(bottomCenterPoint, bigRadius, segmentAngle - 90);
    let upperLeftPoint = MathUtils.calculatePoint(upperCenterPoint, smallRadius, segmentAngle + 90);
    let upperRightPoint = MathUtils.calculatePoint(upperCenterPoint, smallRadius, segmentAngle - 90);

    if (isBigCircle) {
        //  Draw a big circle 
        drawCircle(canvas, bottomCenterPoint, bigRadius);
    }
    //  Draw a small circle 
    drawCircle(canvas, upperCenterPoint, smallRadius);

    //  Draw trapezoid 
    drawPath(canvas, ['M', bottomLeftPoint, 'L', upperLeftPoint, 'L', upperRightPoint, 'L', bottomRightPoint])
    return upperCenterPoint;
},

     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.

Draw a small fishtail size triangle

drawTriangle(canvas, startPoint, findCenterLength, findEdgeLength, fishAngle) {
    canvas.fillStyle = 'rgba(244, 92,71,0.5)'
    //  The swing angle of the triangle fish tail needs to follow the arthropod 2 go 
    let triangleAngle = (fishAngle + Math.sin(MathUtils.toRadians(this.currentValue * 1.5)) * 35);

    //  Coordinates of the bottom center 
    let centerPoint = MathUtils.calculatePoint(startPoint, findCenterLength, triangleAngle - 180);
    //  Two points at the bottom of the triangle 
    let leftPoint = MathUtils.calculatePoint(centerPoint, findEdgeLength, triangleAngle + 90);
    let rightPoint = MathUtils.calculatePoint(centerPoint, findEdgeLength, triangleAngle - 90);
    //  Draw triangle 
    drawPath(canvas, ['M', startPoint, 'L', leftPoint, 'L', rightPoint])
    //console.log(`makeTriangle#startPoint:${JSON.stringify(startPoint)},leftPoint:${JSON.stringify(leftPoint)},rightPoint:${JSON.stringify(rightPoint)}`)
},

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

Draw the body of a small fish

First, get the four vertices of the small fish , Get two control points on the left and right , Draw a closed path

drawBody(canvas, headPoint, bodyBottomCenterPoint, fishAngle) {
    this.canvas.globalAlpha = 160 / 255 // Deepen the body of the little fish 
    //  The four points of the body 
    let topLeftPoint = MathUtils.calculatePoint(headPoint, this.HEAD_RADIUS, fishAngle + 90);
    let topRightPoint = MathUtils.calculatePoint(headPoint, this.HEAD_RADIUS, fishAngle - 90);
    let bottomLeftPoint = MathUtils.calculatePoint(bodyBottomCenterPoint, this.BIG_CIRCLE_RADIUS,
        fishAngle + 90);
    let bottomRightPoint = MathUtils.calculatePoint(bodyBottomCenterPoint, this.BIG_CIRCLE_RADIUS,
        fishAngle - 90);

    //  The control point of the second order Bezier curve 
    let controlLeft = MathUtils.calculatePoint(headPoint, this.BODY_LENGTH * 0.56, fishAngle + 130);
    let controlRight = MathUtils.calculatePoint(headPoint, this.BODY_LENGTH * 0.56, fishAngle - 130);

    //  Draw a small fish 
    drawPath(canvas, ['M', topLeftPoint, "Q", controlLeft, bottomLeftPoint, "L", bottomRightPoint, "Q", controlRight, topRightPoint])
    this.canvas.globalAlpha = 100 / 255
    },

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

The swing of a small fish

swing

By constantly changing the rotation angle of the fish fishAngle To simulate the swing of a small fish , Timers can be used here , More convenient can be used Animator

startAnimation() {
    if (this.animator == null) {
        //fill: "none" | "forwards" | "backwards" | "both";
        //direction: "normal" | "reverse" | "alternate" | "alternate-reverse";
        var options = {
            duration: 1  * 1000,
            easing: 'ease',
            iterations: -1,
            direction: "alternate",
            fill: "none",
            begin: -5,
            end: 5
        };
        this.animator = animator.createAnimator(options)

    }
    this.animator.play();
}

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

here startAnimation Method, we create a Animator, And designate option,option The parameters in are described as follows

var options = {
    duration: 1  * 1000,	// The duration of the animation is 1s
    easing: 'ease',			// Animation interpolation curve ,ease It means accelerating first and decelerating 
    iterations: -1,			// The number of cycles in the animation , The default is 1,-1 Indicates a wireless loop 
    direction: "alternate", // Each animation playback direction ,alternate It means playing forward first and playing backward 
    fill: "none",			// Whether the animation state is set after the animation ,none Indicates that it is set to the initial value of animation 
    begin: -5,				// Animation interpolation starting value , Here, it means that the starting angle of the small fish is -5°
    end: 5					// Animation interpolation end value , Here, it means that the ending angle of the small fish is 5°
};

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

After creating the animation, we specify onframe Callback ,currentValue Is the animation change factor ,currentValue Affect the angle of small fish . It's over currentValue, We call onDraw() Redraw

onDraw(){
	let fishAngle = this.fishMainAngle+this.currentValue // Get the angle of the current fish 
	// Clear the canvas 
    this.clearCanvas()
    // Draw the small fish head 
    this.drawHead(this.canvas)
    ....
}


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

The effect is as follows ：

# The Chinese New Year keeps changing #HarmonyOS Customize JS Components — Smart Koi _ Custom components _07

️ Although the swing of small fish is realized here , But it feels weird . Daily small fish swing , Small fishtail , The amplitude and frequency of arthropods are higher than that of small fish , Only in this way can it not appear dull . Range we add one to the small fishtail and arthropod currentValue Correlation product to expand the amplitude .

drawSegment(canvas, bottomCenterPoint, bigRadius, smallRadius, findSmallCircleLength, fishAngle, isBigCircle) {
    canvas.fillStyle = this.defaultFillStyle
    //  The angle of limb swing 
    let segmentAngle = 0;
    if (isBigCircle) {
        segmentAngle = (fishAngle+this.currentValue*2); // Arthropod 1 increase 2 times 
    } else {
        segmentAngle = (fishAngle+this.currentValue*3); // Arthropod 1 increase 3 times 
    }


drawTriangle(canvas, startPoint, findCenterLength, findEdgeLength, fishAngle) {
        canvas.fillStyle = 'rgba(244, 92,71,0.5)'
        //  The swing angle of the triangle fish tail needs to follow the arthropod 2 go 
        let triangleAngle = fishAngle+this.currentValue*3;

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

# The Chinese New Year keeps changing #HarmonyOS Customize JS Components — Smart Koi _ Kai Hong HarmonyOS_08

How to update animation , The frequency of each part of the small fish is different , Here is the frequency conversion of small fish

frequency conversion

Scheme 1 ： For different frequency parts, create one Animator, Every Animator Manage the frequency of the same part and draw . The interaction is complicated

Option two ： Use the periodicity of sine function .sin(nx) The frequency is sin(x) Of n times , If the angle formula of small fish is similar to sin(nx) relevant , Then we set different n Value to achieve frequency inconsistency , For example, the angle of the head =sin(2x), The angle of the tail =sin(3x), Then the frequency of the tail is that of the head 1.5 times .

onDraw() {
	this.clearCanvas(
	let fishAngle = (this.fishMainAngle + Math.sin(MathUtils.toRadians(this.currentValue * 1.2)) * 4);
...
}

drawSegment(canvas, bottomCenterPoint, bigRadius, smallRadius, findSmallCircleLength, fishAngle, isBigCircle) {
    canvas.fillStyle = this.defaultFillStyle
    //  The angle of limb swing 
    let segmentAngle = 0;
    if (isBigCircle) {
        segmentAngle = (fishAngle + Math.cos(MathUtils.toRadians(this.currentValue * 1.5)) * 15);
    } else {
        segmentAngle = (fishAngle + Math.sin(MathUtils.toRadians(this.currentValue * 1.5)) * 35);
    }

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

Above fishAngle The frequency of 1.2 times , The frequency of arthropods has increased 1.5 times .sin,cos Angle variation range , That is to say currentValue Of end-begin, Must be 360 An integral multiple of a degree , In this way, we can guarantee sin,cos The periodicity of .
We set up begin=0, The following requirements currentValue Of end value

 set up m = end*1.2/360,n=end*1.5/360
m=end/(360/1.2),n=end/(360/1.5)
m=end/300,n=end/240
end To divide 300 and 240, be end Is the least common multiple of these two numbers 
 be end The minimum is 1200

     1.
2.
3.
4.
5.

The following is the frequency conversion option

var options = {
    duration: 5  * 1000,
    easing: 'linear',
    iterations: -1,
    direction: "normal",
    fill: "none",
    begin: 0,
    end: 1200 // Must be 1200 Multiple ,1.5/360 And 1.2/360 The minimum common multiple of is 1200
}

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

call

summary

Through the exercise of this project , We customize Canvas,JS Animation , Have a deeper understanding of trigonometric functions

Here is only the realization of small fish swing and frequency conversion , Later, when there is time, we will click the screen to realize the swimming of small fish 、 Turning when swimming 、 Steering frequency conversion

Source code address

For more original content, please pay attention to ： Shenkaihong technical team

Beginner to master 、 Skills to cases , Systematic sharing HarmonyOS Development technology , Welcome to contribute and subscribe , Let's move forward hand in hand to build Hongmeng ecology .

Want to know more about Hongmeng , Please visit ：

51CTO Hongmeng technology community jointly built with Huawei officials

https://harmonyos.51cto.com/#bkwz

# The Chinese New Year keeps changing #HarmonyOS Customize JS Components — Smart Koi _ Kai Hong HarmonyOS_09