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]