gradient.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  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 { SGradient, SLinearGradient, 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. /**
  13. * 渐变
  14. *
  15. * @author 郝洁 <haojie@persagy.com>
  16. */
  17. @Component
  18. export default class GradientCanvas extends Vue {
  19. @Prop() private arg!: string;
  20. /** 图 id */
  21. id: string = uuid();
  22. /** 实例化 view */
  23. view: SGraphView | undefined;
  24. /**
  25. * 页面挂载
  26. */
  27. mounted(): void {
  28. this.init();
  29. };
  30. /**
  31. * 初始化加载
  32. */
  33. init(): void {
  34. const arr = this.arg.split(',');
  35. this.view = new SGraphView(this.id);
  36. const scene = new SGraphScene();
  37. let grad: SGradient;
  38. try {
  39. if (arr.length > 4) { // 扩散渐变
  40. // @ts-ignore
  41. grad = new SRadialGradient(...arr);
  42. } else { // 线性渐变
  43. // @ts-ignore
  44. grad = new SLinearGradient(...arr);
  45. }
  46. } catch (e) {
  47. grad = new SLinearGradient(0, 0, 0, 1000);
  48. }
  49. const item = new GradRect(null, grad);
  50. scene.addItem(item);
  51. this.view.scene = scene;
  52. this.view.fitSceneToView();
  53. this.view.scalable = false;
  54. }
  55. }
  56. </script>