|
@@ -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 @@
|
|
|
|
|
|

|
|
|
|
|
|
+```
|
|
|
+// 定义箭头长度
|
|
|
+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 @@
|
|
|
|
|
|

|
|
|
|
|
|
+```
|
|
|
+// 定义箭头长度
|
|
|
+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 @@
|
|
|
|
|
|

|
|
|
|
|
|
+```
|
|
|
+// 定义箭头长度
|
|
|
+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.可以计算四个顶点坐标,绘制多边形;亦可移至计算出的原点,直接绘制矩形;
|
|
|
|
|
|

|
|
|
+
|
|
|
+```
|
|
|
+// 定义箭头长度
|
|
|
+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();
|
|
|
+```
|