sketch-json-parse/dist/src/parseDSL/parseStructure/parseBorder.js

sketch-json解析

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const utils_1 = require("../../common/utils");
/**
 * 'position': 属性表示 border 设置的位置
 * 1 => Inside border 位于盒子的内部
 * 0 => Center border 盒子便于位于 boder 之间
 * 2 =>  Outside 外边框
 */
exports.default = (layer) => {
    var _a, _b, _c, _d, _e;
    //没有处理多边框的情况，现在只支持单边框，其实borders是一个数组
    // if (layer.style && layer.style.borders && layer.style.borders.length && layer._class != 'artboard') {
    // sketch json中borders顺序是从内到外，border json需要倒序
    let borderList = (_b = (_a = layer.style.borders) === null || _a === void 0 ? void 0 : _a.reverse()) === null || _b === void 0 ? void 0 : _b.filter(item => item.isEnabled);
    if (borderList.length) {
        let borderStyle = borderList[0]; // 不规则 border 已经导出为图片
        let borderAlpha = borderStyle.color.alpha;
        // 只要判断是否存在即可， 因为可能 Opacity 的值为 0 的情况
        if (layer.style && layer.style.contextSettings) {
            borderAlpha = layer.style.contextSettings.opacity * borderAlpha;
        }
        // 处理 dashPattern
        let dashPattern = [];
        let borderType = 'solid';
        if (((_e = (_d = (_c = layer.style) === null || _c === void 0 ? void 0 : _c.borderOptions) === null || _d === void 0 ? void 0 : _d.dashPattern) === null || _e === void 0 ? void 0 : _e.length) > 0) {
            dashPattern = layer.style.borderOptions.dashPattern;
            borderType = 'dashed';
        }
        if (dashPattern.length > 0 && dashPattern[0] === 1 && dashPattern[1] === 1) {
            borderType = 'dotted';
        }
        // 设置边框
        const border = {
            width: (0, utils_1.precisionControl)(borderStyle.thickness),
            style: borderType,
            color: (0, utils_1.transSketchColor)({
                red: borderStyle.color.red,
                green: borderStyle.color.green,
                blue: borderStyle.color.blue,
                alpha: borderAlpha,
                swatchID: borderStyle.color.swatchID,
            }),
            dashPattern: {
                dashLength: (0, utils_1.precisionControl)(dashPattern[0] || 0),
                gapLength: (0, utils_1.precisionControl)(dashPattern[1] || 0),
            }
        };
        if (layer.frame.height <= 1) {
            return {
                top: border,
            };
        }
        return {
            left: border,
            top: border,
            right: border,
            bottom: border
        };
    }
    // }
    return undefined;
};