area.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <template>
  2. <div style="margin-top: 10px;">
  3. <!-- <el-button size="small" @click="changeEnable">切换item1禁用状态</el-button>-->
  4. <!-- 圆角半径 : <el-input-number @change="changeY" v-model="R" size="mini" style="width: 100px"></el-input-number>-->
  5. <canvas :id="id" width="740" height="400" />
  6. </div>
  7. </template>
  8. <script>
  9. import {SGraphAreaGroupItem, SGraphItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
  10. import {SPath} from "@persagy-web/draw/lib";
  11. class sga extends SGraphItem{
  12. constructor(parent){
  13. super(parent);
  14. this.path = new SPath();
  15. this.path.polygon([{x:0,y:0},{x:0,y:1000},{x:700,y:1500},{x:500,y:1000},{x:200,y:0}])
  16. }
  17. onDraw(painter) {
  18. console.log(this.path);
  19. painter.drawPath(this.path)
  20. }
  21. }
  22. export default {
  23. name: "areaCanvas",
  24. data(){
  25. return{
  26. id: 'area'+Date.now(),
  27. view: ''
  28. }
  29. },
  30. mounted() {
  31. this.init();
  32. },
  33. methods:{
  34. init(){
  35. this.view = new SGraphView(this.id);
  36. const scene = new SGraphScene();
  37. const item = new sga(null);
  38. scene.addItem(item);
  39. this.view.scene = scene;
  40. this.view.fitSceneToView();
  41. console.log(item)
  42. }
  43. }
  44. }
  45. </script>
  46. <style scoped>
  47. </style>