editPolygon.vue 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. <template>
  2. <div class="edit-line">
  3. <!-- 所有按钮 -->
  4. <div class="btn-list">
  5. <el-button
  6. :class="[cmdStatus=='create' ? 'heightLight' : '']"
  7. size="small"
  8. @click="create"
  9. >创建多边形</el-button>
  10. <el-tooltip class="item" effect="dark" content="双击 item 也可进入编辑状态" placement="top-start">
  11. <el-button
  12. :class="[cmdStatus=='edit' ? 'heightLight' : '']"
  13. size="small"
  14. @click="edit"
  15. >编辑多边形</el-button>
  16. </el-tooltip>
  17. <el-button
  18. :class="[cmdStatus=='deleteItem' ? 'heightLight' : '']"
  19. size="small"
  20. @click="deleteItem"
  21. >删除</el-button>
  22. <el-tooltip class="item" effect="dark" content="长按 Shoft 配合左键也可触发该功能" placement="top-start">
  23. <el-button
  24. :class="[cmdStatus=='eqDrawLine' ? 'heightLight' : '']"
  25. size="small"
  26. @click="eqDrawLine"
  27. >垂直水平绘制</el-button>
  28. </el-tooltip>
  29. </div>
  30. <div class="content">
  31. <div class="left">
  32. <canvas id="edit_polygon" width="700" height="460" tabindex="0" />
  33. </div>
  34. <div class="line-property">
  35. <el-card shadow="always">
  36. <div slot="header" class="clearfix">
  37. <span>属性修改</span>
  38. </div>
  39. <div class="always-item">
  40. <span>边框宽:</span>
  41. <el-input-number
  42. size="small"
  43. v-model="lineWidth"
  44. @change="changeLineWidth"
  45. :min="1"
  46. :max="50"
  47. ></el-input-number>
  48. </div>
  49. <div class="always-item">
  50. <span>线类型:</span>
  51. <el-select
  52. style="width:130px"
  53. size="small"
  54. v-model="lineType"
  55. @change="changeType"
  56. placeholder="请选择"
  57. >
  58. <el-option
  59. v-for="item in options"
  60. :key="item.value"
  61. :label="item.label"
  62. :value="item.value"
  63. ></el-option>
  64. </el-select>
  65. </div>
  66. <div class="always-item">
  67. <span>线颜色:</span>
  68. <el-color-picker v-model="lineColor" @change="changeColor" show-alpha></el-color-picker>
  69. </div>
  70. <div class="always-item">
  71. <span>填充色:</span>
  72. <el-color-picker v-model="fillColor" @change="changeFillColor" show-alpha></el-color-picker>
  73. </div>
  74. </el-card>
  75. </div>
  76. </div>
  77. </div>
  78. </template>
  79. <script>
  80. import { SGraphScene, SGraphView, SLineStyle } from "@persagy-web/graph/";
  81. import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
  82. import { SPoint ,SColor} from "@persagy-web/draw/";
  83. //注: 开发者引入 EditPolygonItem 包为: import {EditPolygonItem} from "@persagy-web/edit/";
  84. import { EditPolygonItem } from "./../../../../../guides/edit/items/src/EditPolygonItem";
  85. import { hexify } from "./../../../../public/until/rgbaUtil";
  86. export default {
  87. name: "editpolygon",
  88. data() {
  89. return {
  90. scene: null, //场景
  91. view: null, //view实例
  92. isCreated: false, //是否创建完成
  93. cmdStatus: "", //选中状态
  94. polygonItem: null, //存放创建的Item
  95. lineWidth: 1, //border线宽
  96. lineColor: "", //border线颜色
  97. fillColor:"", //填充色
  98. lineType: "", //border线类型
  99. options: [
  100. {
  101. value: "Solid",
  102. label: "实线"
  103. },
  104. {
  105. value: "Dashed",
  106. label: "虚线"
  107. },
  108. {
  109. value: "Dotted",
  110. label: "点"
  111. }
  112. ]
  113. };
  114. },
  115. mounted() {
  116. this.view = new SGraphView("edit_polygon");
  117. this.scene = new SGraphScene();
  118. this.view.scene = this.scene;
  119. },
  120. methods: {
  121. create() {
  122. this.cmdStatus = "create";
  123. this.scene.root.children = [];
  124. this.polygonItem = new EditPolygonItem(null);
  125. this.polygonItem.status = SItemStatus.Create;
  126. this.polygonItem.connect("finishCreated", this, this.finishCreated);
  127. this.scene.addItem(this.polygonItem);
  128. this.scene.grabItem = this.polygonItem;
  129. this.view.update();
  130. },
  131. deleteItem() {
  132. this.cmdStatus = "";
  133. this.scene.removeItem(this.polygonItem);
  134. this.polygonItem = null;
  135. this.view.update();
  136. },
  137. edit() {
  138. if (this.polygonItem) {
  139. if (this.polygonItem.status == SItemStatus.Normal) {
  140. this.scene.grabItem = this.polygonItem;
  141. this.polygonItem.status = SItemStatus.Edit;
  142. // this.polygonItem.verAndLeve = false;
  143. this.cmdStatus = "edit";
  144. } else {
  145. this.polygonItem.status = SItemStatus.Normal;
  146. this.scene.grabItem = null;
  147. this.cmdStatus = "";
  148. }
  149. }
  150. },
  151. eqDrawLine() {
  152. this.cmdStatus = "eqDrawLine";
  153. this.scene.root.children = [];
  154. this.polygonItem = new EditPolygonItem(null, []);
  155. this.polygonItem.verAndLeve = true;
  156. this.polygonItem.status = SItemStatus.Create;
  157. this.polygonItem.connect("finishCreated", this, this.finishCreated);
  158. this.polygonItem.moveable = true;
  159. this.scene.addItem(this.polygonItem);
  160. this.scene.grabItem = this.polygonItem;
  161. this.view.update();
  162. },
  163. // 改变线宽属性
  164. changeLineWidth(val) {
  165. if (this.polygonItem) {
  166. this.lineWidth = val;
  167. this.polygonItem.lineWidth = val;
  168. }
  169. },
  170. // 改变颜色
  171. changeColor(val) {
  172. if (this.polygonItem) {
  173. this.lineColor = hexify(val);
  174. this.polygonItem.strokeColor = new SColor(this.lineColor);
  175. }
  176. },
  177. // 改变填充颜色
  178. changeFillColor(val) {
  179. if (this.polygonItem) {
  180. this.fillColor = hexify(val);
  181. this.polygonItem.fillColor = new SColor(this.lineColor);
  182. }
  183. },
  184. //改变线得类型
  185. changeType(val) {
  186. if (this.polygonItem) {
  187. this.polygonItem.lineStyle = SLineStyle[val];
  188. }
  189. },
  190. // 完成创建后的回调
  191. finishCreated() {
  192. this.cmdStatus = "";
  193. }
  194. },
  195. watch: {
  196. polygonItem(val) {
  197. if (val) {
  198. this.lineWidth = val.lineWidth; // 线宽
  199. this.lineStyle = val.lineStyle; // 线条样式
  200. this.lineColor = val.strokeColor.value; // 线条填充色
  201. this.fillColor = val.fillColor.value; // 线条填充色
  202. this.lineType = this.options[val.lineStyle].value;
  203. } else {
  204. this.lineWidth = 0;
  205. }
  206. }
  207. }
  208. };
  209. </script>
  210. <style scoped lang="less">
  211. .edit-line {
  212. width: 100%;
  213. height: 500px;
  214. .content {
  215. display: flex;
  216. justify-content: flex-start;
  217. .left {
  218. margin-right: 20px;
  219. }
  220. .line-property {
  221. width: 300px;
  222. margin-top: 20px;
  223. .always {
  224. width: 100%;
  225. height: 100%;
  226. }
  227. .always-item {
  228. display: flex;
  229. margin-top: 10px;
  230. justify-content: space-between;
  231. }
  232. }
  233. }
  234. .heightLight {
  235. color: #409eff;
  236. border-color: #c6e2ff;
  237. background-color: #ecf5ff;
  238. }
  239. }
  240. </style>