sketch-json-parse
Version:
sketch-json解析
181 lines (180 loc) • 6.61 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const twoPointsAngle_1 = require("./twoPointsAngle");
const twoPointsDistance_1 = require("./twoPointsDistance");
const utils_1 = require("../../../../common/utils");
exports.default = (gradient, layer, contextSettings = 1) => {
let frame = layer.frame;
let changePointList = [];
let startPointStr = gradient.from;
let startX = +startPointStr.split('{')[1].split(',')[0] * frame.width;
let startY = -startPointStr.split(',')[1].split('}')[0] * frame.height;
let endPointStr = gradient.to;
let endX = +endPointStr.split('{')[1].split(',')[0] * frame.width;
let endY = -endPointStr.split(',')[1].split('}')[0] * frame.height;
let gAngle = (0, twoPointsAngle_1.default)(startX, startY, endX, endY);
let gDistance = (0, twoPointsDistance_1.default)(startX, startY, endX, endY);
let startPoint = {
x: startX,
y: startY
};
let endPoint = {
x: endX,
y: endY
};
let stops = gradient.stops;
if (endX < startX) {
startPoint = {
x: endX,
y: endY
};
endPoint = {
x: startX,
y: startY
};
gAngle = (0, twoPointsAngle_1.default)(endX, endY, startX, startY);
gDistance = (0, twoPointsDistance_1.default)(endX, endY, startX, startY);
stops = stops.reverse();
stops = stops.map(item => {
item.position = 1 - item.position;
return item;
});
}
let point1 = {
x: 0,
y: 0
};
let point2 = {
x: frame.width,
y: 0
};
let point3 = {
x: frame.width,
y: -frame.height
};
let point4 = {
x: 0,
y: -frame.height
};
let mainStart = point1;
let mainEnd = point3;
//根据不同角度，选取起始点和终止点
if (gAngle >= 0 && gAngle < Math.PI / 2) {
mainStart = point4;
mainEnd = point2;
}
else if (gAngle >= Math.PI / 2 && gAngle < Math.PI) {
mainStart = point1;
mainEnd = point3;
}
let lengthStart = 0;
let lengthEnd = 0;
let startColor = {};
let endColor = {};
//计算向量距离
const verticalDistance = (point1, point2, lineAngle) => {
return Math.abs((0, twoPointsDistance_1.default)(point1.x, point1.y, point2.x, point2.y)) *
Math.cos((0, twoPointsAngle_1.default)(point1.x, point1.y, point2.x, point2.y) - lineAngle);
};
//起始点和起始坐标点之间的向量距离
if (!(startPoint.x == mainStart.x && startPoint.y == mainStart.y)) {
lengthStart = verticalDistance(mainStart, startPoint, gAngle);
}
//结束点和结束坐标点之间的向量距离
if (!(endPoint.x == mainEnd.x && endPoint.y == mainEnd.y)) {
lengthEnd = verticalDistance(endPoint, mainEnd, gAngle);
}
//渐变起始坐标处理(起始距离为正值和负值两种情况)
if (lengthStart < 0) {
for (let i = 1; i < stops.length; i++) {
if (stops[i].position > -lengthStart / gDistance) {
let currColor = stops[i].color;
let preColor = stops[i - 1].color;
const getVal = (prop) => {
return preColor[prop] + (currColor[prop] - preColor[prop]) / (stops[i].position - stops[i - 1].position) * (-lengthStart / gDistance - stops[i - 1].position);
};
startColor = {
index: i,
color: {
'alpha': getVal('alpha'),
'blue': getVal('blue'),
'green': getVal('green'),
'red': getVal('red')
},
position: -lengthStart / gDistance
};
break;
}
}
}
else {
startColor = {
index: 0,
color: stops[0].color,
position: -lengthStart / gDistance
};
}
//渐变结束坐标处理(结束距离为正值和负值两种情况)
if (lengthEnd < 0) {
for (let i = 0; i < stops.length - 1; i++) {
if (stops[i + 1].position > 1 + lengthEnd / gDistance) {
let currColor = stops[i].color;
let nextColor = stops[i + 1].color;
const getVal = (prop) => {
return currColor[prop] + (nextColor[prop] - currColor[prop]) / (stops[i + 1].position - stops[i].position) * (1 + lengthEnd / gDistance - stops[i].position);
};
endColor = {
index: i,
color: {
'alpha': getVal('alpha'),
'blue': getVal('blue'),
'green': getVal('green'),
'red': getVal('red')
},
position: 1 + lengthEnd / gDistance
};
break;
}
}
}
else {
endColor = {
index: stops.length - 1,
color: stops[stops.length - 1].color,
position: 1 + lengthEnd / gDistance
};
}
if (startColor.color) {
changePointList.push(startColor);
}
for (let n = 0; n < stops.length; n++) {
if (n >= startColor.index && n <= endColor.index) {
changePointList.push(stops[n]);
}
}
if (endColor.color) {
changePointList.push(endColor);
}
changePointList = changePointList.map(({ color, position }) => {
position = (position - changePointList[0].position) / (changePointList[changePointList.length - 1].position - changePointList[0].position);
return {
color,
position
};
});
const valList = changePointList.map(({ color, position }) => {
let { red, green, blue, alpha, swatchID } = color;
if (layer.style && layer.style.contextSettings) {
alpha = layer.style.contextSettings.opacity * contextSettings * alpha;
}
return {
color: (0, utils_1.transSketchColor)({ red, green, blue, alpha, swatchID }),
position: (0, utils_1.precisionControl)(position, 0.01),
};
// return `rgba(${Math.round(red * 255)},${Math.round(green * 255)},${Math.round(blue * 255)},${Math.round(alpha * 100) / 100}) ${Math.round(position * 10000) / 100}%`;
});
return {
gAngle: Math.round(gAngle / Math.PI * 180 * 10) / 10,
gList: valList,
};
};