radialGradient4.vue 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <template>
  2. <div>
  3. <canvas id="radialGradient4" 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: "radialGradient4",
  12. data(){
  13. return {
  14. view: ''
  15. }
  16. },
  17. mounted() {
  18. this.init();
  19. },
  20. methods:{
  21. init(){
  22. this.view = new SGraphView('radialGradient4');
  23. const scene = new SGraphScene();
  24. // 渐变1
  25. const grad1 = new SRadialGradient(
  26. 200,
  27. 200,
  28. 200, //圆1半径
  29. 800,
  30. 800,
  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>