ImageItem.vue 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  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>
  12. import { SGraphScene, SGraphView, SImageShowType, SImageItem } from "@persagy-web/graph";
  13. class SScene extends SGraphScene {
  14. imageItem = 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() {
  31. let view = new ImageView();
  32. view.scene = this.scene;
  33. view.fitSceneToView();
  34. },
  35. data() {
  36. return {
  37. scene: new SScene(),
  38. }
  39. },
  40. methods: {
  41. Full() {
  42. this.scene.imageItem.showType = SImageShowType.Full;
  43. },
  44. Equivalency() {
  45. this.scene.imageItem.showType = SImageShowType.Equivalency;
  46. },
  47. AutoFit() {
  48. this.scene.imageItem.showType = SImageShowType.AutoFit;
  49. },
  50. }
  51. }
  52. </script>
  53. <style scoped>
  54. </style>