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.
Related
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.
After creating absoluteLayout object what is the easiest way to draw line between two objects in that?
I would recommend not to use absoluteLayout for drawing lines, but instead one of the Canvas addons:
https://vaadin.com/directory#!addon/canvas
https://vaadin.com/directory#!addon/canvas-plus
Depending of your use-case you also want to draw whatever you are drawing directly in the client and not from the server.
For your question is very limited I can't give you more guidance.
If you still want to use absoluteLayout and drawing lines, you should go with a simple div-element (you could for example add an empty Label or whatever) and style it via CSS so it looks like a line. You won't be able to "connect" your two objects easily, though - use a canvas for that purpose.
I'm using some tile layers in Openlayers3 (3.5.0), of different kinds (XYZ and plain TileImage). I want to make the tiles fade in as they are loaded.
I have found that the tile sources I'm using emit a tileloadend event (also tileloadstart and tileloaderror) and I can successfully catch this. Its event object gives me access to the corresponding ImageTile object, which has methods to get its coordinates and to get an image element.
The image element is a DOM image element in my case, but which is not actually attached to the DOM. It's not on the page -- it's just the source which is then loaded into the canvas element, as far as I can tell. So I'm not sure this actually helps me to fade it in.
Is there any way to do this?
I'm using a canvas to load a background image, and then, using jQuery UI, I call the droppable() function on the canvas and draggable() on a bunch of PNG images on the screen (that are not in the canvas). After the user drags one or more images on the canvas, I allow him to save the contents to a file using the following function:
function saveCanvas() {
var data = canvas.toDataURL("image/png");
if (!window.open(data)) {
document.location.href = data;
}
}
This successfully open another window with an image, that sadly contains only the original background image, not the dragged images. I'd like to save an image presenting the final stage of the canvas. What am I missing here?
Thanks for your time.
You've got to draw the images to the canvas.
Here is a live example:
http://jsfiddle.net/6YV88/244/
To try it out, drag the kitten and drop it somewhere over the canvas (which is the square above the kitten). Then move the kitten again to see that it's been drawn into the canvas.
The example is just to show how an image would be drawn into the canvas. In your app, you wouldn't use the draggable stop method. Rather, at save time you would iterate through the pngs, drawing them on to your canvas. Note that the jQuery offset() method is used to determine the positions of the canvas and images relative to the document.
You are saving the final state of the canvas. You have images atop the canvas and the canvas has zero knowledge of them.
The only way you can save the resulting thing you see is to, before you call toDataUrl, you must call ctx.drawImage with each of the images and actually draw them to the canvas.
Getting the right coordinates for the call to drawImage might get tricky but its not impossible. You'll have to use the pageX and pageY coordinates of the image, probably, and then draw them onto the canvas relative to the canvas' own pageX and pageY.