CODEWITHSUNDEEP
angularkonvajs
Ragecrezz
Ragecrezz

Reputation: 21

KonvaJS - Draggable infinite grid stage

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. :-)

Upvotes: 0

Views: 1245

Answers (1)

Ondolin
Ondolin

Reputation: 294

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.

Upvotes: 2

Related Questions