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

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

<script lang="ts">
import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
import { SGradient, SLinearGradient, SRadialGradient } from "@persagy-web/draw/lib";
import { GradRect } from "./GradRect";
import { v1 as uuid } from "uuid";
import { Component, Prop, Vue } from "vue-property-decorator";

/**
 * 渐变
 *
 * @author 郝洁 <haojie@persagy.com>
 */
@Component
export default class GradientCanvas extends Vue {
    @Prop() private arg!: string;
    id: string = uuid();
    view: SGraphView | undefined;

    /**
     * 页面挂载
     */
    mounted(): void {
        this.init();
    };

    init(): void {
        const arr = this.arg.split(',');
        this.view = new SGraphView(this.id);
        const scene = new SGraphScene();
        let grad: SGradient;
        try {
            if (arr.length > 4) {
                // @ts-ignore
                grad = new SRadialGradient(...arr);
            } else {
                // @ts-ignore
                grad = new SLinearGradient(...arr);
            }
        } catch (e) {
            grad = new SLinearGradient(0, 0, 0, 1000);
        }
        const item = new GradRect(null, grad);
        scene.addItem(item);
        this.view.scene = scene;
        this.view.fitSceneToView();
        this.view.scalable = false;
    }
}
</script>