Jelajahi Sumber

箭头绘制方式补充

haojianlong 5 tahun lalu
induk
melakukan
961a9882ee

+ 1 - 1
docs/dev/data-center/relations/topology/sys_block.md

@@ -142,4 +142,4 @@ select public.sys_block('Pj1101010015','Bd11010100153c05821ed8fd11e9b8f2d79d0a5b
 ## 结果展示
 ![原模型图](img/1.png)
 ![抽象后的图](img/2.png)
-![确定完流向的图](img/3.png)
+![确定完流向的图](img/3.png)

+ 107 - 0
docs/dev/saga-graphy/graphy-engine/arrow.md

@@ -2,6 +2,18 @@
 
 ## 函数入参
 
+传入线段和末端样式style{begin?:SArrowStyleType,end?:SArrowStyleType}
+
+drawArrowLine(line: SLine, style?: SArrow):void
+
+传入线段的两个点和末端样式
+
+drawArrowLine(p1: SPoint, p2: SPoint, style?: SArrow): void;
+
+传入线段的两个点的坐标值和末端样式
+
+drawArrowLine(x1: number,y1: number,x2: number,y2: number,style?: SArrow): void;
+
 ## 类型
 
 ### 无
@@ -26,6 +38,27 @@
 
 ![标准箭头计算](./img/basic-jisuan.png)
 
+```
+// 定义箭头长度
+const d = 5;
+// 箭头横坐标
+const x1 = d * Math.cos(Math.PI / 4);
+// 箭头纵坐标
+const y1 = d * Math.sin(Math.PI / 4);
+// 线段与x轴夹角
+const fo = Math.atan(line.dy / line.dx);
+const ang = line.dx >= 0 ? fo : fo + Math.PI;
+this.save();
+this.translate(line.x2, line.y2);
+this.rotate(ang);
+this.engine.drawPolyline([
+    new SPoint(-x1, y1),
+    new SPoint(0, 0),
+    new SPoint(-x1, -y1)
+]);
+this.restore();
+```
+
 ### 三角形
 
 绘制如下类型箭头,通过画笔颜色和画刷颜色控制笔触颜色和填充颜色
@@ -36,6 +69,27 @@
 
 坐标点位置计算与标准箭头类似,只是箭头夹角θ=π/6,且最后绘制图形为多边形
 
+```
+// 定义箭头长度
+const d = 5;
+// 箭头横坐标
+const x1 = d * Math.cos(Math.PI / 4);
+// 箭头纵坐标
+const y1 = d * Math.sin(Math.PI / 4);
+// 线段与x轴夹角
+const fo = Math.atan(line.dy / line.dx);
+const ang = line.dx >= 0 ? fo : fo + Math.PI;
+this.save();
+this.translate(line.x2, line.y2);
+this.rotate(ang);
+this.engine.drawPolygon([
+    new SPoint(-x1, y1),
+    new SPoint(0, 0),
+    new SPoint(-x1, -y1)
+]);
+this.restore();
+```
+
 ### 圆
 
 绘制如下类型箭头,通过画笔颜色和画刷颜色控制笔触颜色和填充颜色
@@ -50,6 +104,19 @@
 
 ![圆形计算](./img/circle-jisuan.png)
 
+```
+// 定义箭头长度
+const d = 5;
+// 线段与x轴夹角
+const fo = Math.atan(line.dy / line.dx);
+const ang = line.dx >= 0 ? fo : fo + Math.PI;
+this.save();
+this.translate(line.x2, line.y2);
+this.rotate(ang);
+this.engine.drawCircle(-d / 2, 0, d / 2);
+this.restore();
+```
+
 ### 菱形
 
 绘制如下类型箭头,通过画笔颜色和画刷颜色控制笔触颜色和填充颜色
@@ -62,6 +129,28 @@
 
 ![菱形计算](./img/diamond-jisuan.jpg)
 
+```
+// 定义箭头长度
+const d = 5;
+// 箭头横坐标
+const x1 = d * Math.cos(Math.PI / 4);
+// 箭头纵坐标
+const y1 = d * Math.sin(Math.PI / 4);
+// 线段与x轴夹角
+const fo = Math.atan(line.dy / line.dx);
+const ang = line.dx >= 0 ? fo : fo + Math.PI;
+this.save();
+this.translate(line.x2, line.y2);
+this.rotate(ang);
+this.engine.drawPolygon([
+    new SPoint(-x1, y1),
+    new SPoint(0, 0),
+    new SPoint(-x1, -y1),
+    new SPoint(-Math.sqrt(2) * d, 0)
+]);
+this.restore();
+```
+
 ### 方形
 
 绘制如下类型箭头,通过画笔颜色和画刷颜色控制笔触颜色和填充颜色
@@ -75,3 +164,21 @@
 2.可以计算四个顶点坐标,绘制多边形;亦可移至计算出的原点,直接绘制矩形;
 
 ![方形计算](./img/square-jisuan.png)
+
+```
+// 定义箭头长度
+const d = 5;
+// 线段与x轴夹角
+const fo = Math.atan(line.dy / line.dx);
+const ang = line.dx >= 0 ? fo : fo + Math.PI;
+this.save();
+this.translate(line.x2, line.y2);
+this.rotate(ang);
+this.engine.drawPolygon([
+    new SPoint(-d, d / 2),
+    new SPoint(0, d / 2),
+    new SPoint(0, -d / 2),
+    new SPoint(-d, -d / 2)
+]);
+this.restore();
+```