Dynamically adding objects to Konva stage

konvajs / ng2-konva

Angular & Canvas - JavaScript library for drawing complex canvas graphics using Angular.

119 stars 33 forks source link

Dynamically adding objects to Konva stage #9

Open saitho opened 6 years ago

saitho commented 6 years ago

I'm trying to add objects to my Konva stage by clicking on buttons. I adjusted the star example but I can't get it to work. Is there a way to do that? :)

https://gist.github.com/saitho/a244927f4dc9ea73b50eb8f86a833047

caalbarracinc commented 6 years ago

Hi!, I've been trying unsucessfully to implement this aswell, add new shapes dinamically to a stage. I've tried @saithos aproximation and adding them directly to the layer as if I was using the JavaScript directly but no luck :( , is this task possible with the current library?

uahic commented 6 years ago

I tried this with queryList updates a while ago (when I was totally new to angular 4). I dont use ng2-konva right now, I have an own implementation which uses injectors alot, which uses the fact that each parent component can be injected to childs. The child then can operate on the parent. I will think about whether to continue with my implementation or ng2-konva in the next days. In case Ill go with ng2-konva, you might find the desired feature soon :-)

YurasovDV commented 5 years ago

Had the same issue, gave up and now I'm recreating the whole scene at every change, using *ngIf and ChangeDetectorRef

SimsonHa commented 5 years ago

Are there any updates on this? I am facing the same issue adding shapes in click event.

piku0709 commented 4 years ago

Is there any update yet, I also have the same requirement of adding stage, layers, groups and shapes dynamically ?

rvmn commented 4 years ago

In the latest version the above example seems to work fine. Just change the 'rxjs/Observable' -> 'rxjs' and add 'of' as import (of rxjs). Code: ` import { Component, OnInit, ViewChild } from '@angular/core'; import { BehaviorSubject, Observable,of } from 'rxjs'; 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-layer #dragLayer>
<button (click)="addStarBtn()">Adda <div ngFor="let item of list">test

}) 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 = []; 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(); } } } `. Please add this example to the examples, and this issue can be closed.

harnoor1996 commented 4 years ago

The mentioned example does not add star on button click. It updates the array but does not add it to the layer. After inspecting the stage and layer, the number of children in the layer remain unchanged

buseodaci commented 3 years ago

Any updates ? The issue still continues .

angelzabala commented 2 years ago

guys maybe you just need to add stage.batchDraw() after u add the figure dinamically in order to update the layer, this worked for me

SarathMohandas commented 1 year ago

Any updates ? The issue still there . Kindly share demo @ stackblitz

SarathMohandas commented 1 year ago

The mentioned example does not add star on button click. It updates the array but does not add it to the layer. After inspecting the stage and layer, the number of children in the layer remain unchanged

Any breakthrough?

robertKamrowski commented 10 months ago

Any updates here ?