I have hundreds of shapes in canvas when onClick on a shape will take an action.
In my feature test, I am currently simulating the mouse click on a particular pixel. However, this is not ideal because the position of the graph may change. Unlike SVG, canvas doesn't expose the particular shape in the DOM. Is there a way to select the shape in a canvas by id for testing purposes?
You can use selectors to find any node inside the stage https://konvajs.org/docs/selectors/Select_by_id.html
const shape = stage.findOne('#id');
Related
I'm trying to make an editor using Konva.js.
In the editor I show a smaller draw area which becomes the final image. For this I'm using a group with a clipFunc. This gives a better UX since the transform controls of the transformer can be used "outside" of the canvas (visible part for the user) and allow the user to zoom and drag the draw area around (imagine a frame in Figma).
I want to implement object snapping based on this: https://konvajs.org/docs/sandbox/Objects_Snapping.html. (just edges and center for now) However I want it to be able to work when having multiple elements selected in my Transformer.
The strategy I'm using is basically calculating the snapping based on the .back element created by the transformer. When I know how much to snap I apply it to every node within the transformer.
However when doing it, the items starts jittering when moving the cursor close to the snapping lines.
My previous implementation was having the draw area fill the entire Stage, which I did manage to get working with the same strategy. (no jitter)
I don't really know what the issue is and I hope some of you guys can point me in the right direction.
I created a codepen to illustrate my issue: https://codesandbox.io/s/konva-transformer-snapping-1vwjc2?file=/src/index.ts
I would like to be able to fill a shape with a canvas; potentially to have one konva canvas generate an animation and update another konva canvas shape with it, masked inside a path. Is this possible?
Its not totally clear what you actually want to do, but what you describe is probably achievable with Konva layers. You see Konva is a wrapper for HTML5 canvas and one of its features is layers - so you have one Konva instance that must have a minimum of one layer but can have more. Konva cunningly uses a separate HTML5 canvas for each layer. See the example here in the Konva docs. If you hit F12 you can see the two canvas elements used, and there is a code sample too.
This gives a lot of power and some great performance management potential. And it is all baked in to Konva already so you will not have to manage multiple canvas instances in your own code.
Hi I'm making a baseball app and I want from users to input strike zone on a grid like this:
How can I build the visual part so that I won't have too much trouble with implementation of a tap gesture recogniser. It'll be great if I can make this resizable so it will look great on many different devices.
With the touch gesture I need to handle so kind of recognizing position in two ways.
In which section the touch was detected.
What are the approximate coordinates inside this section.
This data will be saved on a cloud and can be later used to show the dot on this grid on other devices.
Is there a way to detect touch in a non rectangular shapes? Maybe with Bezier Paths.
Do you have a suggestion how ti appear on screen without using whole grid as a image. I'd rather divide it in Outer grid and the Inner grid somehow and than create all the pieces in each of this grids. 8 pieces in outer and 9 in inner grid.
You can start with UIBezierPath and its method containsPoint:, although this method "does not take into account the line width used to stroke the path." (link), it is also true for UIBezierPath.
Refer further to this article.
I'm writing a script in gimp and I want to place several random points on the screen. I placed in my (python) script the two following lines
gimp.pdb.gimp_context_set_brush_size(5.0)
gimp.pdb.gimp_pencil(drawable,2,p)
But this didn't have the desired effect, or any effect.
Also, I don't know how to set the brush (the small icon next to the brush size in the gui).
Finally, is there a way to get a list of pencil dots on the current layer?
I have a 2D numpy array that I need to plot as an image with a certain scale. Within that image I need to be able to select a ROI or at least be able to display the mouse coordinates (of a specific target contained in the image). I tried using pyqtgraph but I can't seem to plot an image as a data source rather than just an image (i.e. can't seem to set axes, etc)... what would be the best way to do this, then? The image browser is compiled as a widget with a slider that scrolls through frames of the file; this widget is then embedded in a main window with a few table widgets.
I think imshow in matplotlib might work for you. It is easy to zoom, pan, and scale, and works easily with numpy.
(If this answer doesn't work for you, could you please refine your question. I'm unsure whether you're looking for any tool that will do the job, or something that works within the context of a gui that you've already implemented. If the later, I think you'll probably need to do the ROI yourself, by, say, selecting areas of the numpy array to plot, e.g. a[xmin:xmax, ymin:ymax].)