ソースを参照

箭头绘制方式补充

haojianlong 5 年 前
コミット
b99d5b9225

+ 31 - 5
docs/dev/saga-graphy/graphy-engine/arrow.md

@@ -16,15 +16,15 @@
 
 #### 画法描述
 
-1.将canvas坐标转换为数学坐标系坐标,将纵坐标取反即可;
+1.将坐标系平移至线段终点;
 
-2.将坐标系平移至线段终点;
+2.计算出线段与x轴夹角,并将坐标系旋转至x轴与线段重合;
 
-3.计算出线段与x轴夹角,并将坐标系旋转至x轴与线段重合;
+3.设定箭头夹角为θ=π/2,末端三角形边长d=5,则箭头上下端与x轴夹角为π/4,根据此角度与边长计算上下端坐标;
 
-4.设定箭头夹角为θ=π/3,末端三角形边长d=5,则箭头上下端与x轴夹角为π/6,根据此角度与边长计算上下端坐标;
+4.直接绘制原点与上下端连线的折线图形即可;
 
-5.直接绘制原点与上下端连线即可
+![标准箭头计算](./img/basic-jisuan.png)
 
 ### 三角形
 
@@ -32,20 +32,46 @@
 
 ![三角形箭头](./img/triangle-arrow.png)
 
+#### 画法描述
+
+坐标点位置计算与标准箭头类似,只是箭头夹角θ=π/6,且最后绘制图形为多边形
+
 ### 圆
 
 绘制如下类型箭头,通过画笔颜色和画刷颜色控制笔触颜色和填充颜色
 
 ![圆形箭头](./img/circle-arrow.png)
 
+#### 画法描述
+
+1.将坐标系平移至线段终点;
+
+2.设定圆半径r=5,计算圆心坐标为(-r,0),绘制圆形即可
+
+![圆形计算](./img/circle-jisuan.png)
+
 ### 菱形
 
 绘制如下类型箭头,通过画笔颜色和画刷颜色控制笔触颜色和填充颜色
 
 ![菱形箭头](./img/diamond-arrow.png)
 
+#### 画法描述
+
+坐标点位置计算与标准箭头类似,只需多计算一个点,绘制图形为多边形
+
+![菱形计算](./img/diamond-jisuan.jpg)
+
 ### 方形
 
 绘制如下类型箭头,通过画笔颜色和画刷颜色控制笔触颜色和填充颜色
 
 ![方形箭头](./img/square-arrow.png)
+
+#### 画法描述
+
+1.将坐标系平移至线段终点;
+
+2.可以计算四个顶点坐标,绘制多边形;亦可移至计算出的原点,直接绘制矩形;
+
+![方形计算](./img/square-jisuan.png)

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


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


BIN
docs/dev/saga-graphy/graphy-engine/img/diamond-jisuan.jpg


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