Derrick.Jiao 发表于 2021-5-8 10:26:27

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

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


那么如何指定填充呢?可以参考下面的代码指定填充的类型、方向等。
let style = shape.style();
    style.fill = {
      type: GC.Spread.Sheets.Shapes.GradientFillType.linear,
      direction: GC.Spread.Sheets.Shapes.LinearGradientFillDirection.linearRight,
      stops: [ {color: 'blue', position: 0 }, {color: 'pink', position: 1} ]
    };
    shape.style(style);

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



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

let style = shape.style();
    style.fill = {
      src: "data:image/jpeg;base64...",
      tilePictureAsTexture: true,
      offsetX: 20,
      offsetY: 20,
      scaleX: 0.5,
      scaleY: 0.5,
      alignment: GC.Spread.Sheets.Shapes.TextureFillAlignment.topLeft,
      mirrorType: GC.Spread.Sheets.Shapes.TextureFillMirrorType.horizontal
    };
    shape.style(style);

页: [1]
查看完整版本: SpreadJS V14 Update1 新特性 - 形状增强 - 填充