composite.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  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. value: SCompositeType.DestinationAtop,
  52. label: 'DestinationAtop'
  53. },{
  54. value: SCompositeType.DestinationIn,
  55. label: 'DestinationIn'
  56. },{
  57. value: SCompositeType.DestinationOut,
  58. label: 'DestinationOut'
  59. },{
  60. value: SCompositeType.DestinationOver,
  61. label: 'DestinationOver'
  62. },{
  63. value: SCompositeType.SourceAtop,
  64. label: 'SourceAtop'
  65. },{
  66. value: SCompositeType.SourceIn,
  67. label: 'SourceIn'
  68. },{
  69. value: SCompositeType.SourceOver,
  70. label: 'SourceOver'
  71. },{
  72. value: SCompositeType.SourceOut,
  73. label: 'SourceOut'
  74. },{
  75. value: SCompositeType.Xor,
  76. label: 'Xor'
  77. },{
  78. value: SCompositeType.Lighter,
  79. label: 'Lighter'
  80. },{
  81. value: SCompositeType.Copy,
  82. label: 'Copy'
  83. },
  84. ],
  85. circle: null,
  86. tableData: [
  87. {
  88. val: 'source-over',
  89. desc: '默认。在目标图像上显示源图像。'
  90. },{
  91. val: 'source-atop',
  92. desc: '在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。'
  93. },
  94. {
  95. val: 'source-in',
  96. desc: '在目标图像中显示源图像。只有目标图像之内的源图像部分会显示,目标图像是透明的。'
  97. },
  98. {
  99. val: 'source-out',
  100. desc: '在目标图像之外显示源图像。只有目标图像之外的源图像部分会显示,目标图像是透明的。'
  101. },
  102. {
  103. val: 'destination-over',
  104. desc: '在源图像上显示目标图像。'
  105. },
  106. {
  107. val: 'destination-atop',
  108. desc: '在源图像顶部显示目标图像。目标图像位于源图像之外的部分是不可见的。'
  109. },
  110. {
  111. val: 'destination-in',
  112. desc: '在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示,源图像是透明的。'
  113. },
  114. {
  115. val: 'destination-out',
  116. desc: '在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示,源图像是透明的。'
  117. },
  118. {
  119. val: 'lighter',
  120. desc: '显示源图像 + 目标图像。'
  121. },
  122. {
  123. val: 'copy',
  124. desc: '显示源图像。忽略目标图像。'
  125. },
  126. {
  127. val: 'xor',
  128. desc: '使用异或操作对源图像与目标图像进行组合。'
  129. }
  130. ]
  131. }
  132. },
  133. mounted() {
  134. this.init()
  135. },
  136. methods:{
  137. init(){
  138. this.view = new SGraphView('sourceOver');
  139. const scene = new SGraphScene();
  140. this.circle = new Circle(null, SCompositeType.SourceOut);
  141. scene.addItem(this.circle);
  142. this.view.scene = scene;
  143. this.view.fitSceneToView();
  144. this.view.scalable = false;
  145. },
  146. changeCom(val){
  147. if (this.circle) {
  148. this.circle.composite = val;
  149. }
  150. }
  151. }
  152. }
  153. </script>