다음 샘플은 채우기 없음 설정을 보여줍니다.
다음 샘플은 단색 채우기 설정을 보여줍니다.
선형 그라데이션과 방사형 그라데이션을 지원합니다.
선형 그라데이션을 사용하면 각도 또는 방향 필드를 사용하여 그라데이션을 지정할 수 있습니다. 하지만 방향과 각도를 동시에 설정하면 방향이 적용됩니다.
다음 샘플은 그라데이션 채우기 설정을 보여줍니다.
다음 샘플은 그림 채우기 설정을 보여줍니다.
현재 base64 형식 그림만 지원합니다.
다음 샘플은 질감 채우기 설정을 보여줍니다.
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
</gc-spread-sheets>
<div id="fillProp" class="options-container" v-if="active">
<div id="shapeGradientFill" class="option-row">
<label class="title">Gradient Fill</label>
<label>Graient Fill Type: </label>
<select class='type' v-model="type">
<option :value="0">linear</option>
<option :value="1">radial</option>
</select>
<label>Direction: </label>
<select class='direction' v-model="direction" v-if="type===0">
<option :value="-1">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='direction' v-model="direction" v-if="type===1">
<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" v-model="angle"/>
<label>Color Stops: </label>
<textarea class='stops' rows="10" v-model="stopsStr"></textarea>
<button class='setBtn' @click="setGradientFill">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/*" @change="onImgChange" />
<label>transparency:</label>
<input class="transparency" type="number" min="0" max="1" step="0.01" v-model="transparency" />
<br>
tilePictureAsTexture:<input class="tilePictureAsTexture" type="checkbox"
v-model="tilePictureAsTexture" />
<div class="divide-line"></div>
<div id="pictureFillOption" v-if="!tilePictureAsTexture">
<label>offsetLeft:</label>
<input class="offsetLeft" type="number" min="-1" max="1" step="0.01" v-model="offsetLeft" />
<label>offsetRight:</label>
<input class="offsetRight" type="number" min="-1" max="1" step="0.01" v-model="offsetRight" />
<label>offsetTop:</label>
<input class="offsetTop" type="number" min="-1" max="1" step="0.01" v-model="offsetTop" />
<label>offsetBottom:</label>
<input class="offsetBottom" type="number" min="-1" max="1" step="0.01" v-model="offsetBottom" />
</div>
<div id='textureFillOption' v-if="tilePictureAsTexture">
<label>offsetX:</label>
<input class="offsetX" type="number" step="1" v-model="offsetX" />
<label>offsetY:</label>
<input class="offsetY" type="number" step="1" v-model="offsetY" />
<label>scaleX:</label>
<input class="scaleX" type="number" min="0" max="1" step="0.01" v-model="scaleX" />
<label>scaleY:</label>
<input class="scaleY" type="number" min="0" max="1" step="0.01" v-model="scaleY" />
<label>alignment:</label>
<select class="alignment" v-model="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>mirrorType:</label>
<select class="mirrorType" v-model="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' @click="setPictureOrTextureFill">Set Picture Or Texture Fill</button>
</div>
</div>
<div id="tip" class="options-container" v-if="!active">Try to select a shape and apply a fill effect</div>
</div>
</template>
<script>
import Vue from "vue";
import "@mescius/spread-sheets-vue";
import "@mescius/spread-sheets-shapes";
import GC from "@mescius/spread-sheets";
import '@mescius/spread-sheets-resources-ko';
GC.Spread.Common.CultureManager.culture("ko-kr");
const defaultSrc = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAC5VBMVEUAAACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvACCvABHaHJoAAAA93RSTlMAAhZNh7re8/3/3QEIS6Lh/qFgz/xGyPvJKKipEYTxBV/cPMDBIZ75DXnsVNU0txqU9glu5krNLK4UifIGZN9BxSWj+g9+7wNa2Vk4vB6Z9wtz6U/RMLIXjvRp4ynwg5+t4MSkJO7Y+B10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";
let App = Vue.extend({
name: "app",
data: function () {
return {
active: false,
color: '#00A2E8',
transparency: 0,
type: 0,
direction: 0,
angle: 0,
stopsStr: JSON.stringify([
{ position: 0, color:"#82BC00" },
{ position:0.5, color:"white" },
{ position:1, color:"orange" }
], null, 2),
src: defaultSrc,
tilePictureAsTexture: false,
offsetLeft: 0,
offsetRight: 0,
offsetTop: 0,
offsetBottom: 0,
offsetX: 0,
offsetY: 0,
scaleX: 1,
scaleY: 1,
alignment: 0,
mirrorType: 0,
};
},
methods: {
initSpread(spread) {
this.spread = spread;
this.sheet = this.spread.getActiveSheet();
this.shapes = this.sheet.shapes;
this.addDefaultShape();
this.sheet.bind(GC.Spread.Sheets.Events.ShapeSelectionChanged, this.shapeSelectionChangedHandler.bind(this));
},
shapeSelectionChangedHandler() {
var selectedShape = this.shapes.all().filter(function(sp){
return sp.isSelected() && sp instanceof GC.Spread.Sheets.Shapes.Shape;
});
this.active = selectedShape.length === 1;
},
addDefaultShape() {
let shapes = this.shapes, setFill = this.setFill, loadImage = this.loadImage;
let 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: '#82bc00', position: 0},
{ color: '#82bc00', position: 0.25},
{ color: '#afd25e', position: 0.25},
{ color: '#afd25e', position: 0.50},
{ color: '#d6e89e', position: 0.50},
{ color: '#d6e89e', position: 0.75},
{ color: '#f9ffdd', position: 0.75},
{ color: '#f9ffdd', 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});
});
},
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);
}
},
setGradientFill() {
this.setFill(this.getSelectedShape(), {
type: this.type,
direction: this.direction === -1 ? undefined : this.direction,
angle: this.angle,
stops: JSON.parse(this.stopsStr),
})
},
setPictureOrTextureFill() {
this.setFill(this.getSelectedShape(), {
src: this.src,
transparency: this.transparency,
tilePictureAsTexture: this.tilePictureAsTexture,
offsetLeft: this.offsetLeft,
offsetRight: this.offsetRight,
offsetTop: this.offsetTop,
offsetBottom: this.offsetBottom,
offsetX: this.offsetX,
offsetY: this.offsetY,
scaleX: this.scaleX,
scaleY: this.scaleY,
alignment: this.alignment,
mirrorType: this.mirrorType,
});
},
getSelectedShape() {
let selectedShape = null;
this.shapes.all().forEach(shape => {
if (shape.isSelected()) {
selectedShape = shape;
}
});
return selectedShape;
},
setFill(shape, fill) {
let style = shape.style();
style.fill = fill;
shape.style(style);
},
onImgChange(e) {
var self = this;
var blob = e.target.files[0];
var fileReader = new FileReader();
fileReader.addEventListener('load', function() {
self.src = fileReader.result;
});
fileReader.readAsDataURL(blob);
}
},
watch: {
type: function() {
this.direction = 0;
}
}
});
new Vue({render: h => h(App)}).$mount("#app");
</script>
<style scoped>
.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;
}
</style>
<!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$/ko/vue/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- SystemJS -->
<script src="$DEMOROOT$/ko/vue/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app.vue');
System.import('$DEMOROOT$/ko/lib/vue/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' },
'*.vue': { loader: 'vue-loader' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js',
'@mescius/spread-sheets-shapes': 'npm:@mescius/spread-sheets-shapes/index.js',
'@mescius/spread-sheets-resources-ko': 'npm:@mescius/spread-sheets-resources-ko/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'jszip': 'npm:jszip/dist/jszip.js',
'css': 'npm:systemjs-plugin-css/css.js',
'vue': 'npm:vue/dist/vue.min.js',
'vue-loader': 'npm:systemjs-vue-browser/index.js',
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
}
}
});
})(this);
