塗りつぶし効果

SpreadJS Shapeはグラデーション、画像、およびテクスチャの機能を提供して、シェイプの塗りつぶしを強化します。

シェイプを選択し、右側のパネルで塗りつぶし設定を変更してみてください。

次のサンプルは、塗りつぶしなしの設定です。 次のサンプルは、単色塗りつぶしの設定です。 線形グラデーションと放射グラデーションをサポートしています。 線形グラデーションを使用する場合、角度または方向を使用してグラデーションを指定できます。ただし、方向と角度を同時に設定すると、方向が使用されます。 次のサンプルは、グラデーションの塗りつぶしの設定です。 次のサンプルは、画像の塗りつぶしを設定します。 現在は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/jpeg;base64,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" var fillProp = el("#fillProp"); var tip = el("#tip"); // solid fill el var solidFillColorEl = el(".color"); var solidFillTransparencyEl = el("#shapeSolidFill .transparency"); var setSolidFillBtn = el("#shapeSolidFill .setBtn"); // 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: '#000000', position: 0}, { color: '#000000', position: 0.25}, { color: '#444444', position: 0.25}, { color: '#444444', position: 0.50}, { color: '#888888', position: 0.50}, { color: '#888888', position: 0.75}, { color: '#cccccc', position: 0.75}, { color: '#cccccc', position: 1}, ] }); setFill(shapes.get('shape2'), { type: GC.Spread.Sheets.Shapes.GradientFillType.linear, direction: GC.Spread.Sheets.Shapes.LinearGradientFillDirection.linearDown, stops: [ { color: 'blue', position: 0}, { color: 'pink', position: 1}, ] }); setFill(shapes.get('shape3'), { type: GC.Spread.Sheets.Shapes.GradientFillType.linear, direction: GC.Spread.Sheets.Shapes.LinearGradientFillDirection.topLeftToBottomRight, stops: [ { color: '#e66465', position: 0}, { color: '#9198e5', position: 1}, ] }); setFill(shapes.get('shape4'), { type: GC.Spread.Sheets.Shapes.GradientFillType.radial, direction: GC.Spread.Sheets.Shapes.RadialGradientFillDirection.fromCenter, stops: [ { color: '#000000', position: 0}, { color: '#000000', position: 0.25}, { color: '#444444', position: 0.25}, { color: '#444444', position: 0.50}, { color: '#888888', position: 0.50}, { color: '#888888', position: 0.75}, { color: '#cccccc', position: 0.75}, { color: '#cccccc', position: 1}, ] }); setFill(shapes.get('shape5'), { type: GC.Spread.Sheets.Shapes.GradientFillType.radial, direction: GC.Spread.Sheets.Shapes.RadialGradientFillDirection.fromCenter, stops: [ { color: 'blue', position: 0}, { color: 'pink', position: 1}, ] }); setFill(shapes.get('shape6'), { type: GC.Spread.Sheets.Shapes.GradientFillType.radial, direction: GC.Spread.Sheets.Shapes.RadialGradientFillDirection.fromBottomLeft, stops: [ { color: '#e66465', position: 0}, { color: '#9198e5', position: 1}, ] }); loadImage("$DEMOROOT$/spread/source/images/olympic.jpg", function(src) { setFill(shapes.get('shape7'), {src: src}); }); loadImage("$DEMOROOT$/spread/source/images/apple.jpg", function(src) { setFill(shapes.get('shape8'), {src: src}); }); loadImage("$DEMOROOT$/spread/source/images/apple.jpg", 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"; } setSolidFillBtn.onclick = function() { setFill(getSelectedShape(), { color: solidFillColorEl.value, transparency: Number(solidFillTransparencyEl.value) }) }; 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:"yellow" }, { position:0.5, color:"white" }, { position:1, color:"green" } ], null, 2); } start(); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="ja-jp" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.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="shapeSolidFill" class="option-row"> <label class="title">単色塗りつぶし</label> <label>色:</label> <input class='color' type="color" value="#00A2E8"/> <label>透明度:</label> <input class='transparency' type="number" value="0"/> <button class='setBtn'>単色塗りつぶしを設定</button> </div> <div class="divide-line"></div> <div id="shapeGradientFill" class="option-row"> <label class="title">グラデーション塗りつぶし</label> <label>グラデーションの種類:</label> <select class='type'> <option value="0">linear</option> <option value="1">radial</option> </select> <label>方向:</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>角度:</label> <input class='angle' type="number" value="0"/> <label>分岐点:</label> <textarea class='stops' rows="10"></textarea> <button class='setBtn'>グラデーションを設定</button> </div> <div class="divide-line"></div> <div id="pictureOrTextureFill" class="option-row"> <label class="title">画像/テクスチャ塗りつぶし</label> 画像:<input class="imgInput" type="file" accept="image/*"> 透明度:<input class="transparency" type="number" min="0" max="1" step="0.01" value="0"> 図をテクスチャとして並べる:<input class="tilePictureAsTexture" style="width: 20px;" type="checkbox"> <div class="divide-line"></div> <div id="pictureFillOption"> オフセット (左):<input class="offsetLeft" type="number" min="-1" max="1" step="0.01" value="0"> オフセット (右):<input class="offsetRight" type="number" min="-1" max="1" step="0.01" value="0"> オフセット (上):<input class="offsetTop" type="number" min="-1" max="1" step="0.01" value="0"> オフセット (下):<input class="offsetBottom" type="number" min="-1" max="1" step="0.01" value="0"> </div> <div id='textureFillOption' style="display: none;"> 横方向に移動:<input class="offsetX" type="number" step="1" value="0"> 縦方向に移動:<input class="offsetY" type="number" step="1" value="0"> 幅の調整:<input class="scaleX" type="number" min="0" max="1" step="0.01" value="1"> 高さの調整:<input class="scaleY" type="number" min="0" max="1" step="0.01" value="1"> <label>配置:</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> <label>反転の種類:</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'>画像/テクスチャを設定</button> </div> </div> <div id="tip" class="options-container"> シェイプを選択して、塗りつぶし効果を適用してください </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: lavender; } 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; }