editimage.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319
  1. <!--suppress TypeScriptUnresolvedVariable -->
  2. <template>
  3. <div class="edit-line">
  4. <!-- 所有按钮 -->
  5. <div class="btn-list">
  6. <el-button :class="[cmdStatus=='create' ? 'heightLight' : '']" size="small" @click="create">添加</el-button>
  7. <el-button
  8. :class="[cmdStatus=='deleteItem' ? 'heightLight' : '']"
  9. size="small"
  10. @click="deleteItem"
  11. >删除
  12. </el-button>
  13. </div>
  14. <div class="content">
  15. <div class="left">
  16. <canvas id="edit_polygon" width="700" height="460" tabindex="0"/>
  17. </div>
  18. <div class="line-property">
  19. <el-card shadow="always">
  20. <div slot="header" class="clearfix">
  21. <span>属性修改</span>
  22. </div>
  23. <div class="always-item">
  24. <span>边框宽:</span>
  25. <el-input-number
  26. size="small"
  27. v-model="lineWidth"
  28. @change="changeLineWidth"
  29. :min="1"
  30. :max="50"
  31. ></el-input-number>
  32. </div>
  33. <div class="always-item">
  34. <span>图展示类型:</span>
  35. <el-select
  36. style="width:130px"
  37. size="small"
  38. v-model="showType"
  39. @change="changeType"
  40. placeholder="请选择"
  41. >
  42. <el-option
  43. v-for="item in options"
  44. :key="item.value"
  45. :label="item.label"
  46. :value="item.value"
  47. ></el-option>
  48. </el-select>
  49. </div>
  50. <div class="always-item">
  51. <span>线颜色:</span>
  52. <el-color-picker v-model="lineColor" @change="changeColor" show-alpha></el-color-picker>
  53. </div>
  54. <!-- <div class="always-item">
  55. <span>填充色:</span>
  56. <el-color-picker v-model="fillColor" @change="changeFillColor" show-alpha></el-color-picker>
  57. </div>-->
  58. </el-card>
  59. </div>
  60. </div>
  61. </div>
  62. </template>
  63. <script lang="ts">
  64. import { SGraphScene, SGraphView, SImageShowType } from "@persagy-web/graph/";
  65. import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
  66. import { SColor } from "@persagy-web/draw/";
  67. //注: 开发者引入 SImageItem 包为: import {SImageItem} from "@persagy-web/edit/";
  68. import { EditImageItem } from "../../../../../guides/edit/items/src/EditImageItem";
  69. import { hexify } from "../../../../public/until/rgbaUtil";
  70. import { Component, Vue } from "vue-property-decorator";
  71. import { SMouseEvent } from "@persagy-web/base/lib";
  72. /**
  73. * 编辑图片场景类
  74. *
  75. * @author 郝洁 <haojie@persagy.com>
  76. */
  77. class SScene extends SGraphScene {
  78. /** 命令状态 */
  79. cmdStatus = "";
  80. /** 绘制图片 Item */
  81. imageItem = null;
  82. /**
  83. * 构造函数
  84. */
  85. constructor() {
  86. super();
  87. }
  88. /**
  89. * 鼠标按下事件
  90. *
  91. * @param event 事件
  92. * @returns 是否处理
  93. */
  94. onMouseDown(event: SMouseEvent): boolean {
  95. if (this.cmdStatus == "create" && this.imageItem) { // 创建状态并且 Image 图片存在
  96. this.imageItem.moveTo(event.x, event.y);
  97. this.addItem(this.imageItem);
  98. this.changeStatus("");
  99. } else {
  100. return super.onMouseDown(event);
  101. }
  102. }
  103. /**
  104. * 改变状态
  105. */
  106. changeStatus() {
  107. // todo 未完成
  108. }
  109. }
  110. @Component
  111. export default class EditImage extends Vue {
  112. /** 命令所属的场景类 */
  113. scene: SGraphScene | null = null;
  114. /** 实例化 view */
  115. view: SScene | undefined;
  116. /** 是否创建完成 */
  117. isCreated: boolean = false;
  118. /** 选中状态 */
  119. cmdStatus: string = "";
  120. /** 存放创建的 Item */
  121. imageItem = null;
  122. /** border 线宽 */
  123. lineWidth: number = 1;
  124. /** border 线颜色 */
  125. lineColor: string = "";
  126. /** 填充色 */
  127. fillColor: string = "";
  128. /** 图展示类型 */
  129. showType: string = "";
  130. /** 选项 */
  131. options: (string | number)[] = [
  132. {
  133. value: "Full",
  134. label: "铺满"
  135. },
  136. {
  137. value: "AutoFit",
  138. label: "自适应"
  139. },
  140. {
  141. value: "Equivalency",
  142. label: "等比缩放"
  143. }
  144. ];
  145. /**
  146. * 页面挂载
  147. */
  148. mounted(): void {
  149. this.view = new SGraphView("edit_polygon");
  150. this.scene = new SScene();
  151. this.view.scene = this.scene;
  152. this.scene.changeStatus = this.changeStatus;
  153. }
  154. /**
  155. * 创建对象
  156. */
  157. create() {
  158. this.cmdStatus = "create";
  159. this.scene.root.children = [];
  160. this.imageItem = new EditImageItem(null);
  161. this.imageItem.url =
  162. "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";
  163. this.imageItem.width = 100;
  164. this.imageItem.height = 100;
  165. this.imageItem.moveable = true;
  166. this.scene.imageItem = this.imageItem;
  167. }
  168. /**
  169. * 删除命令
  170. */
  171. deleteItem() {
  172. this.cmdStatus = "";
  173. this.scene.removeItem(this.imageItem);
  174. this.imageItem = null;
  175. this.view.update();
  176. }
  177. /**
  178. * 编辑命令
  179. */
  180. edit() {
  181. if (this.imageItem) {
  182. if (this.imageItem.status == SItemStatus.Normal) {
  183. this.scene.grabItem = this.imageItem;
  184. this.imageItem.ststus = SItemStatus.Edit;
  185. this.cmdStatus = "edit";
  186. } else {
  187. this.imageItem.status = SItemStatus.Normal;
  188. this.scene.grabItem = null;
  189. this.cmdStatus = "";
  190. }
  191. }
  192. }
  193. // todo 作用 ?
  194. eqDrawLine() {
  195. this.cmdStatus = "eqDrawLine";
  196. this.scene.root.children = [];
  197. // this.imageItem = new EditPolylineItem(null, []);
  198. this.imageItem.verAndLeve = true;
  199. this.imageItem.status = SItemStatus.Create;
  200. this.imageItem.connect("finishCreated", this, this.finishCreated);
  201. this.imageItem.moveable = true;
  202. this.scene.addItem(this.imageItem);
  203. this.view.update();
  204. }
  205. /**
  206. * 改变线宽属性
  207. */
  208. changeLineWidth(val) {
  209. if (this.imageItem) {
  210. this.lineWidth = val;
  211. this.imageItem.lineWidth = val;
  212. }
  213. }
  214. /**
  215. * 改变颜色
  216. */
  217. changeColor(val: any): void {
  218. if (this.imageItem) {
  219. this.lineColor = hexify(val);
  220. this.imageItem.strokeColor = new SColor(this.lineColor);
  221. }
  222. }
  223. /**
  224. * 改变填充颜色
  225. */
  226. changeFillColor(val: any) {
  227. if (this.imageItem) {
  228. this.fillColor = hexify(val);
  229. this.imageItem.fillColor = new SColor(this.lineColor);
  230. }
  231. }
  232. /**
  233. * 改变图的展示类型
  234. */
  235. changeType(val) {
  236. if (this.imageItem) {
  237. this.imageItem.showType = SImageShowType[val];
  238. }
  239. }
  240. /**
  241. * 完成创建后的回调
  242. */
  243. changeStatus() {
  244. this.cmdStatus = "";
  245. }
  246. /**
  247. * 监听
  248. */
  249. // @Watch("imageItem")
  250. // imageItem(val) {
  251. // // if (val) {
  252. // // this.lineWidth = val.lineWidth; // 线宽
  253. // this.showType = this.options[val.showType].value;
  254. // // } else {
  255. // // this.lineWidth = 0;
  256. // // }
  257. // }
  258. //
  259. // cmdStatus(val) {
  260. // this.scene.cmdStatus = val;
  261. // }
  262. }
  263. </script>
  264. <style scoped lang="less">
  265. .edit-line {
  266. width: 100%;
  267. height: 500px;
  268. .content {
  269. display: flex;
  270. justify-content: flex-start;
  271. .left {
  272. margin-right: 20px;
  273. }
  274. .line-property {
  275. width: 300px;
  276. margin-top: 20px;
  277. .always {
  278. width: 100%;
  279. height: 100%;
  280. }
  281. .always-item {
  282. display: flex;
  283. margin-top: 10px;
  284. justify-content: space-between;
  285. }
  286. }
  287. }
  288. .heightLight {
  289. color: #409eff;
  290. border-color: #c6e2ff;
  291. background-color: #ecf5ff;
  292. }
  293. }
  294. </style>