|
@@ -0,0 +1,109 @@
|
|
|
|
+<template>
|
|
|
|
+ <div>
|
|
|
|
+ <canvas :id="id" width="800" height="400" tabindex="0"/>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script lang="ts">
|
|
|
|
+ import { Component, Prop, Vue } from "vue-property-decorator";
|
|
|
|
+ import { v1 as uuid } from "uuid";
|
|
|
|
+ import {SCanvasView, SPainter, SPath, SColor} from "@persagy-web/draw/lib";
|
|
|
|
+
|
|
|
|
+ class ClipView extends SCanvasView{
|
|
|
|
+ img: CanvasImageSource;
|
|
|
|
+ _url: string = '';
|
|
|
|
+ arcX = 100;
|
|
|
|
+ arcY = 100;
|
|
|
|
+ stepX = 6;
|
|
|
|
+ stepY = 8;
|
|
|
|
+ timer: any;
|
|
|
|
+ set url(v:string){
|
|
|
|
+ if (this._url == v) {
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ this._url = v;
|
|
|
|
+ // @ts-ignore
|
|
|
|
+ this.img.src = v;
|
|
|
|
+ }
|
|
|
|
+ get url():string{
|
|
|
|
+ return this._url;
|
|
|
|
+ }
|
|
|
|
+ isLoadOver: boolean = false;
|
|
|
|
+ constructor(id:string){
|
|
|
|
+ super(id);
|
|
|
|
+ this.img = new Image();
|
|
|
|
+ this.img.onload = (e) => {
|
|
|
|
+ this.isLoadOver = true;
|
|
|
|
+ this.update();
|
|
|
|
+ };
|
|
|
|
+ this.img.onerror = (e) => {
|
|
|
|
+ this.isLoadOver = false;
|
|
|
|
+ this.update();
|
|
|
|
+ console.log("加载图片错误!", e);
|
|
|
|
+ };
|
|
|
|
+ }
|
|
|
|
+ onDraw(painter: SPainter): void {
|
|
|
|
+ // @ts-ignore
|
|
|
|
+ painter.engine._canvas.save();
|
|
|
|
+ // painter.save();
|
|
|
|
+ painter.clearRect(0,0,800,400);
|
|
|
|
+ clearTimeout(this.timer);
|
|
|
|
+
|
|
|
|
+ painter.pen.color = SColor.Black;
|
|
|
|
+ painter.brush.color = SColor.Black;
|
|
|
|
+ painter.drawRect(0, 0, 800, 400);
|
|
|
|
+
|
|
|
|
+ painter.brush.color = SColor.Transparent;
|
|
|
|
+ let path = new SPath();
|
|
|
|
+ path.arc(this.arcX, this.arcY, 100, 0, Math.PI*2, 1);
|
|
|
|
+ painter.clip = path;
|
|
|
|
+
|
|
|
|
+ painter.drawPath(path);
|
|
|
|
+ // console.log('------->');
|
|
|
|
+ if (this.isLoadOver) {
|
|
|
|
+ painter.drawImage(this.img, 0, 0, 800, 400);
|
|
|
|
+ }
|
|
|
|
+ // painter.restore();
|
|
|
|
+ // @ts-ignore
|
|
|
|
+ painter.engine._canvas.restore();
|
|
|
|
+ this.timer = setTimeout(()=>{
|
|
|
|
+ if (this.arcX + 100 >= 800) {
|
|
|
|
+ this.stepX *= -1;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ if (this.arcX - 100 < 0) {
|
|
|
|
+ this.stepX *= -1;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ if (this.arcY + 100 >= 400) {
|
|
|
|
+ this.stepY *= -1;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ if (this.arcY - 100 < 0) {
|
|
|
|
+ this.stepY *= -1;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ this.arcX += this.stepX;
|
|
|
|
+ this.arcY += this.stepY;
|
|
|
|
+ this.update()
|
|
|
|
+ }, 17);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ @Component
|
|
|
|
+ export default class SelectContainerCanvas extends Vue {
|
|
|
|
+ id: string = uuid();
|
|
|
|
+ view: ClipView | undefined;
|
|
|
|
+ img = require('../../public/assets/img/2.jpg');
|
|
|
|
+ mounted(): void {
|
|
|
|
+ this.init();
|
|
|
|
+ };
|
|
|
|
+ init():void{
|
|
|
|
+ this.view = new ClipView(this.id);
|
|
|
|
+ this.view.url= this.img;
|
|
|
|
+ };
|
|
|
|
+ beforeDestroy(): void {
|
|
|
|
+ clearTimeout(this.view!!.timer);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</script>
|