ukelli-ui
Version:
Base on React's UI lib. Make frontend's dev simpler and faster.
87 lines (86 loc) • 3.67 kB
JavaScript
/**
* 目前暂时废弃的组件
*/
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import React, { PureComponent } from 'react';
var CountdownBg = /** @class */ (function (_super) {
__extends(CountdownBg, _super);
function CountdownBg() {
return _super !== null && _super.apply(this, arguments) || this;
}
CountdownBg.prototype.componentDidMount = function () {
var id = this.props.id;
var canvas = document.querySelector("#countDown" + id);
if (!canvas)
return;
var ctx = canvas.getContext('2d');
var lineWidth = 3;
var canvasW = canvas.width;
var circleX = canvasW / 2;
var circleY = circleX;
var radius = (canvasW - lineWidth) / 2;
this.animationTime = 200; // ms
this.canvasInfo = {
ctx: ctx,
circleX: circleX,
circleY: circleY,
radius: radius,
lineWidth: lineWidth,
};
this.draw();
};
CountdownBg.prototype.circle = function (cx, cy, r) {
var _a = this.canvasInfo, ctx = _a.ctx, circleX = _a.circleX, circleY = _a.circleY, radius = _a.radius, lineWidth = _a.lineWidth;
ctx.beginPath();
ctx.moveTo(cx + r, cy);
ctx.lineWidth = lineWidth;
ctx.strokeStyle = '#eee';
ctx.arc(cx, cy, r, 0, Math.PI * 2);
ctx.closePath();
ctx.stroke();
};
CountdownBg.prototype.sector = function (cx, cy, r, startAngle, endAngle, anti) {
if (anti === void 0) { anti = false; }
var _a = this.canvasInfo, ctx = _a.ctx, circleX = _a.circleX, circleY = _a.circleY, radius = _a.radius, lineWidth = _a.lineWidth;
ctx.beginPath();
ctx.moveTo(cx, cy + r); // 从圆形底部开始画
ctx.lineWidth = lineWidth;
// 渐变色 - 可自定义
var linGrad = ctx.createLinearGradient(circleX, circleY - radius - lineWidth, circleX, circleY + radius + lineWidth);
linGrad.addColorStop(0.0, '#fe0362');
linGrad.addColorStop(1.0, '#7473e3');
ctx.strokeStyle = linGrad;
// 圆弧两端的样式
ctx.lineCap = 'round';
// 圆弧
ctx.arc(cx, cy, r, startAngle * (Math.PI / 180.0) + (Math.PI / 2), endAngle * (Math.PI / 180.0) + (Math.PI / 2), !!anti);
ctx.stroke();
};
CountdownBg.prototype.draw = function (nextPercent) {
if (nextPercent === void 0) { nextPercent = 0; }
var _a = this.canvasInfo, ctx = _a.ctx, circleX = _a.circleX, circleY = _a.circleY, radius = _a.radius, lineWidth = _a.lineWidth, fontSize = _a.fontSize;
// 清除canvas内容
ctx.clearRect(0, 0, circleX * 2, circleY * 2);
this.circle(circleX, circleY, radius);
// 圆弧
this.sector(circleX, circleY, radius, 0, nextPercent / 100 * 360);
};
CountdownBg.prototype.render = function () {
var id = this.props.id;
return (React.createElement("canvas", { id: "countDown" + id, className: "countdown-bg", width: "60", height: "60" }));
};
return CountdownBg;
}(PureComponent));
export default CountdownBg;