|
@@ -1,47 +1,58 @@
|
|
|
<template>
|
|
|
<div style="margin-top: 10px;">
|
|
|
-<!-- <el-button size="small" @click="changeEnable">切换item1禁用状态</el-button>-->
|
|
|
-<!-- 圆角半径 : <el-input-number @change="changeY" v-model="R" size="mini" style="width: 100px"></el-input-number>-->
|
|
|
<canvas :id="id" width="740" height="400" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
import {SGraphAreaGroupItem, SGraphItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
|
|
|
- import {SPath, SPainter, SRect} from "@persagy-web/draw/lib";
|
|
|
import { Component, Prop, Vue } from "vue-property-decorator";
|
|
|
import { v1 as uuid } from "uuid";
|
|
|
|
|
|
- class sga extends SGraphItem{
|
|
|
- path: SPath;
|
|
|
- constructor(parent: SGraphItem | null){
|
|
|
- super(parent);
|
|
|
- this.path = new SPath();
|
|
|
- // @ts-ignore
|
|
|
- this.path.polygon([{x:0,y:0},{x:0,y:1000},{x:700,y:1500},{x:500,y:1000},{x:500,y:0}]);
|
|
|
- // @ts-ignore
|
|
|
- this.path.polygon([{x:0,y:0},{x:500,y:0},{x:300,y:500}]);
|
|
|
- }
|
|
|
- boundingRect(): SRect {
|
|
|
- return new SRect(0,0,700,1500)
|
|
|
- }
|
|
|
-
|
|
|
- onDraw(painter: SPainter) {
|
|
|
- painter.drawPath(this.path)
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
@Component
|
|
|
export default class AreaCanvas extends Vue {
|
|
|
id: string = uuid();
|
|
|
view: SGraphView | undefined;
|
|
|
+ areaData = {
|
|
|
+ OutLine: [
|
|
|
+ [
|
|
|
+ [{X:0,Y:0},{X:0,Y:1000},{X:1000,Y:1000},{X:1000,Y:0}],
|
|
|
+ [{X:200,Y:200},{X:800,Y:200},{X:800,Y:800},{X:200,Y:800}]
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ [{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,1200;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
|
|
|
+ "LineWidth": 2,
|
|
|
+ "Effect": {}
|
|
|
+ },
|
|
|
+ "Selected": {
|
|
|
+ "Stroke": "#66ff66",
|
|
|
+ "Fill": "SRadialGradient{500,500,50;500,500,800;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();
|
|
|
- const item = new sga(null);
|
|
|
+ const item = new SGraphAreaGroupItem(null, this.areaData);
|
|
|
+ item.selectable = true;
|
|
|
scene.addItem(item);
|
|
|
this.view.scene = scene;
|
|
|
this.view.fitSceneToView();
|