填充效果

SpreadJS形状提供渐变填充,图片填充以及纹理填充。

尝试选择一个形状以及在右边区域改变填充设置。

下面的例子展示了无填充。 下面的例子展示了纯色填充。 我们支持线形渐变和环形渐变。 当使用线形渐变时,又可以使用angle或者direction来指定渐变方向。但是如果你同时设置direction和angle,direction将会起作用。 下面的代码展示了设置渐变填充。 下面的例子展示了图片填充。 当前我们只支持base64格式的图片。 下面例子展示了设置纹理填充。
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="spreadjs culture" content="zh-cn" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/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> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.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> img:<input class="imgInput" type="file" accept="image/*"> transparency:<input class="transparency" type="number" min="0" max="1" step="0.01" value="0"> tilePictureAsTexture:<input class="tilePictureAsTexture" type="checkbox"> <div class="divide-line"></div> <div id="pictureFillOption"> offsetLeft:<input class="offsetLeft" type="number" min="-1" max="1" step="0.01" value="0"> offsetRight:<input class="offsetRight" type="number" min="-1" max="1" step="0.01" value="0"> offsetTop:<input class="offsetTop" type="number" min="-1" max="1" step="0.01" value="0"> offsetBottom:<input class="offsetBottom" type="number" min="-1" max="1" step="0.01" value="0"> </div> <div id='textureFillOption' style="display: none;"> offsetX:<input class="offsetX" type="number" step="1" value="0"> offsetY:<input class="offsetY" type="number" step="1" value="0"> scaleX:<input class="scaleX" type="number" min="0" max="1" step="0.01" value="1"> scaleY:<input class="scaleY" type="number" min="0" max="1" step="0.01" value="1"> alignment: <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> mirrorType: <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 { width: 210px; 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; }