editPolygon.vue 9.0 KB

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