12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788 |
- <template>
- <div style="margin-top: 10px;">
- <el-button size="small" @click="changeEnable">切换item1禁用状态</el-button>
- <canvas :id="id" width="740" height="400" />
- </div>
- </template>
- <script lang="ts">
- import {SGraphScene, SGraphPolyGroupItem, SGraphView} from "@persagy-web/graph/lib";
- import {SSize} from "@persagy-web/draw/lib";
- import { Component, Vue } from "vue-property-decorator";
- import { v1 as uuid } from "uuid";
- class Expolygon extends SGraphPolyGroupItem{
- resize(old:SSize,newS:SSize):void{
- const xs = newS.width / old.width;
- const ys = newS.height / old.height;
- // @ts-ignore
- this.pointList = this.pointList.map(t => {
- // @ts-ignore
- return t.map(item => {
- item.x = item.x * xs;
- item.y = item.y * ys;
- return item
- })
- });
- // console.log(this.pointList)
- }
- }
- @Component
- export default class ZoneCanvas extends Vue {
- view: SGraphView | undefined;
- item: Expolygon | undefined;
- id: string = uuid();
- rectData = {
- outline: [
- [{x:0,y:0},{x:0,y:1000},{x:700,y:1500},{x:500,y:1000},{x:200,y:0}],
- [{x:1000,y:1000},{x:1200,y:1000},{x:1200,y:1200},{x:1000,y:1200}]
- ],
- style: {
- "default":{
- "stroke": "#cccccc",
- "fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
- "lineWidth": 2,
- "effect": {}
- },
- "selected": {
- "stroke": "#66ff66",
- "fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
- "lineWidth": 3,
- "effect": {}
- },
- "disabled": {
- "stroke": "#333333",
- "fill": "#afafaf",
- "lineWidth": 1,
- "effect": {}
- },
- }
- };
- mounted() {
- this.init();
- };
- init(){
- this.view = new SGraphView(this.id);
- const scene = new SGraphScene();
- this.item = new Expolygon(null, this.rectData);
- this.item.selectable = true;
- scene.addItem(this.item);
- this.view.scene = scene;
- this.view.fitSceneToView();
- this.view.scalable = false;
- };
- changeEnable(){
- if (this.item) {
- this.item.enabled = !this.item.enabled;
- }
- }
- }
- </script>
- <style scoped>
- </style>
|