ImageItem.vue 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  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="ImageItem1" width="740" height="400"/>
  9. </div>
  10. </template>
  11. <script lang="ts">
  12. import { SGraphScene, SGraphView } from "@saga-web/graph";
  13. import { SImageItem } from "@saga-web/big/lib";
  14. import { SImageShowType } from "@saga-web/big/lib/enums/SImageShowType";
  15. class SScene extends SGraphScene {
  16. imageItem: SImageItem = new SImageItem(null);
  17. constructor() {
  18. super();
  19. this.imageItem.moveable = true;
  20. this.imageItem.width = 400;
  21. this.imageItem.height = 300;
  22. this.imageItem.url = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591685374103&di=cd5a56b2e3f5e12d7145b967afbcfb7a&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201408%2F05%2F20140805191039_cuTPn.jpeg";
  23. this.addItem(this.imageItem);
  24. }
  25. }
  26. class ImageView extends SGraphView {
  27. constructor() {
  28. super("ImageItem1");
  29. }
  30. }
  31. export default {
  32. mounted(): void {
  33. let view = new ImageView();
  34. view.scene = this.scene;
  35. view.fitSceneToView();
  36. },
  37. data() {
  38. return {
  39. scene: new SScene(),
  40. }
  41. },
  42. methods: {
  43. Full() {
  44. this.scene.imageItem.showType = SImageShowType.Full;
  45. },
  46. Equivalency() {
  47. this.scene.imageItem.showType = SImageShowType.Equivalency;
  48. },
  49. AutoFit() {
  50. this.scene.imageItem.showType = SImageShowType.AutoFit;
  51. },
  52. }
  53. }
  54. </script>
  55. <style scoped>
  56. </style>