editline1.vue 6.1 KB

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