裁剪

目录

裁剪方法从原始画布中剪切任意形状和尺寸。

clip() 执行前必须 beginPath(), beginPath 意为开始新的路径; 而 closePath 意为闭合路径

查看实例代码

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