sourceOver.vue 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <template>
  2. <div>
  3. <canvas id="sourceOver" width="740" height="400" tabindex="0"/>
  4. </div>
  5. </template>
  6. <script>
  7. import {SGraphItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
  8. import {SColor, SRect, SCompositeType} from "@persagy-web/draw/lib"
  9. class Circle extends SGraphItem{
  10. constructor(parent, com){
  11. super(parent);
  12. this.composite = com ? SCompositeType.SourceOver : com;
  13. }
  14. boundingRect() {
  15. return new SRect(-500,-500,1500,1500);
  16. }
  17. onDraw(painter) {
  18. painter.brush.color = SColor.Blue;
  19. painter.pen.color = SColor.Transparent;
  20. painter.drawRect(0,0,1000,1000);
  21. painter.composite = SCompositeType.SourceOut;
  22. painter.brush.color = SColor.Red;
  23. painter.drawCircle(0,0,500);
  24. painter.brush.color = SColor.Transparent;
  25. painter.pen.color = SColor.Black;
  26. painter.drawRect(-500,-500,1500,1500);
  27. }
  28. }
  29. export default {
  30. name: "sourceOver",
  31. data(){
  32. return {
  33. view:''
  34. }
  35. },
  36. mounted() {
  37. this.init()
  38. },
  39. methods:{
  40. init(){
  41. this.view = new SGraphView('sourceOver');
  42. const scene = new SGraphScene();
  43. const circle = new Circle(null, SCompositeType.SourceOut);
  44. scene.addItem(circle);
  45. this.view.scene = scene;
  46. this.view.fitSceneToView();
  47. this.view.scalable = false;
  48. },
  49. }
  50. }
  51. </script>
  52. <style scoped>
  53. </style>