ImageItem.vue 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <template>
  2. <div>
  3. <el-row>
  4. <el-button @click="Full">铺满</el-button>
  5. <el-button @click="Equivalency">等比缩放</el-button>
  6. <el-button @click="AutoFit">自适应</el-button>
  7. </el-row>
  8. <canvas :id="id" width="740" height="400"/>
  9. </div>
  10. </template>
  11. <script lang="ts">
  12. import { SGraphScene, SGraphView } from "@persagy-web/graph";
  13. import { SGraphSvgItem} from "@persagy-web/graph/lib";
  14. import { Component, Vue } from "vue-property-decorator";
  15. import { SSize} from "@persagy-web/draw/lib";
  16. import { v1 as uuid } from "uuid";
  17. class Img extends SGraphSvgItem{
  18. resize(oldSize:SSize, newSize: SSize) :void {
  19. this.width = newSize.width;
  20. this.height = newSize.height;
  21. }
  22. }
  23. @Component
  24. export default class imageCanvas extends Vue {
  25. id: string = uuid();
  26. url: string = require('./1.jpg');
  27. mounted() {
  28. const view = new SGraphView(this.id);
  29. const scene = new SGraphScene();
  30. const item = new Img(null, {Url: this.url, X: 0, Y: 0, Width: 100, Height: 100});
  31. item.selectable = true;
  32. view.scene = scene;
  33. scene.addItem(item);
  34. view.fitSceneToView();
  35. };
  36. Full() {
  37. // this.scene.imageItem.showType = SImageShowType.Full;
  38. };
  39. Equivalency() {
  40. // this.scene.imageItem.showType = SImageShowType.Equivalency;
  41. };
  42. AutoFit() {
  43. // this.scene.imageItem.showType = SImageShowType.AutoFit;
  44. };
  45. }
  46. </script>
  47. <style scoped>
  48. </style>