gradient.vue 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <template>
  2. <div>
  3. <canvas :id="id" width="740" height="400" tabindex="0"/>
  4. </div>
  5. </template>
  6. <script lang="ts">
  7. import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
  8. import { SLinearGradient, SGradient, SRadialGradient } from "@persagy-web/draw/lib";
  9. import { GradRect } from "./GradRect";
  10. import { v1 as uuid } from "uuid";
  11. import { Component, Prop, Vue } from "vue-property-decorator";
  12. @Component
  13. export default class GradientCanvas extends Vue {
  14. @Prop() private arg!: string;
  15. id: string = uuid();
  16. view: SGraphView | undefined;
  17. mounted(): void {
  18. this.init();
  19. };
  20. init(): void {
  21. const arr = this.arg.split(',');
  22. this.view = new SGraphView(this.id);
  23. const scene = new SGraphScene();
  24. let grad: SGradient;
  25. try {
  26. if (arr.length > 4) {
  27. // @ts-ignore
  28. grad = new SRadialGradient(...arr);
  29. } else{
  30. // @ts-ignore
  31. grad = new SLinearGradient(...arr);
  32. }
  33. } catch (e) {
  34. grad = new SLinearGradient(0,0,0,1000);
  35. }
  36. const item = new GradRect(null, grad);
  37. scene.addItem(item);
  38. this.view.scene = scene;
  39. this.view.fitSceneToView();
  40. this.view.scalable = false;
  41. }
  42. }
  43. </script>