SpreadJS V14 Update1 新特性 - 形状增强 - 填充

在此版本中，我们新增了两种填充，分别为渐变填充和材质纹理填充。也就是对形状进行这些填充，使得形状更加丰富和多样化。
在渐变填充中，我们有线性渐变以及径向渐变。使用线性渐变时，可以使用角度或方向字段指定渐变。但如果你同时设定方向和角度，会根据方向进行渐变。


那么如何指定填充呢？可以参考下面的代码指定填充的类型、方向等。

1. let style = shape.style();
   
2.     style.fill = {
   
3.         type: GC.Spread.Sheets.Shapes.GradientFillType.linear,
   
4.         direction: GC.Spread.Sheets.Shapes.LinearGradientFillDirection.linearRight,
   
5.         stops: [ {color: 'blue', position: 0 }, {color: 'pink', position: 1} ]
   
6.     };
   
7.     shape.style(style);

复制代码

不仅如此，我们也可以将图片填充到形状上，目前只支持base64格式。



讲完渐变填充，我们再来看下材质纹理填充，具体用法可以参考下面的用法。与形状填充类似，我们需要指定填充材质的src，接着去设置他的对齐方式等。

1. let style = shape.style();
   
2.     style.fill = {
   
3.         src: "data:image/jpeg;base64...",
   
4.         tilePictureAsTexture: true,
   
5.         offsetX: 20,
   
6.         offsetY: 20,
   
7.         scaleX: 0.5,
   
8.         scaleY: 0.5,
   
9.         alignment: GC.Spread.Sheets.Shapes.TextureFillAlignment.topLeft,
   
10.         mirrorType: GC.Spread.Sheets.Shapes.TextureFillMirrorType.horizontal
    
11.     };
    
12.     shape.style(style);

复制代码