12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 |
- <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 { SCanvasView, SColor, SPainter } from "@saga-web/draw/lib";
- class shadowView extends SCanvasView {
- constructor(id) {
- super(id);
- this.shadowBlur = 10;
- this.shadowColor = new SColor('#00000060');
- 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(300,50,100,100);
- 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>
|