editline1.vue 7.8 KB

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