0a5f6a8047
- Go backend (server/)
- Frontend (web/, server/static/)
- Database and deployment files
- Scripts and docs
Co-Authored-By: 狸花猫/Claude-Qwen3.6-Plus 🐾
114 lines
4.1 KiB
JavaScript
114 lines
4.1 KiB
JavaScript
import { __assign, __rest } from "tslib";
|
||
import { Path } from '../shape';
|
||
var sin = Math.sin, cos = Math.cos, atan2 = Math.atan2, PI = Math.PI;
|
||
function _addDefaultArrow(shape, attrs, x1, y1, x2, y2, isStart) {
|
||
var stroke = attrs.stroke, lineWidth = attrs.lineWidth;
|
||
var x = x1 - x2;
|
||
var y = y1 - y2;
|
||
var rad = atan2(y, x);
|
||
var arrowShape = new Path({
|
||
type: 'path',
|
||
canvas: shape.get('canvas'),
|
||
isArrowShape: true,
|
||
attrs: {
|
||
// 默认箭头的边长为 10，夹角为 60 度
|
||
path: "M" + 10 * cos(PI / 6) + "," + 10 * sin(PI / 6) + " L0,0 L" + 10 * cos(PI / 6) + ",-" + 10 * sin(PI / 6),
|
||
// 使用 shape stroke 值
|
||
stroke: stroke,
|
||
lineWidth: lineWidth,
|
||
},
|
||
});
|
||
arrowShape.translate(x2, y2);
|
||
arrowShape.rotateAtPoint(x2, y2, rad);
|
||
shape.set(isStart ? 'startArrowShape' : 'endArrowShape', arrowShape);
|
||
}
|
||
/**
|
||
* 箭头 path 的设置要求
|
||
* 1. 箭头顶点坐标需要为 (0, 0)
|
||
* 2. 箭头夹角的中心分割线需要与 X 轴正方向对齐
|
||
*/
|
||
function _addCustomizedArrow(shape, attrs, x1, y1, x2, y2, isStart) {
|
||
var startArrow = attrs.startArrow, endArrow = attrs.endArrow, stroke = attrs.stroke, lineWidth = attrs.lineWidth;
|
||
var arrowAttrs = isStart ? startArrow : endArrow;
|
||
var d = arrowAttrs.d, arrowFill = arrowAttrs.fill, arrowStroke = arrowAttrs.stroke, arrowLineWidth = arrowAttrs.lineWidth, restAttrs = __rest(arrowAttrs, ["d", "fill", "stroke", "lineWidth"]);
|
||
var x = x1 - x2;
|
||
var y = y1 - y2;
|
||
var rad = atan2(y, x);
|
||
if (d) {
|
||
x2 = x2 - cos(rad) * d;
|
||
y2 = y2 - sin(rad) * d;
|
||
}
|
||
var arrowShape = new Path({
|
||
type: 'path',
|
||
canvas: shape.get('canvas'),
|
||
isArrowShape: true,
|
||
attrs: __assign(__assign({}, restAttrs), {
|
||
// 支持单独设置箭头的 stroke 和 lineWidth，若为空则使用 shape 的值
|
||
stroke: arrowStroke || stroke, lineWidth: arrowLineWidth || lineWidth,
|
||
// 箭头是否填充需要手动设置，不会继承自 shape 的值
|
||
fill: arrowFill }),
|
||
});
|
||
arrowShape.translate(x2, y2);
|
||
arrowShape.rotateAtPoint(x2, y2, rad);
|
||
shape.set(isStart ? 'startArrowShape' : 'endArrowShape', arrowShape);
|
||
}
|
||
/**
|
||
* 如果自定义箭头并且有 d 需要做偏移，如果直接画，线条会超出箭头尖端，因此需要根据箭头偏移 d, 返回线需要缩短的距离
|
||
* |----------------
|
||
* |<|--------------
|
||
* |
|
||
* @param {number} x1 起始点 x
|
||
* @param {number} y1 起始点 y
|
||
* @param {number} x2 箭头作用点 x
|
||
* @param {number} y2 箭头作用点 y
|
||
* @param {number} d 箭头沿线条方向的偏移距离
|
||
* @return {{dx: number, dy: number}} 返回线条偏移距离
|
||
*/
|
||
export function getShortenOffset(x1, y1, x2, y2, d) {
|
||
var rad = atan2(y2 - y1, x2 - x1);
|
||
return {
|
||
dx: cos(rad) * d,
|
||
dy: sin(rad) * d,
|
||
};
|
||
}
|
||
/**
|
||
* 绘制起始箭头
|
||
* @param {IShape} shape 图形
|
||
* @param {ShapeAttrs} attrs shape 的绘图属性
|
||
* @param {number} x1 起始点 x
|
||
* @param {number} y1 起始点 y
|
||
* @param {number} x2 箭头作用点 x
|
||
* @param {number} y2 箭头作用点 y
|
||
*/
|
||
export function addStartArrow(shape, attrs, x1, y1, x2, y2) {
|
||
if (typeof attrs.startArrow === 'object') {
|
||
_addCustomizedArrow(shape, attrs, x1, y1, x2, y2, true);
|
||
}
|
||
else if (attrs.startArrow) {
|
||
_addDefaultArrow(shape, attrs, x1, y1, x2, y2, true);
|
||
}
|
||
else {
|
||
shape.set('startArrowShape', null);
|
||
}
|
||
}
|
||
/**
|
||
* 绘制结束箭头
|
||
* @param {IShape} shape 图形
|
||
* @param {ShapeAttrs} attrs shape 的绘图属性
|
||
* @param {number} x1 起始点 x
|
||
* @param {number} y1 起始点 y
|
||
* @param {number} x2 箭头作用点 x
|
||
* @param {number} y2 箭头作用点 y
|
||
*/
|
||
export function addEndArrow(shape, attrs, x1, y1, x2, y2) {
|
||
if (typeof attrs.endArrow === 'object') {
|
||
_addCustomizedArrow(shape, attrs, x1, y1, x2, y2, false);
|
||
}
|
||
else if (attrs.endArrow) {
|
||
_addDefaultArrow(shape, attrs, x1, y1, x2, y2, false);
|
||
}
|
||
else {
|
||
shape.set('startArrowShape', null);
|
||
}
|
||
}
|
||
//# sourceMappingURL=arrow.js.map
|