editimage.vue 8.8 KB

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