12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 |
- <template>
- <div>
- <el-row>
- <el-button @click="Full">铺满</el-button>
- <el-button @click="Equivalency">等比缩放</el-button>
- <el-button @click="AutoFit">自适应</el-button>
- </el-row>
- <canvas id="ImageItem1" width="740" height="400"/>
- </div>
- </template>
- <script lang="ts">
- import { SGraphScene, SGraphView, SImageShowType, SImageItem } from "@saga-web/graph";
- class SScene extends SGraphScene {
- imageItem: SImageItem = new SImageItem(null);
- constructor() {
- super();
- this.imageItem.moveable = true;
- this.imageItem.width = 400;
- this.imageItem.height = 300;
- 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";
- this.addItem(this.imageItem);
- }
- }
- class ImageView extends SGraphView {
- constructor() {
- super("ImageItem1");
- }
- }
- export default {
- mounted(): void {
- let view = new ImageView();
- // @ts-ignore
- view.scene = this.scene;
- view.fitSceneToView();
- },
- data() {
- return {
- scene: new SScene(),
- }
- },
- methods: {
- Full() {
- // @ts-ignore
- this.scene.imageItem.showType = SImageShowType.Full;
- },
- Equivalency() {
- // @ts-ignore
- this.scene.imageItem.showType = SImageShowType.Equivalency;
- },
- AutoFit() {
- // @ts-ignore
- this.scene.imageItem.showType = SImageShowType.AutoFit;
- },
- }
- }
- </script>
- <style scoped>
- </style>
|