composite.vue 5.7 KB

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