Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import { Component, OnInit, ViewChild } from '@angular/core';
- import { BehaviorSubject } from 'rxjs/BehaviorSubject';
- import { Observable } from 'rxjs/Observable';
- import { KonvaComponent } from 'ng2-konva';
- @Component({
- selector: 'star-example',
- template: `
- <ko-stage #stage [config]="configStage">
- <ko-layer #layer>
- <ko-star *ngFor="let item of list"
- [config]="item">
- </ko-star>
- </ko-layer>
- <ko-layer #dragLayer></ko-layer>
- </ko-stage>
- <br>
- <button (click)="addStarBtn()">Adda</button>
- <div *ngFor="let item of list">test</div>
- `
- })
- export class StarExampleComponent implements OnInit {
- @ViewChild('stage') stage: KonvaComponent;
- @ViewChild('layer') layer: KonvaComponent;
- @ViewChild('dragLayer') dragLayer: KonvaComponent;
- public width = 800;
- public height = 200;
- public list: Array<any> = [];
- public configStage = Observable.of({
- width: this.width,
- height: this.height
- });
- public addStarBtn() {
- this.addStar();
- this.layer.getStage().draw();
- }
- protected addStar() {
- const scale = Math.random();
- this.list.push(
- new BehaviorSubject({
- x: Math.random() * 800,
- y: Math.random() * 200,
- rotation: Math.random() * 180,
- numPoints: 5,
- innerRadius: 30,
- outerRadius: 50,
- fill: '#89b717',
- opacity: 0.8,
- draggable: true,
- scaleX: scale,
- scaleY: scale,
- shadowColor: 'black',
- shadowBlur: 10,
- shadowOffsetX: 5,
- shadowOffsetY: 5,
- shadowOpacity: 0.6,
- startScale: scale
- })
- );
- }
- public ngOnInit() {
- for (let n = 0; n < 10; n++) {
- this.addStar();
- }
- }
- }
Add Comment
Please, Sign In to add comment