123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319 |
- <template>
- <div class="edit-line">
-
- <div class="btn-list">
- <el-button :class="[cmdStatus=='create' ? 'heightLight' : '']" size="small" @click="create">添加</el-button>
- <el-button
- :class="[cmdStatus=='deleteItem' ? 'heightLight' : '']"
- size="small"
- @click="deleteItem"
- >删除
- </el-button>
- </div>
- <div class="content">
- <div class="left">
- <canvas id="edit_polygon" width="700" height="460" tabindex="0"/>
- </div>
- <div class="line-property">
- <el-card shadow="always">
- <div slot="header" class="clearfix">
- <span>属性修改</span>
- </div>
- <div class="always-item">
- <span>边框宽:</span>
- <el-input-number
- size="small"
- v-model="lineWidth"
- @change="changeLineWidth"
- :min="1"
- :max="50"
- ></el-input-number>
- </div>
- <div class="always-item">
- <span>图展示类型:</span>
- <el-select
- style="width:130px"
- size="small"
- v-model="showType"
- @change="changeType"
- placeholder="请选择"
- >
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- ></el-option>
- </el-select>
- </div>
- <div class="always-item">
- <span>线颜色:</span>
- <el-color-picker v-model="lineColor" @change="changeColor" show-alpha></el-color-picker>
- </div>
-
- </el-card>
- </div>
- </div>
- </div>
- </template>
- <script lang="ts">
- import { SGraphScene, SGraphView, SImageShowType } from "@persagy-web/graph/";
- import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
- import { SColor } from "@persagy-web/draw/";
- import { EditImageItem } from "../../../../../guides/edit/items/src/EditImageItem";
- import { hexify } from "../../../../public/until/rgbaUtil";
- import { Component, Vue } from "vue-property-decorator";
- import { SMouseEvent } from "@persagy-web/base/lib";
- class SScene extends SGraphScene {
-
- cmdStatus = "";
-
- imageItem = null;
-
- constructor() {
- super();
- }
-
- onMouseDown(event: SMouseEvent): boolean {
- if (this.cmdStatus == "create" && this.imageItem) {
- this.imageItem.moveTo(event.x, event.y);
- this.addItem(this.imageItem);
- this.changeStatus("");
- } else {
- return super.onMouseDown(event);
- }
- }
-
- changeStatus() {
-
- }
- }
- @Component
- export default class EditImage extends Vue {
-
- scene: SGraphScene | null = null;
-
- view: SScene | undefined;
-
- isCreated: boolean = false;
-
- cmdStatus: string = "";
-
- imageItem = null;
-
- lineWidth: number = 1;
-
- lineColor: string = "";
-
- fillColor: string = "";
-
- showType: string = "";
-
- options: (string | number)[] = [
- {
- value: "Full",
- label: "铺满"
- },
- {
- value: "AutoFit",
- label: "自适应"
- },
- {
- value: "Equivalency",
- label: "等比缩放"
- }
- ];
-
- mounted(): void {
- this.view = new SGraphView("edit_polygon");
- this.scene = new SScene();
- this.view.scene = this.scene;
- this.scene.changeStatus = this.changeStatus;
- }
-
- create() {
- this.cmdStatus = "create";
- this.scene.root.children = [];
- this.imageItem = new EditImageItem(null);
- 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.imageItem.width = 100;
- this.imageItem.height = 100;
- this.imageItem.moveable = true;
- this.scene.imageItem = this.imageItem;
- }
-
- deleteItem() {
- this.cmdStatus = "";
- this.scene.removeItem(this.imageItem);
- this.imageItem = null;
- this.view.update();
- }
-
- edit() {
- if (this.imageItem) {
- if (this.imageItem.status == SItemStatus.Normal) {
- this.scene.grabItem = this.imageItem;
- this.imageItem.ststus = SItemStatus.Edit;
- this.cmdStatus = "edit";
- } else {
- this.imageItem.status = SItemStatus.Normal;
- this.scene.grabItem = null;
- this.cmdStatus = "";
- }
- }
- }
- eqDrawLine() {
- this.cmdStatus = "eqDrawLine";
- this.scene.root.children = [];
-
- this.imageItem.verAndLeve = true;
- this.imageItem.status = SItemStatus.Create;
- this.imageItem.connect("finishCreated", this, this.finishCreated);
- this.imageItem.moveable = true;
- this.scene.addItem(this.imageItem);
- this.view.update();
- }
-
- changeLineWidth(val) {
- if (this.imageItem) {
- this.lineWidth = val;
- this.imageItem.lineWidth = val;
- }
- }
-
- changeColor(val: any): void {
- if (this.imageItem) {
- this.lineColor = hexify(val);
- this.imageItem.strokeColor = new SColor(this.lineColor);
- }
- }
-
- changeFillColor(val: any) {
- if (this.imageItem) {
- this.fillColor = hexify(val);
- this.imageItem.fillColor = new SColor(this.lineColor);
- }
- }
-
- changeType(val) {
- if (this.imageItem) {
- this.imageItem.showType = SImageShowType[val];
- }
- }
-
- changeStatus() {
- this.cmdStatus = "";
- }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- }
- </script>
- <style scoped lang="less">
- .edit-line {
- width: 100%;
- height: 500px;
- .content {
- display: flex;
- justify-content: flex-start;
- .left {
- margin-right: 20px;
- }
- .line-property {
- width: 300px;
- margin-top: 20px;
- .always {
- width: 100%;
- height: 100%;
- }
- .always-item {
- display: flex;
- margin-top: 10px;
- justify-content: space-between;
- }
- }
- }
- .heightLight {
- color: #409eff;
- border-color: #c6e2ff;
- background-color: #ecf5ff;
- }
- }
- </style>
|