|
@@ -5,53 +5,46 @@
|
|
|
<el-button @click="Equivalency">等比缩放</el-button>
|
|
|
<el-button @click="AutoFit">自适应</el-button>
|
|
|
</el-row>
|
|
|
- <canvas id="ImageItem1" width="740" height="400"/>
|
|
|
+ <canvas :id="id" width="740" height="400"/>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
- import { SGraphScene, SGraphView, SImageShowType, SImageItem } from "@persagy-web/graph";
|
|
|
+<script lang="ts">
|
|
|
+ import { SGraphScene, SGraphView } from "@persagy-web/graph";
|
|
|
+ import { SGraphSvgItem} from "@persagy-web/graph/lib";
|
|
|
+ import { Component, Vue } from "vue-property-decorator";
|
|
|
+ import { SSize} from "@persagy-web/draw/lib";
|
|
|
+ import { v1 as uuid } from "uuid";
|
|
|
|
|
|
- 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 Img extends SGraphSvgItem{
|
|
|
+ resize(oldSize:SSize, newSize: SSize) :void {
|
|
|
+ this.width = newSize.width;
|
|
|
+ this.height = newSize.height;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- class ImageView extends SGraphView {
|
|
|
- constructor() {
|
|
|
- super("ImageItem1");
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- export default {
|
|
|
+ @Component
|
|
|
+ export default class ZoneCanvas extends Vue {
|
|
|
+ id: string = uuid();
|
|
|
+ url: string = require('./1.jpg');
|
|
|
mounted() {
|
|
|
- let view = new ImageView();
|
|
|
- view.scene = this.scene;
|
|
|
+ const view = new SGraphView(this.id);
|
|
|
+ const scene = new SGraphScene();
|
|
|
+ const item = new Img(null, {Url: this.url, X: 0, Y: 0, Width: 100, Height: 100});
|
|
|
+ item.selectable = true;
|
|
|
+ view.scene = scene;
|
|
|
+ scene.addItem(item);
|
|
|
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;
|
|
|
- },
|
|
|
- }
|
|
|
+ };
|
|
|
+ Full() {
|
|
|
+ // this.scene.imageItem.showType = SImageShowType.Full;
|
|
|
+ };
|
|
|
+ Equivalency() {
|
|
|
+ // this.scene.imageItem.showType = SImageShowType.Equivalency;
|
|
|
+ };
|
|
|
+ AutoFit() {
|
|
|
+ // this.scene.imageItem.showType = SImageShowType.AutoFit;
|
|
|
+ };
|
|
|
}
|
|
|
</script>
|
|
|
|