ImageItem.vue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  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, SImageShowType, SImageItem } from "@saga-web/graph";
  13. class SScene extends SGraphScene {
  14. imageItem: SImageItem = new SImageItem(null);
  15. constructor() {
  16. super();
  17. this.imageItem.moveable = true;
  18. this.imageItem.width = 400;
  19. this.imageItem.height = 300;
  20. 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";
  21. this.addItem(this.imageItem);
  22. }
  23. }
  24. class ImageView extends SGraphView {
  25. constructor() {
  26. super("ImageItem1");
  27. }
  28. }
  29. export default {
  30. mounted(): void {
  31. let view = new ImageView();
  32. // @ts-ignore
  33. view.scene = this.scene;
  34. view.fitSceneToView();
  35. },
  36. data() {
  37. return {
  38. scene: new SScene(),
  39. }
  40. },
  41. methods: {
  42. Full() {
  43. // @ts-ignore
  44. this.scene.imageItem.showType = SImageShowType.Full;
  45. },
  46. Equivalency() {
  47. // @ts-ignore
  48. this.scene.imageItem.showType = SImageShowType.Equivalency;
  49. },
  50. AutoFit() {
  51. // @ts-ignore
  52. this.scene.imageItem.showType = SImageShowType.AutoFit;
  53. },
  54. }
  55. }
  56. </script>
  57. <style scoped>
  58. </style>