|
@@ -0,0 +1,83 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ 阴影扩散范围:<el-input-number @change="changeblur" v-model="blurl" size="mini" style="width: 100px"></el-input-number>
|
|
|
+ x轴偏移量:<el-input-number @change="changeX" v-model="X" size="mini" style="width: 100px"></el-input-number>
|
|
|
+ y轴偏移量:<el-input-number @change="changeY" v-model="Y" size="mini" style="width: 100px"></el-input-number>
|
|
|
+ <el-color-picker @change="changeColor" v-model="color" size="mini" style="vertical-align: middle"></el-color-picker>
|
|
|
+ <canvas id="shadow" width="740" height="400" tabindex="0"></canvas>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {SGraphScene, SGraphView} from "@saga-web/graph/lib";
|
|
|
+ import { SCanvasView, SColor, SPainter } from "@saga-web/draw/lib";
|
|
|
+
|
|
|
+ class shadowView extends SCanvasView {
|
|
|
+
|
|
|
+ constructor(id) {
|
|
|
+ super(id);
|
|
|
+ this.blurArr = [1,2,3,4,5,6,7,8,9,10];
|
|
|
+ this.shadowBlur = 10;
|
|
|
+ this.shadowColor = new SColor('#CCCCCC');
|
|
|
+ this.shadowOffsetX = 10;
|
|
|
+ this.shadowOffsetY = 10;
|
|
|
+ }
|
|
|
+
|
|
|
+ onDraw(canvas) {
|
|
|
+ canvas.clearRect(0,0,740,400);
|
|
|
+
|
|
|
+ canvas.pen.lineWidth = 1;
|
|
|
+ canvas.pen.color = SColor.Black;
|
|
|
+ canvas.brush.color = SColor.White;
|
|
|
+ canvas.shadow.shadowBlur = this.shadowBlur;
|
|
|
+ canvas.shadow.shadowColor = this.shadowColor;
|
|
|
+ canvas.shadow.shadowOffsetX = this.shadowOffsetX;
|
|
|
+ canvas.shadow.shadowOffsetY = this.shadowOffsetY;
|
|
|
+ canvas.drawRect(270,100,100,100);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ export default {
|
|
|
+ name: "shadow",
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ view: null,
|
|
|
+ blurl: 10,
|
|
|
+ X:10,
|
|
|
+ Y:10,
|
|
|
+ color:"#CCCCCC"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.view = new shadowView('shadow');
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ // 修改扩散距离
|
|
|
+ changeblur(v) {
|
|
|
+ this.view.shadowBlur = v;
|
|
|
+ this.view.update()
|
|
|
+ },
|
|
|
+ // x轴偏移量
|
|
|
+ changeX(v){
|
|
|
+ this.view.shadowOffsetX = v;
|
|
|
+ this.view.update()
|
|
|
+ },
|
|
|
+ // y轴偏移量
|
|
|
+ changeY(v){
|
|
|
+ this.view.shadowOffsetY = v;
|
|
|
+ this.view.update()
|
|
|
+ },
|
|
|
+ // 修改颜色
|
|
|
+ changeColor(v){
|
|
|
+ this.view.shadowColor = new SColor(v);
|
|
|
+ this.view.update()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ canvas{
|
|
|
+ border: 1px solid #eeeeee;
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+</style>
|