|
@@ -83,140 +83,145 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import { SGraphScene, SGraphView, SLineStyle } from "@persagy-web/graph/";
|
|
|
- import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
|
|
|
- import { SColor } from "@persagy-web/draw/";
|
|
|
- //注: 开发者引入 EditPolygonItem 包为: import {EditPolygonItem} from "@persagy-web/edit/";
|
|
|
- import { EditPolygonItem } from "./../../../../../guides/edit/items/src/EditPolygonItem";
|
|
|
- import { hexify } from "./../../../../public/until/rgbaUtil";
|
|
|
+import { SGraphScene, SGraphView, SLineStyle } from "@persagy-web/graph/";
|
|
|
+import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
|
|
|
+import { SColor } from "@persagy-web/draw/";
|
|
|
+//注: 开发者引入 EditPolygonItem 包为: import {EditPolygonItem} from "@persagy-web/edit/";
|
|
|
+import { EditPolygonItem } from "./../../../../../guides/edit/items/src/EditPolygonItem";
|
|
|
+import { hexify } from "./../../../../public/until/rgbaUtil";
|
|
|
|
|
|
- export default {
|
|
|
- name: "editpolygon",
|
|
|
- data() {
|
|
|
- return {
|
|
|
- /** 命令所属的场景类 */
|
|
|
- scene: null,
|
|
|
- view: null, //view实例
|
|
|
- isCreated: false, //是否创建完成
|
|
|
- cmdStatus: "", //选中状态
|
|
|
- polygonItem: null, //存放创建的Item
|
|
|
- lineWidth: 1, //border线宽
|
|
|
- lineColor: "", //border线颜色
|
|
|
- fillColor: "", //填充色
|
|
|
- lineType: "", //border线类型
|
|
|
- options: [
|
|
|
- {
|
|
|
- value: "Solid",
|
|
|
- label: "实线"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "Dashed",
|
|
|
- label: "虚线"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "Dotted",
|
|
|
- label: "点"
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
+/**
|
|
|
+ * 编辑多边形示例
|
|
|
+ *
|
|
|
+ * @author 郝洁 <haojie@persagy.com>
|
|
|
+ */
|
|
|
+export default {
|
|
|
+ name: "editpolygon",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ /** 命令所属的场景类 */
|
|
|
+ scene: null,
|
|
|
+ view: null, //view实例
|
|
|
+ isCreated: false, //是否创建完成
|
|
|
+ cmdStatus: "", //选中状态
|
|
|
+ polygonItem: null, //存放创建的Item
|
|
|
+ lineWidth: 1, //border线宽
|
|
|
+ lineColor: "", //border线颜色
|
|
|
+ fillColor: "", //填充色
|
|
|
+ lineType: "", //border线类型
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ value: "Solid",
|
|
|
+ label: "实线"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "Dashed",
|
|
|
+ label: "虚线"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "Dotted",
|
|
|
+ label: "点"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 页面挂载
|
|
|
+ */
|
|
|
+ mounted() {
|
|
|
+ this.view = new SGraphView("edit_polygon");
|
|
|
+ this.scene = new SGraphScene();
|
|
|
+ this.view.scene = this.scene;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ create() {
|
|
|
+ this.cmdStatus = "create";
|
|
|
+ this.scene.root.children = [];
|
|
|
+ this.polygonItem = new EditPolygonItem(null);
|
|
|
+ this.polygonItem.status = SItemStatus.Create;
|
|
|
+ this.polygonItem.connect("finishCreated", this, this.finishCreated);
|
|
|
+ this.scene.addItem(this.polygonItem);
|
|
|
+ this.scene.grabItem = this.polygonItem;
|
|
|
+ this.view.update();
|
|
|
},
|
|
|
- /**
|
|
|
- * 页面挂载
|
|
|
- */
|
|
|
- mounted() {
|
|
|
- this.view = new SGraphView("edit_polygon");
|
|
|
- this.scene = new SGraphScene();
|
|
|
- this.view.scene = this.scene;
|
|
|
+ deleteItem() {
|
|
|
+ this.cmdStatus = "";
|
|
|
+ this.scene.removeItem(this.polygonItem);
|
|
|
+ this.polygonItem = null;
|
|
|
+ this.view.update();
|
|
|
},
|
|
|
- methods: {
|
|
|
- create() {
|
|
|
- this.cmdStatus = "create";
|
|
|
- this.scene.root.children = [];
|
|
|
- this.polygonItem = new EditPolygonItem(null);
|
|
|
- this.polygonItem.status = SItemStatus.Create;
|
|
|
- this.polygonItem.connect("finishCreated", this, this.finishCreated);
|
|
|
- this.scene.addItem(this.polygonItem);
|
|
|
- this.scene.grabItem = this.polygonItem;
|
|
|
- this.view.update();
|
|
|
- },
|
|
|
- deleteItem() {
|
|
|
- this.cmdStatus = "";
|
|
|
- this.scene.removeItem(this.polygonItem);
|
|
|
- this.polygonItem = null;
|
|
|
- this.view.update();
|
|
|
- },
|
|
|
- edit() {
|
|
|
- if (this.polygonItem) {
|
|
|
- if (this.polygonItem.status == SItemStatus.Normal) {
|
|
|
- this.scene.grabItem = this.polygonItem;
|
|
|
- this.polygonItem.status = SItemStatus.Edit;
|
|
|
- // this.polygonItem.verAndLeve = false;
|
|
|
- this.cmdStatus = "edit";
|
|
|
- } else {
|
|
|
- this.polygonItem.status = SItemStatus.Normal;
|
|
|
- this.scene.grabItem = null;
|
|
|
- this.cmdStatus = "";
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- eqDrawLine() {
|
|
|
- this.cmdStatus = "eqDrawLine";
|
|
|
- this.scene.root.children = [];
|
|
|
- this.polygonItem = new EditPolygonItem(null, []);
|
|
|
- this.polygonItem.verAndLeve = true;
|
|
|
- this.polygonItem.status = SItemStatus.Create;
|
|
|
- this.polygonItem.connect("finishCreated", this, this.finishCreated);
|
|
|
- this.polygonItem.moveable = true;
|
|
|
- this.scene.addItem(this.polygonItem);
|
|
|
- this.scene.grabItem = this.polygonItem;
|
|
|
- this.view.update();
|
|
|
- },
|
|
|
- // 改变线宽属性
|
|
|
- changeLineWidth(val) {
|
|
|
- if (this.polygonItem) {
|
|
|
- this.lineWidth = val;
|
|
|
- this.polygonItem.lineWidth = val;
|
|
|
- }
|
|
|
- },
|
|
|
- // 改变颜色
|
|
|
- changeColor(val) {
|
|
|
- if (this.polygonItem) {
|
|
|
- this.lineColor = hexify(val);
|
|
|
- this.polygonItem.strokeColor = new SColor(this.lineColor);
|
|
|
- }
|
|
|
- },
|
|
|
- // 改变填充颜色
|
|
|
- changeFillColor(val) {
|
|
|
- if (this.polygonItem) {
|
|
|
- this.fillColor = hexify(val);
|
|
|
- this.polygonItem.fillColor = new SColor(this.lineColor);
|
|
|
- }
|
|
|
- },
|
|
|
- //改变线得类型
|
|
|
- changeType(val) {
|
|
|
- if (this.polygonItem) {
|
|
|
- this.polygonItem.lineStyle = SLineStyle[val];
|
|
|
+ edit() {
|
|
|
+ if (this.polygonItem) {
|
|
|
+ if (this.polygonItem.status == SItemStatus.Normal) {
|
|
|
+ this.scene.grabItem = this.polygonItem;
|
|
|
+ this.polygonItem.status = SItemStatus.Edit;
|
|
|
+ // this.polygonItem.verAndLeve = false;
|
|
|
+ this.cmdStatus = "edit";
|
|
|
+ } else {
|
|
|
+ this.polygonItem.status = SItemStatus.Normal;
|
|
|
+ this.scene.grabItem = null;
|
|
|
+ this.cmdStatus = "";
|
|
|
}
|
|
|
- },
|
|
|
- // 完成创建后的回调
|
|
|
- finishCreated() {
|
|
|
- this.cmdStatus = "";
|
|
|
}
|
|
|
},
|
|
|
- watch: {
|
|
|
- polygonItem(val) {
|
|
|
- if (val) {
|
|
|
- this.lineWidth = val.lineWidth; // 线宽
|
|
|
- this.lineStyle = val.lineStyle; // 线条样式
|
|
|
- this.lineColor = val.strokeColor.value; // 线条填充色
|
|
|
- this.fillColor = val.fillColor.value; // 线条填充色
|
|
|
- this.lineType = this.options[val.lineStyle].value;
|
|
|
- } else {
|
|
|
- this.lineWidth = 0;
|
|
|
- }
|
|
|
+ eqDrawLine() {
|
|
|
+ this.cmdStatus = "eqDrawLine";
|
|
|
+ this.scene.root.children = [];
|
|
|
+ this.polygonItem = new EditPolygonItem(null, []);
|
|
|
+ this.polygonItem.verAndLeve = true;
|
|
|
+ this.polygonItem.status = SItemStatus.Create;
|
|
|
+ this.polygonItem.connect("finishCreated", this, this.finishCreated);
|
|
|
+ this.polygonItem.moveable = true;
|
|
|
+ this.scene.addItem(this.polygonItem);
|
|
|
+ this.scene.grabItem = this.polygonItem;
|
|
|
+ this.view.update();
|
|
|
+ },
|
|
|
+ // 改变线宽属性
|
|
|
+ changeLineWidth(val) {
|
|
|
+ if (this.polygonItem) {
|
|
|
+ this.lineWidth = val;
|
|
|
+ this.polygonItem.lineWidth = val;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 改变颜色
|
|
|
+ changeColor(val) {
|
|
|
+ if (this.polygonItem) {
|
|
|
+ this.lineColor = hexify(val);
|
|
|
+ this.polygonItem.strokeColor = new SColor(this.lineColor);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 改变填充颜色
|
|
|
+ changeFillColor(val) {
|
|
|
+ if (this.polygonItem) {
|
|
|
+ this.fillColor = hexify(val);
|
|
|
+ this.polygonItem.fillColor = new SColor(this.lineColor);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //改变线得类型
|
|
|
+ changeType(val) {
|
|
|
+ if (this.polygonItem) {
|
|
|
+ this.polygonItem.lineStyle = SLineStyle[val];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 完成创建后的回调
|
|
|
+ finishCreated() {
|
|
|
+ this.cmdStatus = "";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ polygonItem(val) {
|
|
|
+ if (val) {
|
|
|
+ this.lineWidth = val.lineWidth; // 线宽
|
|
|
+ this.lineStyle = val.lineStyle; // 线条样式
|
|
|
+ this.lineColor = val.strokeColor.value; // 线条填充色
|
|
|
+ this.fillColor = val.fillColor.value; // 线条填充色
|
|
|
+ this.lineType = this.options[val.lineStyle].value;
|
|
|
+ } else {
|
|
|
+ this.lineWidth = 0;
|
|
|
}
|
|
|
}
|
|
|
- };
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|