radialGradient5.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <template>
  2. <div>
  3. <canvas id="radialGradient5" width="740" height="400" tabindex="0"/>
  4. </div>
  5. </template>
  6. <script>
  7. import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
  8. import { SRadialGradient } from "@persagy-web/draw/lib";
  9. import {GradRect} from "./GradRect";
  10. export default {
  11. name: "radialGradient5",
  12. data(){
  13. return {
  14. view: ''
  15. }
  16. },
  17. mounted() {
  18. this.init();
  19. },
  20. methods:{
  21. init(){
  22. this.view = new SGraphView('radialGradient5');
  23. const scene = new SGraphScene();
  24. // 渐变1
  25. const grad1 = new SRadialGradient(
  26. 400,
  27. 400,
  28. 200, //圆1半径
  29. 600,
  30. 600,
  31. 200 //圆2半径
  32. );
  33. const item = new GradRect(null, grad1);
  34. scene.addItem(item);
  35. this.view.scene = scene;
  36. this.view.fitSceneToView();
  37. this.view.scalable = false;
  38. }
  39. }
  40. }
  41. </script>
  42. <style scoped>
  43. </style>