Guest User

Untitled

a guest
Mar 19th, 2018
87
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.69 KB | None | 0 0
  1. import { Component, OnInit, ViewChild } from '@angular/core';
  2. import { BehaviorSubject } from 'rxjs/BehaviorSubject';
  3. import { Observable } from 'rxjs/Observable';
  4. import { KonvaComponent } from 'ng2-konva';
  5.  
  6. @Component({
  7. selector: 'star-example',
  8. template: `
  9. <ko-stage #stage [config]="configStage">
  10. <ko-layer #layer>
  11. <ko-star *ngFor="let item of list"
  12. [config]="item">
  13. </ko-star>
  14. </ko-layer>
  15. <ko-layer #dragLayer></ko-layer>
  16. </ko-stage>
  17. <br>
  18. <button (click)="addStarBtn()">Adda</button>
  19. <div *ngFor="let item of list">test</div>
  20. `
  21. })
  22. export class StarExampleComponent implements OnInit {
  23. @ViewChild('stage') stage: KonvaComponent;
  24. @ViewChild('layer') layer: KonvaComponent;
  25. @ViewChild('dragLayer') dragLayer: KonvaComponent;
  26.  
  27. public width = 800;
  28. public height = 200;
  29. public list: Array<any> = [];
  30.  
  31. public configStage = Observable.of({
  32. width: this.width,
  33. height: this.height
  34. });
  35.  
  36. public addStarBtn() {
  37. this.addStar();
  38. this.layer.getStage().draw();
  39. }
  40.  
  41. protected addStar() {
  42. const scale = Math.random();
  43. this.list.push(
  44. new BehaviorSubject({
  45. x: Math.random() * 800,
  46. y: Math.random() * 200,
  47. rotation: Math.random() * 180,
  48. numPoints: 5,
  49. innerRadius: 30,
  50. outerRadius: 50,
  51. fill: '#89b717',
  52. opacity: 0.8,
  53. draggable: true,
  54. scaleX: scale,
  55. scaleY: scale,
  56. shadowColor: 'black',
  57. shadowBlur: 10,
  58. shadowOffsetX: 5,
  59. shadowOffsetY: 5,
  60. shadowOpacity: 0.6,
  61. startScale: scale
  62. })
  63. );
  64. }
  65.  
  66. public ngOnInit() {
  67. for (let n = 0; n < 10; n++) {
  68. this.addStar();
  69. }
  70. }
  71. }
Add Comment
Please, Sign In to add comment