editimage.vue 6.8 KB

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