123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109 |
- <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>
|