sourceOver.vue 6.8 KB

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