konvajs

Is there an example or way of drawing a box around multiple objects on the konva canvas and by doing so selecting the objects which are inside this box with some kind of indicator around them? Here's a working snippet. Uses simple rect-overlap collision detection and corrects drag rect co-ordinates if user chooses to drag north or east. Should get you going. // Set up the canvas and shapes var s1 = new Konva.Stage({container: 'container1', width: 300, height: 200}); var layer1 = new Konva.Layer({draggable: false}); s1.add(layer1); // draw a background rect to catch events. var r1 = new Konva

There is a great tutorial Selecting Multiple Objects with KineticJS that teaches you how to create a selection box in HTML Canvas in order to select multiple objects, but the author Michelle Higgins wrote his code to select object that embraced by the selection box. The following JavaScript code expresses the algorithm: var pos = rectSel.getAbsolutePosition(); //get the extents of the selection box var selRecXStart = parseInt(pos.x); var selRecXEnd = parseInt(pos.x) + parseInt(rectSel.attrs.width); var selRecYStart = parseInt(pos.y); var selRecYEnd = parseInt(pos.y) + parseInt(rectSel.attrs

My problem is how to animate the drawing of a path between two points. Consider a curved line or path between two points, A & B. I can draw this easily on the canvas using the line drawing functions in Konvajs. However, what I actually want is to animate the revealing of the line so that it starts from point A and progressively draws to point B. The reveal should be animated so I can apply pleasing easings. As a comparable example, see the brief video on this site https://coggle.it/ where the video shows the creation of a new box and the line draws to connect it to the old. Here is a potential

So I went through the sample code listed on the vue-konva page. Although it samples creating shapes I understood it enough to try to display a simple image to start. Here is the base code. My question lies in how do I attach the actual image file to the "image" property. Or if I am missing something else. <template> <div id="app"> <h1>Display Image via Konva</h1> <div> <v-stage ref="stage" :config="configKonva"> <v-layer ref="layer"> <v-image :config="configImg"></v-image> </v-layer> </v-stage> </div> </div> </template> <script> import Vue from 'vue'; import VueKonva from 'vue-konva' Vue.use