react-iztro/lib/IzpalaceCenter/Line.js

基于iztro实现的react紫微斗数星盘组件。A react component used to generate an astrolabe of ziweidoushu based on iztro.

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Line = void 0;
var react_1 = __importStar(require("react"));
var utils_1 = require("iztro/lib/utils");
var Line = function (_a) {
    var index = _a.index, scope = _a.scope;
    var line = (0, react_1.useRef)(null);
    var strokeColor = (0, react_1.useMemo)(function () {
        if (scope) {
            var element = document.getElementsByClassName("iztro-astrolabe-theme-default")[0];
            var computedStyle = getComputedStyle(element);
            // 获取CSS中定义的变量的值
            return computedStyle.getPropertyValue("--iztro-color-".concat(scope));
        }
        return "rgba(245,0,0)";
    }, [scope]);
    (0, react_1.useEffect)(function () {
        var idx = index;
        var canvasDom = line.current;
        if (!canvasDom || idx < 0) {
            return;
        }
        var _a = canvasDom.getBoundingClientRect(), height = _a.height, width = _a.width;
        canvasDom.width = width;
        canvasDom.height = height;
        var w = width / 2;
        var h = height / 2;
        var points = [
            [0, h * 2],
            [0, h * 1.5],
            [0, h * 0.5],
            [0, 0],
            [w * 0.5, 0],
            [w * 1.5, 0],
            [w * 2, 0],
            [w * 2, h * 0.5],
            [w * 2, h * 1.5],
            [w * 2, h * 2],
            [w * 1.5, h * 2],
            [w * 0.5, h * 2],
        ];
        //第二步：获取上下文
        var canvasCtx = canvasDom.getContext("2d");
        if (!canvasCtx) {
            return;
        }
        canvasCtx.clearRect(0, 0, canvasDom.width, canvasDom.height);
        canvasCtx.strokeStyle = strokeColor;
        canvasCtx.lineWidth = 1;
        canvasCtx.globalAlpha = 0.5;
        var dgIdx = (0, utils_1.fixIndex)(idx + 6);
        var q4Idx = (0, utils_1.fixIndex)(idx + 4);
        var h4Idx = (0, utils_1.fixIndex)(idx - 4);
        canvasCtx.beginPath();
        canvasCtx.moveTo(points[dgIdx][0], points[dgIdx][1]);
        canvasCtx.lineTo(points[idx][0], points[idx][1]);
        canvasCtx.lineTo(points[q4Idx][0], points[q4Idx][1]);
        canvasCtx.lineTo(points[h4Idx][0], points[h4Idx][1]);
        canvasCtx.lineTo(points[idx][0], points[idx][1]);
        canvasCtx.stroke();
    }, [index, strokeColor]);
    return (react_1.default.createElement("canvas", { id: "palace-line", className: scope, style: {
            position: "absolute",
            width: "100%",
            height: "100%",
            userSelect: "none",
            pointerEvents: "none",
            top: 0,
            left: 0,
        }, ref: line }));
};
exports.Line = Line;