登录/注册

首页 › SpreadJS & GcExcel专区 › 产品动态 › 查看内容

122 主题	1万帖子	1万积分

积分: 16481

131358
金币
122
主题
11583
帖子

最新发帖

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

讲师达人认证

悬赏达人认证

SpreadJS 开发认证

论坛元老 / 发表于：2021-5-8 10:26 / 查看：2596 / 回复：0

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

image.png932898254.png

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

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格式。
image.png240248717.png

image.png240248717.png

讲完渐变填充，我们再来看下材质纹理填充，具体用法可以参考下面的用法。与形状填充类似，我们需要指定填充材质的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);

复制代码

收藏

回复

0 个回复