Is it possible to add konva js into existing canvas?
the canvas class is "custom" and it does not have an id is it possible to initiate Konva stage directly into a canvas instead of a container?
At the current moment (v1.1.8) Konva doesn't support this a use case. You can't use Konva with the existing canvas element.
You can use it only with <div> container.
Related
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');
In my project I am using konvajs. Is there any way to export as a SVG image ?
Konva doesn't have an API to export a stage into SVG. The only way around is to make your own SVG-to-konva and konva-to-SVG converter.
You can generate an svg by using the canvas2svg package and tying it into the underlying canvas reference.
You can set your Layer's context equal to a c2s instance, rendering it, and resetting your Layer's ref to what it was previously, as shown here.
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.
I am now using KonvaJS.
I know Text draws text. But it accepts only one style.
Here's my code to render text.
And I want to make Konva color to red and others green.
You can do live coding here
Currently, that is not possible with Konva. To resolve your issue you can:
Use several instances of Konva.Text with different styles
Use custom Konva.Shape and draw all text manually with native canvas access
No matter what I try I can't seem to stop it from using Canvas. I want all the tile images to be added to the DOM not canvas - http://jsfiddle.net/xug1nsbb/
renderer: "dom",
This really old version on OL is working how I want http://greatgasbeetle.com/PenistoneRoadZoomify/#zoom=5&lat=73002&lon=13777&layers=B"
The renderer option belongs to ol.Map, not ol.View.