radialGradient2.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <template>
  2. <div>
  3. <canvas id="radialGradient2" 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: "radialGradient1",
  12. data(){
  13. return {
  14. view: ''
  15. }
  16. },
  17. mounted() {
  18. this.init();
  19. },
  20. methods:{
  21. init(){
  22. this.view = new SGraphView('radialGradient2');
  23. const scene = new SGraphScene();
  24. const grad = new SRadialGradient(
  25. 250,
  26. 250,
  27. 50, //圆1半径
  28. 500,
  29. 500,
  30. 500 //圆2半径
  31. );
  32. const item = new GradRect(null, grad);
  33. scene.addItem(item);
  34. this.view.scene = scene;
  35. this.view.fitSceneToView();
  36. this.view.scalable = false;
  37. }
  38. }
  39. }
  40. </script>
  41. <style scoped>
  42. </style>