Browse Source

渐变demo图,

haojianlong 4 years ago
parent
commit
df85c759a5

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

@@ -0,0 +1,3 @@
+# 线末端箭头绘制
+
+

+ 0 - 0
docs/dev/saga-graphy/graphy-engine/composite.md


+ 13 - 0
docs/dev/saga-graphy/graphy-engine/draw.md

@@ -0,0 +1,13 @@
+# 绘制
+
+## 形状
+
+## 路径
+
+## 文本
+
+## 图像
+
+## 蒙版
+
+ 顺时针/逆时针 挖洞实现 

+ 43 - 0
docs/dev/saga-graphy/graphy-engine/gradient.md

@@ -0,0 +1,43 @@
+# 渐变
+
+渐变是一种有规律性的变化;引擎中分为线性渐变和放射性渐变
+
+## 线性渐变
+
+定义从上到下的渐变,作为矩形的填充样式:
+
+![线性渐变1](./img/line-gradient2.png) 
+
+demo代码示例
+
+```
+let gradient = new SLinearGradient(this.minX,this.minY,this.minX,this.maxY)
+gradient.addColorStop(0,new SColor('#d8b31d'))
+gradient.addColorStop(0.5,new SColor('#38ded6'))
+gradient.addColorStop(1,new SColor('#c3470c'))
+```
+
+定义从左到右的渐变,作为矩形的填充样式:
+
+![线性渐变2](./img/line-gradient.png) 
+
+demo代码示例
+
+```
+let gradient = new SLinearGradient(this.minX,this.minY,this.maxX,this.minY)
+gradient.addColorStop(0,new SColor('#d8b31d'))
+gradient.addColorStop(0.5,new SColor('#38ded6'))
+gradient.addColorStop(1,new SColor('#c3470c'))
+painter.brush.gradient = gradient
+```
+
+## 放射渐变
+
+绘制一个矩形,并用放射状/圆形渐变进行填充:
+
+![放射渐变1](./img/radial-gradient.png) 
+
+## 渐变属性
+
+起点,结束点,stop停点
+

BIN
docs/dev/saga-graphy/graphy-engine/img/copy.png


BIN
docs/dev/saga-graphy/graphy-engine/img/destination-atop.png


BIN
docs/dev/saga-graphy/graphy-engine/img/destination-in.png


BIN
docs/dev/saga-graphy/graphy-engine/img/destination-out.png


BIN
docs/dev/saga-graphy/graphy-engine/img/destination-over.png


BIN
docs/dev/saga-graphy/graphy-engine/img/drawconstruction.png


BIN
docs/dev/saga-graphy/graphy-engine/img/gradient-construction.png


BIN
docs/dev/saga-graphy/graphy-engine/img/line-gradient.png


BIN
docs/dev/saga-graphy/graphy-engine/img/line-gradient2.png


BIN
docs/dev/saga-graphy/graphy-engine/img/line-gradient3.png


BIN
docs/dev/saga-graphy/graphy-engine/img/linghter.png


BIN
docs/dev/saga-graphy/graphy-engine/img/radial-gradient.png


BIN
docs/dev/saga-graphy/graphy-engine/img/source-atop.png


BIN
docs/dev/saga-graphy/graphy-engine/img/source-in.png


BIN
docs/dev/saga-graphy/graphy-engine/img/source-out.png


BIN
docs/dev/saga-graphy/graphy-engine/img/source-over.png


BIN
docs/dev/saga-graphy/graphy-engine/img/xor.png


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

@@ -3,7 +3,8 @@ const content = [
         title: "绘图引擎",
         path: "/dev/saga-graphy/graphy-engine/",
         children: [
-
+            ["/dev/saga-graphy/graphy-engine/gradient", "渐变"],
+            ["/dev/saga-graphy/graphy-engine/composite", "融合"],
         ]
     },
     {