Commit 1f32d5d2 by fanyj

Merge branch 'master' of ssh://132.232.112.242:7022/zcx/hnyc-data

parents d1520eba 6c060714
......@@ -4,6 +4,7 @@
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
......
import React, { Component } from 'react';
function n(x1, y1, x2, y2, ctx, lineW, speed) {
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
this.x = x1;
this.y = y1;
this.context = ctx;
this.lineW = lineW;
this.canW = this.context.canvas.width;
this.canH = this.context.canvas.height;
this.fillStyle = '#00d7ff';
this.speed = speed;
}
n.prototype.init = function() {
const { y2, y1, x2, x1 } = this;
this.angle = Math.atan2(y2 - y1, x2 - x1);
this.detalX = x2 - x1;
this.detalY = y2 - y1;
this.active = true;
this.speedX = this.speed * Math.cos(this.angle);
this.speedY = this.speed * Math.sin(this.angle);
};
n.prototype.update = function() {
this.dis = Math.sqrt(Math.pow(this.x2 - this.x, 2) + Math.pow(this.y2 - this.y, 2));
if (this.dis> this.speed) {
this.x += this.speedX;
this.y += this.speedY;
} else {
this.active = false
}
this.draw();
};
n.prototype.draw = function() {
this.context.beginPath();
this.context.arc(this.x, this.y, this.lineW, 0, 2 * Math.PI);
this.context.fillStyle = this.fillStyle;
this.context.fill();
};
n.prototype.reset = function() {
this.active = true;
this.x = this.x1;
this.y = this.y1;
};
function destinationIn(ctx, fillStyle, width, height) {
ctx.globalCompositeOperation = 'destination-in';
ctx.fillStyle = fillStyle;
ctx.beginPath();
ctx.fillRect(0, 0, width, height);
ctx.globalCompositeOperation = 'source-over';
}
const _linesData = [[[10, 10, 100, 100], [0, 100, 100, 100]], [[100, 100, 100, 10]]];
class Commit extends Component {
constructor() {
super();
this.width = 1200;
this.height = 500;
}
componentDidMount() {
const context = this.ref.getContext('2d');
const { linesData, args } = this.props;
const fillStyle = args.fillStyle || 'hsla(180, 100%, 50%, .89)';
const lineW = args.lineW || 2.5;
const speed = args.speed || 1.5;
const width = args.width || this.width,
height = args.height || this.height;
const lines = [];
(linesData || _linesData).map((groupData, i) => {
const group = [];
groupData.map((lineData, j) => {
var x1 = lineData[0],
y1 = lineData[1],
x2 = lineData[2],
y2 = lineData[3];
var line = new n(x1, y1, x2, y2, context, lineW, speed);
line.init();
group.push(line);
return lineData;
});
lines.push(group);
return groupData;
});
var curGroup = 0;
function step(timestamp) {
destinationIn(context, fillStyle, width, height);
lines.map((group, i) => {
if (curGroup === i) {
var active = false;
group.map((line, j) => {
if (line.active) {
line.update();
active = true;
}
return line;
});
if (!active) {
curGroup = ++curGroup % lines.length;
group.map((line, j) => {
line.reset();
return line;
});
}
}
return group;
});
window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);
}
render() {
const args = this.props.args || {};
return (
<div className={args.className} style={args.style}>
<canvas
ref={ref => (this.ref = ref)}
width={(args.width || this.width) + 'px'}
height={(args.height || this.height) + 'px'}
></canvas>
</div>
);
}
}
export default Commit;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment