Browse Source

绘制命令,绘制带有末端样式的线段补充

haojianlong 4 years ago
parent
commit
9c201fbe47

+ 53 - 1
docs/dev/saga-graphy/graphy-engine/arrow.md

@@ -1,3 +1,55 @@
-# 线末端箭头绘制
+# 绘图指令-绘制带有末端样式的线段
 
+## 函数入参
 
+## 类型
+
+### 无
+
+不绘制任意箭头
+
+### 标准箭头
+
+绘制如下类型箭头
+
+![标准箭头](./img/basic-arrow.png)
+
+#### 画法描述
+
+1.将canvas坐标转换为数学坐标系坐标,将纵坐标取反即可;
+
+2.将坐标系平移至线段起点;
+
+3.计算出线段与x轴夹角,并将坐标系旋转至x轴与线段重合;
+
+4.将坐标系平移至终点;
+
+5.设定箭头夹角为θ=90°,末端三角形边长d=6,则箭头上端与x轴夹角为π-θ/2,箭头下端与x轴夹角为π+θ/2,根据此角度与边长计算上下端坐标;
+
+6.将计算出的坐标依次转换为数学坐标系坐标和canvas坐标系坐标;
+
+7.根据终点坐标,以及以上计算出的坐标即可绘制三角形末端;
+
+### 三角形
+
+绘制如下类型箭头,通过画笔颜色和画刷颜色控制笔触颜色和填充颜色
+
+![三角形箭头](./img/triangle-arrow.png)
+
+### 圆
+
+绘制如下类型箭头,通过画笔颜色和画刷颜色控制笔触颜色和填充颜色
+
+![圆形箭头](./img/circle-arrow.png)
+
+### 菱形
+
+绘制如下类型箭头,通过画笔颜色和画刷颜色控制笔触颜色和填充颜色
+
+![菱形箭头](./img/diamond-arrow.png)
+
+### 方形
+
+绘制如下类型箭头,通过画笔颜色和画刷颜色控制笔触颜色和填充颜色
+
+![方形箭头](./img/square-arrow.png)

BIN
docs/dev/saga-graphy/graphy-engine/img/basic-arrow.png


BIN
docs/dev/saga-graphy/graphy-engine/img/circle-arrow.png


BIN
docs/dev/saga-graphy/graphy-engine/img/diamond-arrow.png


BIN
docs/dev/saga-graphy/graphy-engine/img/square-arrow.png


BIN
docs/dev/saga-graphy/graphy-engine/img/triangle-arrow.png


+ 1 - 0
docs/dev/saga-graphy/index.js

@@ -5,6 +5,7 @@ const content = [
         children: [
             ["/dev/saga-graphy/graphy-engine/gradient", "渐变"],
             ["/dev/saga-graphy/graphy-engine/composite", "融合"],
+            ["/dev/saga-graphy/graphy-engine/arrow", "绘图指令-绘制带有箭头的线段"],
         ]
     },
     {