radialGradient3.vue 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <template>
  2. <div>
  3. <canvas id="radialGradient3" width="740" height="400" tabindex="0"/>
  4. </div>
  5. </template>
  6. <script>
  7. import { SGraphItem, SGraphScene, SGraphView } from "@persagy-web/graph/lib";
  8. import {SColor, SRadialGradient, SRect} from "@persagy-web/draw/lib";
  9. import {GradRect} from "./GradRect";
  10. export default {
  11. name: "radialGradient3",
  12. data(){
  13. return {
  14. view: ''
  15. }
  16. },
  17. mounted() {
  18. this.init();
  19. },
  20. methods:{
  21. init(){
  22. this.view = new SGraphView('radialGradient3');
  23. const scene = new SGraphScene();
  24. // 渐变1
  25. const grad1 = new SRadialGradient(
  26. 100,
  27. 100,
  28. 50, //圆1半径
  29. 800,
  30. 800,
  31. 500 //圆2半径
  32. );
  33. // 渐变2
  34. const grad2 = new SRadialGradient(
  35. 200,
  36. 200,
  37. 300, //圆1半径
  38. 800,
  39. 800,
  40. 50 //圆2半径
  41. );
  42. const item = new GradRect(null, grad1);
  43. scene.addItem(item);
  44. const item2 = new GradRect(null,grad2);
  45. item2.moveTo(1300,0);
  46. scene.addItem(item2);
  47. this.view.scene = scene;
  48. this.view.fitSceneToView();
  49. this.view.scalable = false;
  50. }
  51. }
  52. }
  53. </script>
  54. <style scoped>
  55. </style>