So…how large is the stage ? Theoretically infinite. You will not initially see the shape but it is there – make the stage draggable and you will be able to drag a far-offscreen shape it in to view. You can make a Konva stage 100px by 100px then draw a shape at. So…do the width & height limit the area in which you can draw? Answer – no. It’s a canvas element with the width and height set as HTML element as properties and in the style property. Don’t believe me? Hit F12 in your browser on any of the Konva demo pages and look at the elements where you see the Konva diagram. But sticking to the stage creation step, what do the width & height parameters affect? Answer – only the size of the canvas element. When we create a Konva stage we are actually creating an HTML5 canvas. Just before we get to that, let’s clear up the stage width and height parameters. Starting point – stage fills the viewport How will the stage move if we zoom in and out around the green cross. On the stage we have a small rect and a circle, and a point is shown by a green cross. Look at this diagram which represents a viewport, or HTML5 canvas element (red border) containing a Konva stage (blue rectangle). ![]() The zoom-at-a-point algorithm ‘moves’ the stage – it has to so that the point under the cursor can stay in position. You might want to open it and have a play before reading onwards.įirst let’s just get our heads around how the stage ‘moves’ as it is scaled. The zoom-at-a-point code is included, as are the four solutions for grid drawing that are mentioned below. The code for this article is available on CodePen here. how to draw a grid on the viewport area (what you really want and best performance). ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |