<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> import { SGraphScene, SGraphView, SImageShowType, SImageItem } from "@persagy-web/graph"; class SScene extends SGraphScene { imageItem = 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() { let view = new ImageView(); view.scene = this.scene; view.fitSceneToView(); }, data() { return { scene: new SScene(), } }, methods: { Full() { this.scene.imageItem.showType = SImageShowType.Full; }, Equivalency() { this.scene.imageItem.showType = SImageShowType.Equivalency; }, AutoFit() { this.scene.imageItem.showType = SImageShowType.AutoFit; }, } } </script> <style scoped> </style>