|
@@ -1,127 +0,0 @@
|
|
|
-<template>
|
|
|
- <div style="margin-top: 10px">
|
|
|
- <el-button size="small" @click="changeEnable">切换item1禁用状态</el-button>
|
|
|
- <canvas id="roundRect" width="740" height="400"/>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import {SGraphScene, SGraphShape, SGraphView} from '@persagy-web/graph/lib'
|
|
|
- import {SRect} from '@persagy-web/draw/lib'
|
|
|
-
|
|
|
- class RoundRect extends SGraphShape {
|
|
|
- constructor(parent, data) {
|
|
|
- super(parent, data.Style);
|
|
|
- this.leftTopX = data.X;
|
|
|
- this.leftTopY = data.Y;
|
|
|
- this.width = data.Width;
|
|
|
- this.height = data.Height;
|
|
|
- this.radius = data.Radius;
|
|
|
- }
|
|
|
-
|
|
|
- boundingRect() {
|
|
|
- return new SRect(this.leftTopX, this.leftTopY, this.width, this.height)
|
|
|
- }
|
|
|
-
|
|
|
- onDraw(painter) {
|
|
|
- super.onDraw(painter);
|
|
|
- painter.drawRoundRect(this.leftTopX, this.leftTopY, this.width, this.height, this.radius)
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- export default {
|
|
|
- name: "roundRect",
|
|
|
- data() {
|
|
|
- return {
|
|
|
- view: '',
|
|
|
- item: '',
|
|
|
- item2: '',
|
|
|
- rectData: {
|
|
|
- X: 0,
|
|
|
- Y: 0,
|
|
|
- Width: 500,
|
|
|
- Height: 500,
|
|
|
- Radius: 50,
|
|
|
- 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": {}
|
|
|
- },
|
|
|
- }
|
|
|
- },
|
|
|
- rectData2: {
|
|
|
- X: 1000,
|
|
|
- Y: 0,
|
|
|
- Width: 500,
|
|
|
- Height: 500,
|
|
|
- Radius: 50,
|
|
|
- Style: {
|
|
|
- "Default": {
|
|
|
- "Stroke": "#cccccc",
|
|
|
- "Fill": "#ffccee",
|
|
|
- "LineWidth": 2,
|
|
|
- "Effect": {}
|
|
|
- },
|
|
|
- "Selected": {
|
|
|
- "Stroke": "#66ff66",
|
|
|
- "Fill": "#ff33ee",
|
|
|
- "LineWidth": 3,
|
|
|
- "Effect": {}
|
|
|
- },
|
|
|
- "Disabled": {
|
|
|
- "Stroke": "#333333",
|
|
|
- "Fill": "#afafaf",
|
|
|
- "LineWidth": 1,
|
|
|
- "Effect": {}
|
|
|
- },
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.init()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- init() {
|
|
|
- this.view = new SGraphView('roundRect');
|
|
|
- const scene = new SGraphScene();
|
|
|
-
|
|
|
- this.item = new RoundRect(null, this.rectData);
|
|
|
- this.item.selectable = true;
|
|
|
- scene.addItem(this.item);
|
|
|
-
|
|
|
- this.item2 = new RoundRect(null, this.rectData2);
|
|
|
- this.item2.selectable = true;
|
|
|
- scene.addItem(this.item2);
|
|
|
-
|
|
|
- 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>
|