|
@@ -1,24 +1,25 @@
|
|
-# 绘图指令-绘制带有末端样式的线段
|
|
|
|
|
|
+# 绘制带有末端样式的线段
|
|
|
|
|
|
::: details 目录
|
|
::: details 目录
|
|
[[toc]]
|
|
[[toc]]
|
|
:::
|
|
:::
|
|
|
|
|
|
-## 函数入参
|
|
|
|
|
|
+<engine-arrow />
|
|
|
|
|
|
-传入线段和末端样式style{begin?:SArrowStyleType,end?:SArrowStyleType}
|
|
|
|
|
|
+## 函数入参
|
|
|
|
|
|
|
|
+传入线段和末端样式```style{begin?:SArrowStyleType,end?:SArrowStyleType}```
|
|
|
|
+``` typescript
|
|
drawArrowLine(line: SLine, style?: SArrow):void
|
|
drawArrowLine(line: SLine, style?: SArrow):void
|
|
-
|
|
|
|
|
|
+```
|
|
传入线段的两个点和末端样式
|
|
传入线段的两个点和末端样式
|
|
-
|
|
|
|
|
|
+``` typescript
|
|
drawArrowLine(p1: SPoint, p2: SPoint, style?: SArrow): void;
|
|
drawArrowLine(p1: SPoint, p2: SPoint, style?: SArrow): void;
|
|
-
|
|
|
|
|
|
+```
|
|
传入线段的两个点的坐标值和末端样式
|
|
传入线段的两个点的坐标值和末端样式
|
|
-
|
|
|
|
|
|
+``` typescript
|
|
drawArrowLine(x1: number,y1: number,x2: number,y2: number,style?: SArrow): void;
|
|
drawArrowLine(x1: number,y1: number,x2: number,y2: number,style?: SArrow): void;
|
|
-
|
|
|
|
-<engine-arrow />
|
|
|
|
|
|
+```
|
|
|
|
|
|
::: details 查看代码
|
|
::: details 查看代码
|
|
<<< @/docs/.vuepress/components/engine/arrow.vue
|
|
<<< @/docs/.vuepress/components/engine/arrow.vue
|
|
@@ -42,13 +43,13 @@ drawArrowLine(x1: number,y1: number,x2: number,y2: number,style?: SArrow): void;
|
|
|
|
|
|
2.计算出线段与x轴夹角,并将坐标系旋转至x轴与线段重合;
|
|
2.计算出线段与x轴夹角,并将坐标系旋转至x轴与线段重合;
|
|
|
|
|
|
-3.设定箭头夹角为θ=π/2,末端三角形边长d=5,则箭头上下端与x轴夹角为π/4,根据此角度与边长计算上下端坐标;
|
|
|
|
|
|
+3.设定箭头夹角为```θ=π/2```,末端三角形边长```d=5```,则箭头上下端与x轴夹角为```π/4```,根据此角度与边长计算上下端坐标;
|
|
|
|
|
|
4.直接绘制原点与上下端连线的折线图形即可;
|
|
4.直接绘制原点与上下端连线的折线图形即可;
|
|
|
|
|
|

|
|

|
|
|
|
|
|
-```
|
|
|
|
|
|
+``` javascript
|
|
// 定义箭头长度
|
|
// 定义箭头长度
|
|
const d = 5;
|
|
const d = 5;
|
|
// 箭头横坐标
|
|
// 箭头横坐标
|
|
@@ -77,9 +78,9 @@ this.restore();
|
|
|
|
|
|
#### 画法描述
|
|
#### 画法描述
|
|
|
|
|
|
-坐标点位置计算与标准箭头类似,只是箭头夹角θ=π/6,且最后绘制图形为多边形
|
|
|
|
|
|
+坐标点位置计算与标准箭头类似,只是箭头夹角```θ=π/6```,且最后绘制图形为多边形
|
|
|
|
|
|
-```
|
|
|
|
|
|
+``` javascript
|
|
// 定义箭头长度
|
|
// 定义箭头长度
|
|
const d = 5;
|
|
const d = 5;
|
|
// 箭头横坐标
|
|
// 箭头横坐标
|
|
@@ -110,11 +111,11 @@ this.restore();
|
|
|
|
|
|
1.将坐标系平移至线段终点;
|
|
1.将坐标系平移至线段终点;
|
|
|
|
|
|
-2.设定圆半径r=5,计算圆心坐标为(-r,0),绘制圆形即可
|
|
|
|
|
|
+2.设定圆半径```r=5```,计算圆心坐标为(-r,0),绘制圆形即可
|
|
|
|
|
|

|
|

|
|
|
|
|
|
-```
|
|
|
|
|
|
+``` javascript
|
|
// 定义箭头长度
|
|
// 定义箭头长度
|
|
const d = 5;
|
|
const d = 5;
|
|
// 线段与x轴夹角
|
|
// 线段与x轴夹角
|
|
@@ -139,7 +140,7 @@ this.restore();
|
|
|
|
|
|

|
|

|
|
|
|
|
|
-```
|
|
|
|
|
|
+``` javascript
|
|
// 定义箭头长度
|
|
// 定义箭头长度
|
|
const d = 5;
|
|
const d = 5;
|
|
// 箭头横坐标
|
|
// 箭头横坐标
|
|
@@ -175,7 +176,7 @@ this.restore();
|
|
|
|
|
|

|
|

|
|
|
|
|
|
-```
|
|
|
|
|
|
+``` javascript
|
|
// 定义箭头长度
|
|
// 定义箭头长度
|
|
const d = 5;
|
|
const d = 5;
|
|
// 线段与x轴夹角
|
|
// 线段与x轴夹角
|