Vue dynamically draws three-fourths of the rings

Time:2019-10-8

Referring to a case on the internet, “Reference is to draw a dynamic circle.” Now I need to adapt it into three-quarters of the circle.
Achieving results:

Style display canvas drawing basic operation settings can be
Reference source code link: original: https://blog.csdn.net/qq_21058391/article/details/76691047

> To modify the source code cited above, several points should be noted

1. understanding the principle of drawing circles is based on radians.
2. Calculating formula of radian
3. Convert every angle to radian
4. coordinates of starting point and end point

> Draw a picture for yourself, easy to understand!

 

 

 

Firstly, we can see the starting point and the key point according to the graph, and see the coordinates to know that the starting point is – 240 degrees. This positive and negative should be distinguished. The formula for calculating each radian is given.
Convert the angle to radian:
var radians = degrees * (Math.PI/180);

So we can make a revision.

Code after revision
`drawMain(drawing_elem, percent, forecolor, bgcolor,fillColor) {
/*
@ drawing_elem: Drawing objects
@ percent: Percentage of circles drawn, range [0, 100]
@ Forecolor: Draw the foreground color of the circle, color code
@ bgcolor: Background color, color code for drawing rings
*/
var context = drawing_elem.getContext(‘2d’)
var center_x = drawing_elem.width / 2;
var center_y = drawing_elem.height / 2;
Var rad = Math.PI/3*5/100; // Drawn a 300-degree circle
// 65 * Math.PI / 180, 115 * Math.PI / 180
// var speed = 0;

// Draw the background circle
function backgroundCircle(){
context.save();
context.beginPath();
Context. lineWidth = 8; // Set line width
var radius = center_x – context.lineWidth;
context.lineCap = “round”;
context.strokeStyle = bgcolor;
context.arc(center_x, center_y, radius,-Math.PI/180*240, Math.PI/180*60, false);
* starting point, end point, radius, starting point, ending point, whether clockwise / counterclockwise * *
context.stroke();
context.closePath();
context.restore();
}

// Drawing Motion Rings
function foregroundCircle(n){
context.save();
context.strokeStyle = forecolor;
context.lineWidth = 8;
context.lineCap = “round”;
var radius = center_x – context.lineWidth;
// console.log(endAngle)
context.beginPath();
Arc (center_x, center_y, radius, -Math.PI/180*240, -Math.PI/180*240+n*rad, false); //for drawing arc context.arc (x coordinates, y coordinates, radius, starting angle, ending angle, clockwise/counterclockwise)
context.stroke();
context.closePath();
context.restore();
}

// Drawing Text
function text(n){
Context. save (); //save and restore ensure that style attributes are applied only to the canvas element in that section
context.fillStyle = fillColor;
var font_size = 20;
context.font = font_size + “px Helvetica”;
var text_width = context.measureText(n.toFixed(0)+”%”).width;
context.fillText(n.toFixed(0)+”%”, center_x-text_width/2, center_y + font_size/2);
context.restore();
}

// Execute animation
(function drawFrame(){
// Remove animation loading effect
// window.requestAnimationFrame(drawFrame);
// context.clearRect(0, 0, drawing_elem.width, drawing_elem.height);
backgroundCircle();
text(percent);
foregroundCircle(percent);
**// Remove the animation loading effect. These two lines of code are removed because they draw slowly when the network speed is slow and the dynamic effect is too slow.
// if(speed >= percent) return;
// speed += 1;
}());
},
The next step is to call this method, which is put into NextTick when calling. The problem encountered at that time is that the loading can only load the first one, the following loading can not come out, the problem of self-perception loading order is drawn but not rendered.

this.$nextTick(()=>{
for(var i =0;i
this.childrenTag = document.getElementById(“time-graph-canvas”+i);
let score = this.couponCenterLists[i].couponPercentage * 100;
this.drawMain(this.childrenTag, score, “#fff”, “rgba(255,255,255,0.4)”,”#fff”);
** The score variable is the data I extracted from the interface and stored in the score variable **
}
})

It’s basically that much. It’s not difficult to understand the starting point and calculation method of drawing.
————————————————

Translated from: original article link of CSDN blogger “weixin_43877575”: https://blog.csdn.net/weixin_43877575/article/details/84652961

Recommended Today

RCAST 35: add type to currency

– font ALT: Simsun; MSO font charset: 134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 680460288 22 0 262145 0;} @font-face {font-family:”Cambria Math”; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:1; mso-generic-font-family:roman; mso-font-format:other; mso-font-pitch:variable; mso-font-signature:0 0 0 0 0 0;} @font-face {font-family:Calibri; Variable; Ose-1: 216301111; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 680460288 22 0 262145 0;} /\* Style […]