fastlion-amis
Version:
一种MIS页面生成工具
104 lines (103 loc) • 4.38 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var Bubble = function (_a) {
var _b = _a.bubbleW, bubbleW = _b === void 0 ? 50 : _b, _c = _a.bubbleH, bubbleH = _c === void 0 ? 80 : _c, _d = _a.y, y = _d === void 0 ? 0 : _d;
var devicePixelRatio = window.devicePixelRatio || 2;
var width = bubbleW * devicePixelRatio;
var height = bubbleH * devicePixelRatio;
var initRadius = 18 * devicePixelRatio;
var minHeadRadius = 12 * devicePixelRatio;
var minTailRadius = 5 * devicePixelRatio;
var initArrowRadius = 10 * devicePixelRatio;
var minArrowRadius = 6 * devicePixelRatio;
var arrowWidth = 3 * devicePixelRatio;
var maxDistance = 40 * devicePixelRatio;
;
var initCenterX = 25 * devicePixelRatio;
var initCenterY = 25 * devicePixelRatio;
var headCenter = {
x: initCenterX,
y: initCenterY
};
var bubbleEle = (0, react_1.useRef)(null);
var style = { width: width, height: height, transform: "scale(".concat(0.92 / devicePixelRatio, ") translateY(").concat(-y, "px)") };
var _getDistance = function () {
return Math.max(0, Math.min(y * devicePixelRatio, maxDistance));
};
var _draw = function () {
var bubble = bubbleEle.current;
var ctx = bubble.getContext('2d');
ctx.clearRect(0, 0, bubble.width, bubble.height);
_drawBubble(ctx);
_drawArrow(ctx);
};
var _drawBubble = function (ctx) {
ctx.save();
ctx.beginPath();
var _distance = _getDistance();
var rate = _distance / maxDistance;
var headRadius = initRadius - (initRadius - minHeadRadius) * rate;
headCenter.y = initCenterY - (initRadius - minHeadRadius) * rate;
// 画上半弧线
ctx.arc(headCenter.x, headCenter.y, headRadius, 0, Math.PI, true);
// 画左侧贝塞尔
var tailRadius = initRadius - (initRadius - minTailRadius) * rate;
var tailCenter = {
x: headCenter.x,
y: headCenter.y + _distance
};
var tailPointL = {
x: tailCenter.x - tailRadius,
y: tailCenter.y
};
var controlPointL = {
x: tailPointL.x,
y: tailPointL.y - _distance / 2
};
ctx.quadraticCurveTo(controlPointL.x, controlPointL.y, tailPointL.x, tailPointL.y);
// 画下半弧线
ctx.arc(tailCenter.x, tailCenter.y, tailRadius, Math.PI, 0, true);
// 画右侧贝塞尔
var headPointR = {
x: headCenter.x + headRadius,
y: headCenter.y
};
var controlPointR = {
x: tailCenter.x + tailRadius,
y: headPointR.y + _distance / 2
};
ctx.quadraticCurveTo(controlPointR.x, controlPointR.y, headPointR.x, headPointR.y);
ctx.fillStyle = 'rgb(170,170,170)';
ctx.fill();
ctx.strokeStyle = 'rgb(153,153,153)';
ctx.stroke();
ctx.restore();
};
var _drawArrow = function (ctx) {
ctx.save();
ctx.beginPath();
var _distance = _getDistance();
var rate = _distance / maxDistance;
var arrowRadius = initArrowRadius - (initArrowRadius - minArrowRadius) * rate;
// 画内圆
ctx.arc(headCenter.x, headCenter.y, arrowRadius - (arrowWidth - rate), -Math.PI / 2, 0, true);
// 画外圆
ctx.arc(headCenter.x, headCenter.y, arrowRadius, 0, Math.PI * 3 / 2, false);
ctx.lineTo(headCenter.x, headCenter.y - arrowRadius - arrowWidth / 2 + rate);
ctx.lineTo(headCenter.x + arrowWidth * 2 - rate * 2, headCenter.y - arrowRadius + arrowWidth / 2);
ctx.lineTo(headCenter.x, headCenter.y - arrowRadius + arrowWidth * 3 / 2 - rate);
ctx.fillStyle = 'rgb(255,255,255)';
ctx.fill();
ctx.strokeStyle = 'rgb(170,170,170)';
ctx.stroke();
ctx.restore();
};
(0, react_1.useEffect)(function () {
_draw();
});
return react_1.default.createElement("canvas", { ref: bubbleEle, width: width, height: height, style: style });
};
exports.default = Bubble;
//# sourceMappingURL=./components/ScrollMB/Bubble.js.map