- SpreadJS Overview
- Getting Started
- JavaScript Frameworks
- Best Practices
-
Features
- Workbook
- Worksheet
- Rows and Columns
- Headers
- Cells
- Data Binding
- TableSheet
- GanttSheet
- JSON Schema with SpreadJS
- SpreadJS File Format
- Data Validation
- Conditional Formatting
- Sort
- Group
- Formulas
- Serialization
- Keyboard Actions
- Shapes
- Form Controls
- Floating Objects
- Barcodes
- Charts
- Sparklines
- Tables
- Pivot Table
- Slicer
- Theme
- Culture
- SpreadJS Designer
- SpreadJS Designer Component
- Touch Support
- Formula Reference
- Import and Export Reference
- Frequently Used Events
- API Documentation
- Release Notes
Fill Effects
SpreadJS allows you to add fill effects in shapes in order to enhance their appearance by creating different UI effects.
Solid Fill
You can apply a solid fill to shapes by using ShapeFillType enumeration. It provides solid and none values which create the below fill effects:
The following code example applies solid and no fill to shapes.
// Add a shape with solid fill
var shape1 = activeSheet.shapes.add("myShape1", GC.Spread.Sheets.Shapes.AutoShapeType.diamond, 200, 50, 150, 150);
var style = shape1.style();
style.fill = { type: GC.Spread.Sheets.Shapes.ShapeFillType.solid, color: 'red'};
shape1.style(style);
// Add a shape with no fill
var shape2 = activeSheet.shapes.add("myShape1", GC.Spread.Sheets.Shapes.AutoShapeType.diamond, 400, 50, 150, 150);
var style = shape2.style();
style.fill = { type: GC.Spread.Sheets.Shapes.ShapeFillType.none };
shape2.style(style);Gradient Fill
You can apply a gradient fill to shapes that provide a 3D color look by creating color blending effects. The start position of every color can be specified in the stops property and the brightness and transparency ratio of colors can be set as well.
SpreadJS provides two types of gradient fills:
Linear gradient: Fills the shape defined by the direction or angle. If direction and angle, both are mentioned, direction takes precedence.
Radial gradient: Fills the shape defined by the direction of the center point.
The linear or radial values of GradientFillType enumeration can be used to set the type of gradient fill in shapes. The direction of gradients can be set by using LinearGradientFillDirection or RadialGradientFillDirection enumerations.
The following example code applies linear and radial gradient fill to the four shapes as shown in the above image.
// Add linear fill specified by direction
addStyles(sheet.shapes.get('shape1'),
{ type: GC.Spread.Sheets.Shapes.GradientFillType.linear,
direction: GC.Spread.Sheets.Shapes.LinearGradientFillDirection.linearRight,
stops: [{color: 'pink', position: 0}, {color: 'blue', position: 1}]
});
// Add linear fill specified by angle
addStyles(sheet.shapes.get('shape2'),
{ type: GC.Spread.Sheets.Shapes.GradientFillType.linear,
angle: 60,
stops: [{color: 'yellow', position: 0, transparency: 0.3},
{color: 'green', position: 0.5, transparency: 0.5},
{color: 'blue', position: 1, transparency: 0.8, brightness: 0.2}]
});
// Add radial fill specified by center direction
addStyles(sheet.shapes.get('shape3'),
{ type: GC.Spread.Sheets.Shapes.GradientFillType.radial,
direction: GC.Spread.Sheets.Shapes.RadialGradientFillDirection.fromCenter,
stops: [{color: 'blue', position: 0}, {color: 'pink', position: 1}]
});
// Add radial fill specified by bottom right direction
addStyles(sheet.shapes.get('shape4'),
{ type: GC.Spread.Sheets.Shapes.GradientFillType.radial,
direction: GC.Spread.Sheets.Shapes.RadialGradientFillDirection.fromBottomRight,
stops: [{color: 'yellow', position: 0}, {color: 'green', position: 1}]
});
function addStyles(shapeName, fillType) {
var style = shapeName.style();
style.fill = fillType;
shapeName.style(style);
}Picture Fill
You can add pictures in shapes by setting the image source as a base64 string. The transparency and offset properties (left, right, top, bottom) can also be set by using the fill options of the IShapePictureFillOption interface.
The following example code adds an image in a shape and sets its transparency.
var shapechart = "data:image/png;base64,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";
var GCshape = sheet.shapes.add("myShape1", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 20, 50, 400, 300);
// Picture fill style
var stylePic = GCshape.style();
stylePic.fill = { src: shapechart, transparency: 0.2};
GCshape.style(stylePic);Texture Fill
You can apply texture fill to shapes by adding a picture as texture in a shape. The tilePictureAsTexture property of the IShapeTextureFillOption interface should be set to true so that the picture behaves as a texture. The transparency, offset, scale, alignment, and mirror type properties can also be set by using the fill options of the IShapeTextureFillOption interface.
The following example code adds a picture as texture in a shape.
var grapecityImg = "data:image/png;base64,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";
var GCshape2 = sheet.shapes.add("myShape2", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 450, 50, 450, 300);
// Texture fill style
var styleTexture = GCshape2.style();
styleTexture.fill = { src: grapecityImg, tilePictureAsTexture: true,
transparency: 0.7,
scaleX: 0.8,
scaleY: 0.8,
alignment: GC.Spread.Sheets.Shapes.TextureFillAlignment.left
};
GCshape2.style(styleTexture);Limitations of Picture and Texture fill
SpreadJS only supports adding pictures with base64 format.
SVG images must have specified dimensions (width and height), for example:
<svg width="5cm" height="5cm" />Transparency property is not supported while exporting to PDF.
While exporting to Excel, the DPI of the picture should be 96 otherwise, the texture filling effects will be inconsistent.