文本实例

目录

查看代码

<template>
  <div>
    <el-row>
      <el-input
        v-model="text"
        @change="handleChangeText"
        type="textarea"
        :autosize="{ minRows: 1, maxRows: 1}"
        placeholder="请输入内容"
        style="width:200px;"
      ></el-input>
      <el-input-number v-model="size" @change="handleChangeSize" :min="1" label="字号"></el-input-number>
      <el-color-picker v-model="color" @change="handleChangeColor" style="top: 15px;"></el-color-picker>
      <el-button @click="undo">Undo</el-button>
      <el-button @click="redo">Redo</el-button>
      <el-button @click="reset">Reset</el-button>
    </el-row>
    <canvas id="TextItem1" width="740" height="400" tabindex="0" />
  </div>
</template>

<script>
import { SUndoStack } from "@persagy-web/base/lib";
import { SFont } from "@persagy-web/draw/lib";
import {
  SGraphScene,
  SGraphView,
  SGraphPropertyCommand,
  SGraphMoveCommand,
  STextItem
} from "@persagy-web/graph/lib";

class SScene extends SGraphScene {
  undoStack = new SUndoStack();
  textItem = new STextItem(null);

  constructor() {
    super();
    this.textItem.moveable = true;
    this.textItem.x = 100;
    this.textItem.y = 100;
    this.addItem(this.textItem);
    this.textItem.connect("onMove", this, this.onItemMove.bind(this));
  }

  updateText(str) {
    if (this.textItem.text !== str) {
      let old = this.textItem.text;
      this.textItem.text = str;
      this.undoStack.push(
        new SGraphPropertyCommand(this, this.textItem, "text", old, str)
      );
    }
  }

  updateColor(color) {
    if (this.textItem.color !== color) {
      let old = this.textItem.color;
      this.textItem.color = color;
      this.undoStack.push(
        new SGraphPropertyCommand(this, this.textItem, "color", old, color)
      );
    }
  }

  updateSize(size) {
    if (this.textItem.font.size !== size) {
      let old = new SFont(this.textItem.font);
      let font = new SFont(this.textItem.font);
      font.size = size;
      this.textItem.font = font;
      this.undoStack.push(
        new SGraphPropertyCommand(this, this.textItem, "font", old, font)
      );
    }
  }

  onItemMove(item, ...arg) {
    this.undoStack.push(
      new SGraphMoveCommand(this, item, arg[0][0], arg[0][1])
    );
  }
}

class TestView extends SGraphView {
  constructor() {
    super("TextItem1");
  }
}

export default {
  data() {
    return {
      scene: new SScene(),
      text: "测试文本",
      size: 20,
      color: "#333333"
    };
  },
  mounted() {
    let view = new TestView();
    this.scene.updateText(this.text);
    this.scene.updateColor(this.color);
    this.scene.updateSize(this.size);
    view.scene = this.scene;
  },
  methods: {
    handleChangeText(text) {
      this.scene.updateText(text);
    },
    handleChangeColor(color) {
      this.scene.updateColor(color);
    },
    handleChangeSize(size) {
      this.scene.updateSize(size);
    },
    undo() {
      this.scene.undoStack.undo();
    },
    redo() {
      this.scene.undoStack.redo();
    },
    reset() {
      this.text = "测试文本";
      this.size = 20;
      this.color = "#333333";
      this.scene.updateText(this.text);
      this.scene.updateColor(this.color);
      this.scene.updateSize(this.size);
    }
  }
};
</script>

<style scoped>
</style>