clip.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. <template>
  2. <div>
  3. <canvas :id="id" width="800" height="400" tabindex="0"/>
  4. </div>
  5. </template>
  6. <script lang="ts">
  7. import { Component, Vue } from "vue-property-decorator";
  8. import { v1 as uuid } from "uuid";
  9. import { SCanvasView, SColor, SPainter, SPath } from "@persagy-web/draw/lib";
  10. class ClipView extends SCanvasView {
  11. img: CanvasImageSource;
  12. arcX = 100;
  13. arcY = 100;
  14. stepX = 6;
  15. stepY = 8;
  16. timer: any;
  17. _url: string = '';
  18. set url(v: string) {
  19. if (this._url == v) {
  20. return;
  21. }
  22. this._url = v;
  23. // @ts-ignore
  24. this.img.src = v;
  25. }
  26. get url(): string {
  27. return this._url;
  28. }
  29. isLoadOver: boolean = false;
  30. /**
  31. * 构造函数
  32. * @param id
  33. */
  34. constructor(id: string) {
  35. super(id);
  36. this.img = new Image();
  37. this.img.onload = (e) => {
  38. this.isLoadOver = true;
  39. this.update();
  40. };
  41. this.img.onerror = (e) => {
  42. this.isLoadOver = false;
  43. this.update();
  44. console.log("加载图片错误!", e);
  45. };
  46. }
  47. /**
  48. * Item 绘制操作
  49. * @param painter 绘制对象
  50. */
  51. onDraw(painter: SPainter): void {
  52. // @ts-ignore
  53. painter.engine._canvas.save();
  54. // painter.save();
  55. //清空画布
  56. painter.clearRect(0, 0, 800, 400);
  57. clearTimeout(this.timer);
  58. //绘制操作
  59. painter.pen.color = SColor.Black;
  60. painter.brush.color = SColor.Black;
  61. painter.drawRect(0, 0, 800, 400);
  62. painter.brush.color = SColor.Transparent;
  63. let path = new SPath();
  64. path.arc(this.arcX, this.arcY, 100, 0, Math.PI * 2, 1);
  65. painter.clip = path;
  66. //绘制路径
  67. painter.drawPath(path);
  68. // console.log('------->');
  69. if (this.isLoadOver) {
  70. //绘制图片
  71. painter.drawImage(this.img, 0, 0, 800, 400);
  72. }
  73. // painter.restore();
  74. // @ts-ignore
  75. painter.engine._canvas.restore();
  76. this.timer = setTimeout(() => {
  77. if (this.arcX + 100 >= 800) {
  78. this.stepX *= -1;
  79. }
  80. if (this.arcX - 100 < 0) {
  81. this.stepX *= -1;
  82. }
  83. if (this.arcY + 100 >= 400) {
  84. this.stepY *= -1;
  85. }
  86. if (this.arcY - 100 < 0) {
  87. this.stepY *= -1;
  88. }
  89. this.arcX += this.stepX;
  90. this.arcY += this.stepY;
  91. this.update()
  92. }, 17);
  93. }
  94. }
  95. @Component
  96. export default class SelectContainerCanvas extends Vue {
  97. id: string = uuid();
  98. view: ClipView | undefined;
  99. img = require('../../public/assets/img/2.jpg');
  100. mounted(): void {
  101. this.init();
  102. };
  103. init(): void {
  104. this.view = new ClipView(this.id);
  105. this.view.url = this.img;
  106. };
  107. beforeDestroy(): void {
  108. clearTimeout(this.view!!.timer);
  109. }
  110. }
  111. </script>