线性渐变
image
线性渐变数据格式
expendProperties
/**
* @description 渐变
*/
interface LinePoint {
// 颜色
color: Number;
// 位置
position: Number;
}
/**
* @description 直线渐变位置
*/
interface LinePosition {
x: number;
y: number;
}
interface ColorItem {
// 渐变
line?: LinePoint[];
// 直线渐变位置信息
position?: LinePosition[];
BasicState
// 当前编辑模式, linear,image ...
viewmode: String;
// 当前编辑选中点信息
viewindex: number;
数据格式说明
position 存放渐变的开始结束位置：2个点信息，相对位置
line存放渲染颜色信息以及位置(0-1)
基础属性
interface BasicState {
// 当前选择模式 钢笔模式涉及字段为6
mode: String;
// 视图模式 新增编辑模式
viewMode: Number;
viewModeFillId: String;
// canvas高度
height: Number;
// canvas宽度
width: Number;
// 背景颜色
pagebkcolor: -1;
pagebkvisible: boolean;
// 图层缩放比例
scale: Number;
// 光标类型 钢笔模式涉及字段为2
cursorType: Number;
// 光标角度
cursorAngle: Number;
// 图层选择ids
selectIds: Array<String>;
// 图层hoverId
hoverId: String;
// 编辑模式 新增 kSET_Select=0,kSET_Pen=1,kSET_Control=2,kSET_FillMode=3,
editMode: number;
// 水平滚轮定位左 @todo 待给出
xSacleLeft: Number;
// 水平滚轮定位右 @todo 待给出
xSacleRight: Number;
// 垂直滚轮定位左 @todo 待给出
ySacleUp: Number;
// 垂直滚轮定位下 @todo 待给出
ySacleDown: Number;
// 是否显示多人光标 字段前端维护
showCoordination: Boolean;
// 是否显示网格
gridVisible: Boolean;
// 是否显示标尺
rulerVisible: Boolean;
// 是否网格对齐
gridAlign: Boolean;
// 是否打开colorpicker
colorPicker: Boolean;
}
数据计算公式
坐标变换
image
Position 存放相对图层坐标
计算如下：
比如：图层世界坐标：p(x,y) 宽度为：w, 高度：h
Position: 开始点为： start(x1,y1), end(x2,y2)
世界位置到相对位置变换矩阵为：matrix
1/w, 0, -x/w
0, 1/h, -y/h
0, 0, 1
例如：
(x,y,1) * matrix = (0,0,1)
(x+w,y+h,1)* matrix = (1,1,1)
(x+w/2,y+h/2,1)*matrix = (0.5,0.5,1)
相对位置到世界位置变换矩阵为：matrix1
w, 0, x
0, h, y
0, 0, 1
例如：
(0,0,1) * matrix1 = (x,y,1)
(1,1,1)* matrix1 = (x+w,y+h,1)
(0.5,0.5,1)*matrix1 = ((x+w/2,y+h/2,1)
css样式计算
角度计算：
第一步： 把position相对坐标乘以matrix1变换为世界坐标
得到p1,p2点
第二步计算角度
let x = p2.x - p1.x;
let y = p2.y - p1.y;
let res = (Math.atan2(y, x) * 180) / Math.PI + 90;
if (res < 0) {
res += 360;
}
第三步计算图层4个角到渐变色直线的交点
计算公式为：
// 计算点到直线的垂线交点
function linecross(line: any, point: any) {
let p1 = line[0];
let p2 = line[1];
// 90度
if (p1.x == p2.x) {
return {
x: p1.x,
y: point.y
};
} else {
//斜率
let k1 = (p2.y - p1.y) / (p2.x - p1.x);
let k2 = -1 / k1;
let x = (p1.y - point.y - (k1 * p1.x - k2 * point.x)) / (k2 - k1);
let y = k1 * (x - p1.x) + p1.y;
return { x, y };
}
}
第四步计算各个点距离0点的距离
function distance(p1: any, p2: any) {
let k = (p1.x - p2.x) * (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y);
k = Math.sqrt(k);
if (p1.x < p2.x) {
k = -k;
}
if (p1.x == p2.x && p1.y < p2.y) {
k = -k;
}
return k;
}
最后一步计算比例
// 计算比例 p1 0 p2 100 p3 要计算的点
function caluPer(p1: any, p2: any, p3: any) {
let d1 = distance(p2, p1);
let d2 = distance(p3, p1);
return d2 / d1;
}
补充
javscript矩阵乘法：
function matrixMul(a, b) {
const c = new Array(a.length);
for (let i = 0; i < a.length; i++) {
c[i] = new Array(b[0].length);
for (let j = 0; j < b[0].length; j++) {
c[i][j] = 0;
for (let k = 0; k < b.length; k++) {
c[i][j] += a[i][k] * b[k][j];
}
}
}
return c;
}
线性变换旋转90(p1. 开始点,p2 结束点)
// 获取中点
let dx = (p1.x + p2.x) / 2;
let dy = (p1.y + p2.y) / 2;
let mx = [
[1, 0, -dx],
[0, 1, -dy],
[0, 0, 1]
];
p1 = matrixMul(mx, p1);
p2 = matrixMul(mx, p2);
mx = [
[0, 1, 0],
[-1, 0, 0],
[0, 0, 1]
];
p1 = matrixMul(mx, p1);
p2 = matrixMul(mx, p2);
// p1,p2 为旋转后的位置
