composite.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  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" :value="item.value"></el-option>
  11. </el-select>
  12. </div>
  13. <canvas :id="id" width="740" height="400" tabindex="0"/>
  14. </div>
  15. </template>
  16. <script lang="ts">
  17. import {SGraphItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
  18. import {SColor, SRect, SCompositeType, SPainter} from "@persagy-web/draw/lib"
  19. import { Component, Prop, Vue } from "vue-property-decorator";
  20. import { v1 as uuid } from "uuid";
  21. class Circle extends SGraphItem{
  22. _composite = SCompositeType.SourceOver;
  23. get composite():SCompositeType{
  24. return this._composite;
  25. }
  26. set composite(v:SCompositeType){
  27. this._composite = v;
  28. this.update();
  29. }
  30. constructor(parent: SGraphItem | null, com:SCompositeType){
  31. super(parent);
  32. this.composite = com ? SCompositeType.SourceOver : com;
  33. }
  34. boundingRect(): SRect {
  35. return new SRect(-500,-500,1500,1500);
  36. }
  37. onDraw(painter: SPainter): void {
  38. painter.brush.color = SColor.Blue;
  39. painter.pen.color = SColor.Transparent;
  40. painter.drawRect(0,0,1000,1000);
  41. painter.composite = this.composite;
  42. painter.brush.color = SColor.Red;
  43. painter.drawCircle(0,0,500);
  44. }
  45. }
  46. @Component
  47. export default class CompositeCanvas extends Vue {
  48. view: SGraphView | undefined;
  49. id: string = uuid();
  50. value: SCompositeType = SCompositeType.SourceOver;
  51. options = [{
  52. value: SCompositeType.DestinationAtop,
  53. label: 'DestinationAtop'
  54. },{
  55. value: SCompositeType.DestinationIn,
  56. label: 'DestinationIn'
  57. },{
  58. value: SCompositeType.DestinationOut,
  59. label: 'DestinationOut'
  60. },{
  61. value: SCompositeType.DestinationOver,
  62. label: 'DestinationOver'
  63. },{
  64. value: SCompositeType.SourceAtop,
  65. label: 'SourceAtop'
  66. },{
  67. value: SCompositeType.SourceIn,
  68. label: 'SourceIn'
  69. },{
  70. value: SCompositeType.SourceOver,
  71. label: 'SourceOver'
  72. },{
  73. value: SCompositeType.SourceOut,
  74. label: 'SourceOut'
  75. },{
  76. value: SCompositeType.Xor,
  77. label: 'Xor'
  78. },{
  79. value: SCompositeType.Lighter,
  80. label: 'Lighter'
  81. },{
  82. value: SCompositeType.Copy,
  83. label: 'Copy'
  84. }];
  85. circle: Circle | undefined;
  86. tableData = [{
  87. val: 'source-over',
  88. desc: '默认。在目标图像上显示源图像。'
  89. },{
  90. val: 'source-atop',
  91. desc: '在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。'
  92. },
  93. {
  94. val: 'source-in',
  95. desc: '在目标图像中显示源图像。只有目标图像之内的源图像部分会显示,目标图像是透明的。'
  96. },
  97. {
  98. val: 'source-out',
  99. desc: '在目标图像之外显示源图像。只有目标图像之外的源图像部分会显示,目标图像是透明的。'
  100. },
  101. {
  102. val: 'destination-over',
  103. desc: '在源图像上显示目标图像。'
  104. },
  105. {
  106. val: 'destination-atop',
  107. desc: '在源图像顶部显示目标图像。目标图像位于源图像之外的部分是不可见的。'
  108. },
  109. {
  110. val: 'destination-in',
  111. desc: '在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示,源图像是透明的。'
  112. },
  113. {
  114. val: 'destination-out',
  115. desc: '在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示,源图像是透明的。'
  116. },
  117. {
  118. val: 'lighter',
  119. desc: '显示源图像 + 目标图像。'
  120. },
  121. {
  122. val: 'copy',
  123. desc: '显示源图像。忽略目标图像。'
  124. },
  125. {
  126. val: 'xor',
  127. desc: '使用异或操作对源图像与目标图像进行组合。'
  128. }
  129. ];
  130. mounted():void {
  131. this.init()
  132. };
  133. init():void{
  134. this.view = new SGraphView(this.id);
  135. const scene = new SGraphScene();
  136. this.circle = new Circle(null, SCompositeType.SourceOut);
  137. scene.addItem(this.circle);
  138. this.view.scene = scene;
  139. this.view.fitSceneToView();
  140. this.view.scalable = false;
  141. };
  142. changeCom(val:SCompositeType):void{
  143. if (this.circle) {
  144. this.circle.composite = val;
  145. }
  146. }
  147. }
  148. </script>