persagy-web-doc/docs/.vuepress/components/engine/clip.vue

<template>
    <div>
        <canvas :id="id" width="800" height="400" tabindex="0"/>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { v1 as uuid } from "uuid";
import { SCanvasView, SColor, SPainter, SPath } from "@persagy-web/draw/lib";

/**
 * 裁剪
 *
 * @author 郝洁 <haojie@persagy.com>
 */
class ClipView extends SCanvasView {
    img: CanvasImageSource;
    arcX = 100;
    arcY = 100;
    stepX = 6;
    stepY = 8;
    timer: any;

    _url: string = '';
    set url(v: string) {
        if (this._url == v) {
            return;
        }
        this._url = v;
        // @ts-ignore
        this.img.src = v;
    } // Set url

    get url(): string {
        return this._url;
    } // Get url

    isLoadOver: boolean = false;

    /**
     * 构造函数
     * @param id
     */
    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);
        };
    }

        /**
         * Item 绘制操作
         * @param painter   绘制对象
         */
        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>