composite.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. <template>
  2. <div>
  3. <el-table :data="tableData" style="width: 100%" class="elementTable">
  4. <el-table-column prop="val" label="值" width="180"></el-table-column>
  5. <el-table-column prop="desc" label="描述"></el-table-column>
  6. </el-table>
  7. <div style="margin: 14px 0;">
  8. <span style="font-size: 14px;">选择融合方式</span>
  9. <el-select v-model="value" placeholder="请选择" @change="changeCom" size="small">
  10. <el-option v-for="item in options" :key="item.value" :label="item.label"
  11. :value="item.value"></el-option>
  12. </el-select>
  13. </div>
  14. <canvas :id="id" width="740" height="400" tabindex="0"/>
  15. </div>
  16. </template>
  17. <script lang="ts">
  18. import { SGraphItem, SGraphScene, SGraphView } from "@persagy-web/graph/lib";
  19. import { SColor, SCompositeType, SPainter, SRect } from "@persagy-web/draw/lib"
  20. import { Component, Vue } from "vue-property-decorator";
  21. import { v1 as uuid } from "uuid";
  22. /**
  23. * 融合对象示例
  24. *
  25. * @author 郝洁 <haojie@persagy.com>
  26. */
  27. class Circle extends SGraphItem {
  28. /** 融合方式 默认。在目标图像上显示源图像。 */
  29. _composite = SCompositeType.SourceOver;
  30. get composite(): SCompositeType {
  31. return this._composite;
  32. }
  33. set composite(v: SCompositeType) {
  34. this._composite = v;
  35. this.update();
  36. }
  37. /**
  38. * 构造函数
  39. *
  40. * @param parent Item 图像引擎
  41. * @param com 融合方式
  42. */
  43. constructor(parent: SGraphItem | null, com: SCompositeType) {
  44. super(parent);
  45. this.composite = com ? SCompositeType.SourceOver : com;
  46. }
  47. /**
  48. * 矩形数据类型绘制
  49. *
  50. * @return 边界区域
  51. */
  52. boundingRect(): SRect {
  53. return new SRect(-500, -500, 1500, 1500);
  54. }
  55. /**
  56. * Item 绘制操作
  57. *
  58. * @param painter 绘制对象
  59. */
  60. onDraw(painter: SPainter): void {
  61. painter.brush.color = SColor.Blue;
  62. painter.pen.color = SColor.Transparent;
  63. painter.drawRect(0, 0, 1000, 1000);
  64. //融合属性
  65. painter.composite = this.composite;
  66. painter.brush.color = SColor.Red;
  67. //绘制圆形
  68. painter.drawCircle(0, 0, 500);
  69. }
  70. }
  71. @Component
  72. export default class CompositeCanvas extends Vue {
  73. /** 实例化 view */
  74. view: SGraphView | undefined;
  75. /** 图 id */
  76. id: string = uuid();
  77. /** 融合方式 */
  78. value: SCompositeType = SCompositeType.SourceOver;
  79. /** 融合方式列表 */
  80. options = [{
  81. value: SCompositeType.DestinationAtop,
  82. label: 'DestinationAtop'
  83. }, {
  84. value: SCompositeType.DestinationIn,
  85. label: 'DestinationIn'
  86. }, {
  87. value: SCompositeType.DestinationOut,
  88. label: 'DestinationOut'
  89. }, {
  90. value: SCompositeType.DestinationOver,
  91. label: 'DestinationOver'
  92. }, {
  93. value: SCompositeType.SourceAtop,
  94. label: 'SourceAtop'
  95. }, {
  96. value: SCompositeType.SourceIn,
  97. label: 'SourceIn'
  98. }, {
  99. value: SCompositeType.SourceOver,
  100. label: 'SourceOver'
  101. }, {
  102. value: SCompositeType.SourceOut,
  103. label: 'SourceOut'
  104. }, {
  105. value: SCompositeType.Xor,
  106. label: 'Xor'
  107. }, {
  108. value: SCompositeType.Lighter,
  109. label: 'Lighter'
  110. }, {
  111. value: SCompositeType.Copy,
  112. label: 'Copy'
  113. }];
  114. /** 实例化 */
  115. circle: Circle | undefined;
  116. /** 参考表格 */
  117. tableData = [{
  118. val: 'source-over',
  119. desc: '默认。在目标图像上显示源图像。'
  120. }, {
  121. val: 'source-atop',
  122. desc: '在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。'
  123. },
  124. {
  125. val: 'source-in',
  126. desc: '在目标图像中显示源图像。只有目标图像之内的源图像部分会显示,目标图像是透明的。'
  127. },
  128. {
  129. val: 'source-out',
  130. desc: '在目标图像之外显示源图像。只有目标图像之外的源图像部分会显示,目标图像是透明的。'
  131. },
  132. {
  133. val: 'destination-over',
  134. desc: '在源图像上显示目标图像。'
  135. },
  136. {
  137. val: 'destination-atop',
  138. desc: '在源图像顶部显示目标图像。目标图像位于源图像之外的部分是不可见的。'
  139. },
  140. {
  141. val: 'destination-in',
  142. desc: '在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示,源图像是透明的。'
  143. },
  144. {
  145. val: 'destination-out',
  146. desc: '在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示,源图像是透明的。'
  147. },
  148. {
  149. val: 'lighter',
  150. desc: '显示源图像 + 目标图像。'
  151. },
  152. {
  153. val: 'copy',
  154. desc: '显示源图像。忽略目标图像。'
  155. },
  156. {
  157. val: 'xor',
  158. desc: '使用异或操作对源图像与目标图像进行组合。'
  159. }
  160. ];
  161. /**
  162. * 页面挂载
  163. */
  164. mounted(): void {
  165. this.init()
  166. };
  167. /**
  168. * 初始化加载
  169. */
  170. init(): void {
  171. this.view = new SGraphView(this.id);
  172. const scene = new SGraphScene();
  173. this.circle = new Circle(null, SCompositeType.SourceOut);
  174. scene.addItem(this.circle);
  175. this.view.scene = scene;
  176. this.view.fitSceneToView();
  177. this.view.scalable = false;
  178. };
  179. /**
  180. * 融合事件触发
  181. *
  182. * @param val 事件
  183. */
  184. changeCom(val: SCompositeType): void {
  185. if (this.circle) {
  186. this.circle.composite = val;
  187. }
  188. }
  189. }
  190. </script>