0

I have a question regarding KonvaJS.

I am currently working on Angular CLI with ng2-konva, which is corresponding with all KonvaJS components. Now I want to create a stage, which is draggable infinitely. This is possible by setting drag: true in the config. But now I want to add a grid background to the stage, either dotted or line through.

I tried to troubleshoot myself, but couldn't find a way with Angular TypeScript Syntax on how to code that.

My config for the main stage:

public configBackground: Observable<any> = of ({
    width: window.innerWidth,
    height: window.innerHeight,
    fill: "#EBEEF3",
  })

Thanks in advance for your answers. If there's a duplicate, then sorry for that; feel free to share the link with me. :-)

Ragecrezz
  • 21
  • 2
  • So what issue do you have? Did you look there https://stackoverflow.com/questions/58445131/konva-infinite-grid-in-react? – lavrton Jun 23 '21 at 06:05
  • I saw that codepen, but the code is meant for React. I am trying to find out how to code it in Angular. - I am trying to create an infinite pannable and scalable grid and limit the size of the canvas to defined coordinates. – Ragecrezz Jun 23 '21 at 08:39

1 Answers1

1

I would recommend creating a layer for your grid and draw lines on it. If you want to see an example take a look at this implementation of mine.
The biggest problem is to make it highly performant. Therefore make sure to use lines instead of rectangles and use some other cool performance features given my konvajs like the listening: false tag.
It took me quite some time, but as far as I can say an extra layer is the best possible way to do the job.
If you have further questions about my implementation feel free to contact me via email.

Ondolin
  • 324
  • 2
  • 13