The following sample shows set no fill.
The following sample shows set solid fill.
We support linear gradients and radial gradients.
When using linear gradients, you can use angle or direction field to specify the gradient. But if you set direction and angle at the same time, direction will work.
The following samples shows set gradient fill.
The following samples shows set picture fill.
Currently we only support pictures with base64 format.
The following samples shows set texture fill.
window.onload = function() {
window.workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
window.sheet = workbook.getActiveSheet();
window.shapes = sheet.shapes;
var defaultSrc = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAC5VBMVEUAAACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvABHaHJoAAAA93RSTlMAAhZNh7re8/3/3QEIS6Lh/qFgz/xGyPvJKKipEYTxBV/cPMDBIZ75DXnsVNU0txqU9glu5krNLK4UifIGZN9BxSWj+g9+7wNa2Vk4vB6Z9wtz6U/RMLIXjvRp4ynwg5+t4MSkJO7Y+B10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";
var fillProp = el("#fillProp");
var tip = el("#tip");
// gradient fill el
var gradientFillTypeEl = el(".type");
var gradientAngleEL = el(".angle");
var gradientLinearDirectionEl = el(".linearDirection");
var gradientRadialDirectionEl = el(".radialDirection");
var gradientColorStopsEl = el(".stops");
var setGradientFillBtn = el("#shapeGradientFill .setBtn");
// picture or texture fill el
var pictureFillPropEl = el("#pictureFillOption");
var textureFillPropEl = el("#textureFillOption");
var imgInputEl = el(".imgInput");
var transparencyEl = el("#pictureOrTextureFill .transparency");
var tilePictureAsTextureEl = el(".tilePictureAsTexture");
var offsetLeftEl = el(".offsetLeft");
var offsetRightEl = el(".offsetRight");
var offsetTopEl = el(".offsetTop");
var offsetBottomEl = el(".offsetBottom");
var offsetXEl = el(".offsetX");
var offsetYEl = el(".offsetY");
var scaleXEl = el(".scaleX");
var scaleYEl = el(".scaleY");
var alignmentEl = el(".alignment");
var mirrorTypeEl = el(".mirrorType");
var setPictureOrTextureFillBtn = el("#pictureOrTextureFill .setBtn");
function addDefaultShape() {
var x = 30, y = 30, width = 200, height = 100, xGap = 260, yGap = 160;
for (var i = 0; i < 9; i++) {
var tx = x + xGap * (i % 3);
var ty = y + yGap * Math.floor(i / 3);
shapes.add("shape" + (i + 1), GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, tx, ty, width, height);
}
setFill(shapes.get('shape1'), {
type: GC.Spread.Sheets.Shapes.GradientFillType.linear,
direction: GC.Spread.Sheets.Shapes.LinearGradientFillDirection.linearRight,
stops: [
{ color: '#f7a711', position: 0},
{ color: '#f7a711', position: 0.25},
{ color: '#f6c65e', position: 0.25},
{ color: '#f6c65e', position: 0.50},
{ color: '#f8e29c', position: 0.50},
{ color: '#f8e29c', position: 0.75},
{ color: '#fffada', position: 0.75},
{ color: '#fffada', position: 1},
]
});
setFill(shapes.get('shape2'), {
type: GC.Spread.Sheets.Shapes.GradientFillType.linear,
direction: GC.Spread.Sheets.Shapes.LinearGradientFillDirection.linearDown,
stops: [
{ color: '#f7a711', position: 0},
{ color: '#ffffff', position: 1},
]
});
setFill(shapes.get('shape3'), {
type: GC.Spread.Sheets.Shapes.GradientFillType.linear,
direction: GC.Spread.Sheets.Shapes.LinearGradientFillDirection.topLeftToBottomRight,
stops: [
{ color: '#82bc00', position: 0},
{ color: '#ffffff', position: 1},
]
});
setFill(shapes.get('shape4'), {
type: GC.Spread.Sheets.Shapes.GradientFillType.radial,
direction: GC.Spread.Sheets.Shapes.RadialGradientFillDirection.fromCenter,
stops: [
{ color: '#f7a711', position: 0},
{ color: '#f7a711', position: 0.25},
{ color: '#f6c65e', position: 0.25},
{ color: '#f6c65e', position: 0.50},
{ color: '#f8e29c', position: 0.50},
{ color: '#f8e29c', position: 0.75},
{ color: '#fffada', position: 0.75},
{ color: '#fffada', position: 1},
]
});
setFill(shapes.get('shape5'), {
type: GC.Spread.Sheets.Shapes.GradientFillType.radial,
direction: GC.Spread.Sheets.Shapes.RadialGradientFillDirection.fromCenter,
stops: [
{ color: '#82bc00', position: 0},
{ color: '#ffffff', position: 1},
]
});
setFill(shapes.get('shape6'), {
type: GC.Spread.Sheets.Shapes.GradientFillType.radial,
direction: GC.Spread.Sheets.Shapes.RadialGradientFillDirection.fromBottomLeft,
stops: [
{ color: '#f7a711', position: 0},
{ color: '#ffffff', position: 1},
]
});
loadImage("$DEMOROOT$/spread/source/images/logo.jpg", function(src) {
setFill(shapes.get('shape7'), {src: src});
});
loadImage("$DEMOROOT$/spread/source/images/splogo.png", function(src) {
setFill(shapes.get('shape8'), {src: src});
});
loadImage("$DEMOROOT$/spread/source/images/splogo.png", function(src) {
setFill(shapes.get('shape9'), {src: src, tilePictureAsTexture: true, scaleX: 0.25, scaleY: 0.25});
});
}
function loadImage(url, callback) {
try {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var blob = xhr.response;
var fileReader = new FileReader();
fileReader.onload = function() {
callback(fileReader.result);
};
fileReader.readAsDataURL(blob);
};
xhr.responseType = "blob";
xhr.open("GET", url);
xhr.send();
} catch (error) {
callback(defaultSrc);
}
}
function el(str) {
return document.querySelector(str);
}
function setFill(shape, fill) {
var style = shape.style();
style.fill = fill;
shape.style(style);
}
function getSelectedShape() {
var selectedShape = null;
var allShapes = shapes.all();
for (var i = 0; i < allShapes.length; i++) {
var shape = allShapes[i];
if (shape.isSelected()) {
selectedShape = shape;
break;
}
}
return selectedShape;
}
function getGradientDirection () {
var direction = gradientLinearDirectionEl.value;
if (gradientLinearDirectionEl.style.display === 'none') {
direction = gradientRadialDirectionEl.value;
}
return direction === "undefined" ? undefined : Number(direction);
}
function showShapeProp () {
fillProp.style.display = '';
tip.style.display = 'none';
}
function hiddenShapeProp() {
fillProp.style.display = 'none';
tip.style.display = '';
}
function bindPanelEvent() {
sheet.bind(GC.Spread.Sheets.Events.ShapeSelectionChanged, function () {
var selectedShape = sheet.shapes.all().filter(function(sp){
return sp.isSelected() && sp instanceof GC.Spread.Sheets.Shapes.Shape;
});
if (selectedShape.length === 1) {
showShapeProp();
} else {
hiddenShapeProp();
}
});
gradientFillTypeEl.onchange = function() {
var type = gradientFillTypeEl.value;
if (Number(type) === GC.Spread.Sheets.Shapes.GradientFillType.linear) {
gradientLinearDirectionEl.style.display = '';
gradientRadialDirectionEl.style.display = 'none';
} else {
gradientLinearDirectionEl.style.display = 'none';
gradientRadialDirectionEl.style.display = '';
}
};
tilePictureAsTextureEl.onchange = function() {
var v = tilePictureAsTextureEl.checked;
pictureFillPropEl.style.display = v ? "none" : "";
textureFillPropEl.style.display = v ? "" : "none";
}
setGradientFillBtn.onclick = function() {
setFill(getSelectedShape(), {
type: Number(gradientFillTypeEl.value),
direction: getGradientDirection(),
angle: Number(gradientAngleEL.value),
stops: JSON.parse(gradientColorStopsEl.value)
})
};
setPictureOrTextureFillBtn.onclick = function() {
var blob = imgInputEl.files[0];
var fileReader = new FileReader();
fileReader.addEventListener('load', function() {
setFill(getSelectedShape(), {
src: fileReader.result,
transparency: transparencyEl.value,
tilePictureAsTexture: tilePictureAsTextureEl.checked,
offsetLeft: offsetLeftEl.value,
offsetRight: offsetRightEl.value,
offsetTop: offsetTopEl.value,
offsetBottom: offsetBottomEl.value,
offsetX: offsetXEl.value,
offsetY: offsetYEl.value,
scaleX: scaleXEl.value,
scaleY: scaleYEl.value,
alignment: alignmentEl.value,
mirrorType: mirrorTypeEl.value,
});
});
fileReader.readAsDataURL(blob);
};
}
function start() {
addDefaultShape();
bindPanelEvent();
gradientColorStopsEl.value = JSON.stringify([
{ position: 0, color:"#82BC00" },
{ position:0.5, color:"white" },
{ position:1, color:"orange" }
], null, 2);
}
start();
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div id="fillProp" class="options-container" style="display: none;">
<div id="shapeGradientFill" class="option-row">
<label class="title">Gradient Fill</label>
<label>Graient Fill Type: </label>
<select class='type'>
<option value="0">linear</option>
<option value="1">radial</option>
</select>
<label>Direction: </label>
<select class='linearDirection'>
<option value="undefined">none</option>
<option value="0">linearRight</option>
<option value="45">topLeftToBottomRight</option>
<option value="90">linearDown</option>
<option value="135">topRightToBottomLeft</option>
<option value="180">linearLeft</option>
<option value="225">bottomRightToTopLeft</option>
<option value="270">linearUp</option>
<option value="315">bottomLeftToTopRight</option>
</select>
<select class='radialDirection' style="display: none;">
<option value="0">fromCenter</option>
<option value="1">fromTopLeft</option>
<option value="2">fromTopRight</option>
<option value="3">fromBottomLeft</option>
<option value="4">fromBottomRight</option>
</select>
<label>Angle: </label>
<input class='angle' type="number" value="0" />
<label>Color Stops: </label>
<textarea class='stops' rows="10"></textarea>
<button class='setBtn'>Set Gradient Fill</button>
</div>
<div class="divide-line"></div>
<div id="pictureOrTextureFill" class="option-row">
<label class="title">Picture Or Texture Fill</label>
<label>Image:</label>
<input class="imgInput" type="file" accept="image/*">
<br>
<label>transparency:</label>
<input class="transparency" type="number" min="0" max="1" step="0.01" value="0">
<br>
tilePictureAsTexture:
<input class="tilePictureAsTexture" type="checkbox">
<div class="divide-line"></div>
<div id="pictureFillOption">
<label>offsetLeft:</label>
<input class="offsetLeft" type="number" min="-1" max="1" step="0.01" value="0">
<br>
<label>offsetRight:</label>
<input class="offsetRight" type="number" min="-1" max="1" step="0.01" value="0">
<br>
<label>offsetTop:</label>
<input class="offsetTop" type="number" min="-1" max="1" step="0.01" value="0">
<br>
<label>offsetBottom:</label>
<input class="offsetBottom" type="number" min="-1" max="1" step="0.01" value="0">
</div>
<div id='textureFillOption' style="display: none;">
<label>offsetX:</label>
<input class="offsetX" type="number" step="1" value="0">
<br>
<label>offsetY:</label>
<input class="offsetY" type="number" step="1" value="0">
<br>
<label>scaleX:</label>
<input class="scaleX" type="number" min="0" max="1" step="0.01" value="1">
<br>
<label>scaleY:</label>
<input class="scaleY" type="number" min="0" max="1" step="0.01" value="1">
<br>
<label>alignment:</label>
<select class="alignment">
<option value="0">Top Left</option>
<option value="1">Top </option>
<option value="2">Top Right</option>
<option value="3">Left</option>
<option value="4">Center</option>
<option value="5">Right</option>
<option value="6">Bottom Left</option>
<option value="7">Bottom</option>
<option value="8">Bottom Right</option>
</select>
<br>
<label>mirrorType:</label>
<select class="mirrorType">
<option value="0">None</option>
<option value="1">Horizontal</option>
<option value="2">Vertical</option>
<option value="3">Both</option>
</select>
</div>
<div class="divide-line"></div>
<button class='setBtn'>Set Picture Or Texture Fill</button>
</div>
</div>
<div id="tip" class="options-container">
Try selecting a shape to apply a fill effect.
</div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding-left: 5px;
}
.divide-line {
width: 100%;
height: 1px;
background: #cbcbcb;
margin-top: 10px;
margin-bottom: 3px;
}
.title {
text-align: center;
font-weight: bold;
}
label {
display: block;
margin-top: 15px;
margin-bottom: 5px;
}
p {
padding: 2px 10px;
background-color: #F4F8EB;
}
input {
margin-left: 10px;
display: inline;
}
input[type=button] {
width: 50px;
margin-left: 1px;
}
select {
width: 160px;
margin-left: 10px;
display: inline;
}
textarea {
width: 210px;
margin: 0px 0px;
margin-left: 10px;
padding: 2px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.setBtn {
width: 220px;
height: 31px;
margin: 12px 10px;
}
