次のサンプルは、塗りつぶしなしの設定です。
次のサンプルは、単色塗りつぶしの設定です。
線形グラデーションと放射グラデーションをサポートしています。
線形グラデーションを使用する場合、角度または方向を使用してグラデーションを指定できます。ただし、方向と角度を同時に設定すると、方向が使用されます。
次のサンプルは、グラデーションの塗りつぶしの設定です。
次のサンプルは、画像の塗りつぶしを設定します。
現在は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="ja-jp" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/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="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>
<label>画像：</label>
<input class="imgInput" type="file" accept="image/*">
<br>
<label>透明度：</label>
<input class="transparency" type="number" min="0" max="1" step="0.01" value="0">
<br>
画像をテクスチャとして並べる：
<input class="tilePictureAsTexture" type="checkbox">
<div class="divide-line"></div>
<div id="pictureFillOption">
<label>オフセット (左)：</label>
<input class="offsetLeft" type="number" min="-1" max="1" step="0.01" value="0">
<br>
<label>オフセット (右)：</label>
<input class="offsetRight" type="number" min="-1" max="1" step="0.01" value="0">
<br>
<label>オフセット (上)：</label>
<input class="offsetTop" type="number" min="-1" max="1" step="0.01" value="0">
<br>
<label>オフセット (下)：</label>
<input class="offsetBottom" type="number" min="-1" max="1" step="0.01" value="0">
</div>
<div id='textureFillOption' style="display: none;">
<label>横方向に移動：</label>
<input class="offsetX" type="number" step="1" value="0">
<br>
<label>縦方向に移動：</label>
<input class="offsetY" type="number" step="1" value="0">
<br>
<label>幅の調整：</label>
<input class="scaleX" type="number" min="0" max="1" step="0.01" value="1">
<br>
<label>高さの調整：</label>
<input class="scaleY" type="number" min="0" max="1" step="0.01" value="1">
<br>
<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>
<br>
<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% - 300px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 300px;
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;
}
