Here is the problem :
I have a canvas, and four (would be more in future, but 4 for testing...anyway, doesn't matter) images that can be "poped" into the canvas by clicking on it.
Each image can be present multiple times in the canvas.
So far, poping is working fine, images are draggable... But I can't add some resize or zIndex function as I can only select the last image add to the canvas.
In a ideal world, I would like, by clicking/dragging an image, put it on top of the canvas, and kinda "select" it, so that I can connect the resize functions to the image.
But with the array of images, I can't manage to identify properly the item dragged, and can't use (or don't manage to use) the selectors.
Thank you.
EDIT : some code
var imgCpt = 0;
var image = [];
function addDetails(img) {
imgCpt++;
var imageObj = new Image();
imageObj.onload = function() {
image[imgCpt] = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
draggable: true,
id:image[imgCpt]
});
image[imgCpt].setX((stage.getWidth()/2) - (image[imgCpt].getWidth()/2));
image[imgCpt].setY((stage.getHeight()/2) - (image[imgCpt].getHeight()/2));
eval(image[imgCpt]).on('click', function() {
alert(eval(imgCpt));
});
layer.add(image[imgCpt]);
stage.add(layer);
};
imageObj.src = 'uploads/'+img;
}
I've already tried different solutions : multiple layer, and acting on it instead of acting on image, working with shapes filled with image instead of image, but it's always the same problem : I can't get the id of the concerned element (instead of the id of the last insert element)
This version works with array, but I tried yersterday to build the image id with eval(); without more success.
Thank you for your help
EDIT² : sorry to insist, but I would really be glad to have some assistance on this point, even if I think it's more JS related than pure KineticJS related.
Thank you.
Ok Guys, just solved the problem :
eval("image["+imgCpt+"].on('click', function() {alert("+imgCpt+");});");
Instead of :
eval(image[imgCpt]).on('click', function() {
alert(eval(imgCpt));
});
Now time to set a true action behind the click.
Thank you for helping ;)
Related
I'm aware of binding a pop-up to ESRI's L.esri.DynamicMapLayer here. The following code below is successful.
$.ajax({
type: 'GET',
url: url + '?f=json',
data: { layer: fooType },
dataType: 'json',
success: function(json) {
var foo_layer = fooLayers[fooType].layers;
foo = L.esri.dynamicMapLayer({
url: url,
layers: [foo_layer],
transparent: true
}).addTo(map).bringToFront();
foo.bindPopup(function(error, featureCollection) {
if (error || featureCollection.features.length === 0) {
return false;
} else {
var obj = featureCollection.features[0].properties;
var val = obj['Pixel Value'];
var lat = featureCollection.features[0].geometry.coordinates[1];
var lon = featureCollection.features[0].geometry.coordinates[0];
new L.responsivePopup({
autoPanPadding: [10, 10],
closeButton: true,
autoPan: false
}).setContent(parseFloat(val).toFixed(2)).setLatLng([lat, lon]).openOn(map);
}
});
}
});
But rather than a click response I am wondering as to whether you can mouseover using bindTooltip instead on a dynamic map. I've looked at the documentation for L.esri.DynamicMapLayer which says it is an extension of L.ImageOverlay. But perhaps there is an issue outlined here that I'm not fully understanding. Maybe it is not even related.
Aside, I've been testing multiple variations of even the simplest code to get things to work below but have been unsuccessful. Perhaps because this is asynchronous behavior it isn't possible. Looking for any guidance and/or explanation(s). Very novice programmer and much obliged for expertise.
$.ajax({
type: 'GET',
url: url + '?f=json',
data: { layer: fooType },
dataType: 'json',
success: function(json) {
var foo_layer = fooLayers[fooType].layers;
foo = L.esri.dynamicMapLayer({
url: url,
layers: [foo_layer],
transparent: true
}).addTo(map).bringToFront();
foo.bindTooltip(function(error, featureCollection) {
if (error || featureCollection.features.length === 0) {
return false;
} else {
new L.tooltip({
sticky: true
}).setContent('blah').setLatLng([lat,lng]).openOn(map);
}
});
}
});
Serendipitously, I have been working on a different problem, and one of the byproducts of that problem may come in handy for you.
Your primary issue is the asynchronous nature of the click event. If you open up your map (the first jsfiddle in your comment), open your dev tools network tab, and start clicking around, you will see a new network request made for every click. That's how a lot of esri query functions work - they need to query the server and check the database for the value you want at the given latlng. If you tried to attach that same behavior to a mousemove event, you'll trigger a huge number of network requests and you'll overload the browser - bad news.
One solution of what you can do, and its a lot more work, is to read the pixel data under the cursor of the image returned from the esri image service. If you know the exact rgb value of the pixel under the cursor, and you know what value that rgb value corresponds to in the map legend, you can achieve your result.
Here is a working example
And Here is the codesandbox source code. Don't be afraid to hit refresh, CSB is little wonky in the way it transpiles the modules.
What is happening here? Let's look step by step:
On map events like load, zoomend, moveend, a specialized function is fetching the same image that L.esri.dynamicMapLayer does, using something called EsriImageRequest, which is a class I wrote that reuses a lot of esri-leaflet's internal logic:
map.on("load moveend zoomend resize", applyImage);
const flashFloodImageRequest = new EsriImageRequest({
url: layer_url,
f: "image",
sublayer: "3",
});
function applyImage() {
flashFloodImageRequest
.fetchImage([map.getBounds()], map.getZoom())
.then((image) => {
//do something with the image
});
}
An instance of EsriImageRequest has the fetchImage method, which takes an array of L.LatLngBounds and a map zoom level, and returns an image - the same image that your dynamicMapLayer displays on the map.
EsriImageRequest is probably extra code that you don't need, but I happen to have just run into this issue. I wrote this because my app runs on a nodejs server, and I don't have a map instance with an L.esri.dynamicMapLayer. As a simpler alternative, you can target the leaflet DOM <img> element that shows your dynamicMapLayer, use that as your image source that we'll need in step 2. You will have to set up a listener on the src attribute of that element, and run the applyImage in that listener. If you're not familiar with how leaflet manages the DOM, look into your elements tab in the inspector, and you can find the <img> element here:
I'd recommend doing it that way, and not the way my example shows. Like I said, I happened to have just been working on a sort-of related issue.
Earlier in the code, I had set up a canvas, and using the css position, pointer-events, and opacity properties, it lays exactly over the map, but is set to take no interaction (I gave it a small amount of opacity in the example, but you'd probably want to set opacity to 0). In the applyImage function, the image we got is written to that canvas:
// earlier...
const mapContainer = document.getElementById("leafletMapid");
const canvas = document.getElementById("mycanvas");
const height = mapContainer.getBoundingClientRect().height;
const width = mapContainer.getBoundingClientRect().width;
canvas.height = height;
canvas.width = width;
const ctx = canvas.getContext("2d");
// inside applyImage .then:
.then((image) => {
image.crossOrigin = "*";
ctx.drawImage(image, 0, 0, width, height);
});
Now we have an invisible canvas who's pixel content is exactly the same as the dynamicMapLayer's.
Now we can listen to the map's mousemove event, and get the mouse's rgba pixel value from the canvas we created. If you read into my other question, you can see how I got the array of legend values, and how I'm using that array to map the pixel's rgba value back to the legend's value for that color. We can use the legend's value for that pixel, and set the popup content to that value.
map.on("mousemove", (e) => {
// get xy position on cavnas of the latlng
const { x, y } = map.latLngToContainerPoint(e.latlng);
// get the pixeldata for that xy position
const pixelData = ctx.getImageData(x, y, 1, 1);
const [R, G, B, A] = pixelData.data;
const rgbvalue = { R, G, B, A };
// get the value of that pixel according to the layer's legend
const value = legend.find((symbol) =>
compareObjectWithTolerance(symbol.rgbvalue, rgbvalue, 5)
);
// open the popup if its not already open
if (!popup.isOpen()) {
popup.setLatLng(e.latlng);
popup.openOn(map);
}
// set the position of the popup to the mouse cursor
popup.setLatLng(e.latlng);
// set the value of the popup content to the value you got from the legend
popup.setContent(`Value: ${value?.label || "unknown"}`);
});
As you can see, I'm also setting the latlng of the popup to wherever the mouse is. With closeButton: false in the popup options, it behaves much like a tooltip. I tried getting it to work with a proper L.tooltip, but I was having some trouble myself. This seems to create the same effect.
Sorry if this was a long answer. There are many ways to adapt / improve my code sample, but this should get you started.
I've created two identical fiddles with different OpenLayers-Versions:
OpenLayers v3.18.0 and OpenLayers 4.1.1
The objective is to export a PNG in high resolution. I didn't include the actual exporting of the file. It is explained here if interested.
It all worked fine up to the newer version (I think until a 4.x version).
If you have the DPI-Setting in windows on 100%, both fiddles do the same - but if you change your DPI-Setting to 125%, the latter fiddle does not update the text Some text! and it becomes really small and is located in the wrong place.
The map stays like that, until I click into it (or I call map.updateSize()). So I thought, I add map.updateSize() at the end of precompose - but no matter where I do it, the exported image is wrong as the updateSize() seems to be async and happening AFTER postcompose.
I didn't find a breaking change regarding this issue. Am I overlooking something or is it a bug? Any suggestion for a workaround?
Thanks to the issue I opened on github I came up with the following solution. The most interesting part is the creation of a second ol.Map with a desired pixelRatio:
saveToFile = function (fileName, opt_ChangeSize, opt_PixelRatio, opt_DelayRenderPromise) {
var newMapComponent,
originalSize = mapComponent.getSize();
opt_ChangeSize = opt_ChangeSize || { width: originalSize[0], height: originalSize[1] };
var div = $(document.createElement("div"));
div.attr('id', 'DIV_SaveToFile_Renderer_' + (new Date()).getTime());
div.css('position', 'absolute');
div.css('top', '0');
div.css('left', '0');
div.css('visibility', 'hidden');
div.css('width', opt_ChangeSize.width + 'px');
div.css('height', opt_ChangeSize.height + 'px');
$('body').append(div);
newMapComponent = new ol.Map({
target: div[0].id,
layers: mapComponent.getLayers(),
pixelRatio: opt_PixelRatio,
view: mapComponent.getView()
});
// opt_DelayRenderPromise in this case returns when loading of some features has completed. It could also be postrender of map or whatever.
$q.when(opt_DelayRenderPromise).then(function () {
$timeout(function () {
var data,
canvas = div.find('canvas')[0];
data = canvas.toDataURL('image/png');
data = data.replace(/^data:image\/(png);base64,/, "");
MyUtilities.SaveBlobFromBase64(data, fileName);
div.remove();
mapComponent.setSize(originalSize);
mapComponent.renderSync();
});
});
mapComponent.setSize([opt_ChangeSize.width, opt_ChangeSize.height]);
mapComponent.renderSync();
};
I need to dynamically add groups of multiple groups of images to the canvas, these "multi-group" will react differently depending on which of he contained groups has been dragged over by another group. I need these multi-groups to be able to be selected, rotated and dragged around the screen.
Ive chosen to use FabricJS and create images using fabric.Image.fromURL, manipulate, then add them to the canvas in a callback function. To add multiple images to a group, you nest more images in cascading callback functions as shown in this tutorial
I cant find a way to get a reference to a group of images created this way so I can add another group of images. Declaring a variable before any calls to fabric.Image.fromURL and trying to assign a reference to a created image doesnt work. The only way Ive got something working is a horrible desparate hack of adding such a group to the canvas then setting it as the active object then creating a new group and adding that active object to the group, this is soooo wrong and I dont think it will work for 3 groups. Heres my last coding attempt;
fabric.Image.fromURL('images/icon_station.png', function(img) {
var img1 = img;
fabric.Image.fromURL('images/icon_curve.png', function(img) {
img.set({left: 64,top: 64,angle: -90});
var img2 = img;
fabric.Image.fromURL('images/icon_curve.png', function(img) {
var img3 = img;
var tile_loop = new fabric.Group([img1, img2, img3]);
tile_loop.set({left: 0, top: 0, height: 64, width: 64});
canvas.add(tile_loop).setActiveObject(tile_loop);
});
});
});
fabric.Image.fromURL('images/icon_station.png', function(img) {
img.set({left: 64,top: 64});
var img1 = img;
fabric.Image.fromURL('images/icon_straight.png', function(img) {
img.set({left: 64,top: 64});
var img2 = img;
fabric.Image.fromURL('images/icon_curve.png', function(img) {
img.set({left: 64,top: 64});
var img3 = img;
var tile_loop = new fabric.Group([img1,img2,img3,canvas.getActiveObject()]);
tile_loop.set({left: 128, top: 128, height: 128, width: 128});
canvas.add(tile_loop);
});
});
});
The only other way Ive seen is to load images into html tags and create them in fabric from the tags, like this
var imgElement = document.getElementById('my-img');
var imgInstance = new fabric.Image(imgElement, {left: 100,top: 100});
canvas.add(imgInstance);
but that seems like a last resort work around, I would prefer to load images up directly in fabricjs.
Ive tried to do this in Phaser but it doesnt do groups of groups, Fabric has all the other stuff I need so I would like to stay with it, its a shame it does these weird ways of handling images.
Any help is much appreciated, if all else fails Ill use the last resort, it would be great to find a clever correct way.
I created an example in JSFiddle;
http://jsfiddle.net/d7bjbpfb/
is there a way to implement a erase method for raphael objects. in this erase method I want to remove specific parts of a particular raphael object. It means that the erase method should work like a real eraser. In the raphael documentation there is a method call Paper.clear(). But we only can delete entire paper.
Any kind of help is appreciated.
The normal way to be to use the remove() method.
http://raphaeljs.com/reference.html#Element.remove
element.remove();
You could eventually create a function that draws shapes with the same color than your paper background-color, on click. Something like this code (jsfiddle at the end of the post). It would cover your content and not erase it, but it would look like it.
var timeoutId = 0;
var cursorX;
var cursorY;
var mouseStillDown = false;
paper = Raphael("paper1","100%","100%");
paper.rect(10,10,100,100).attr({
fill : "black"
});
$("#paper1").mousemove(function(event){
cursorY=event.pageY;
cursorX=event.pageX;
});
function erase() {
if (!mouseStillDown) { return; }
paper.rect(cursorX-25,cursorY-25,50,50).attr({
fill :"white",
stroke : "white"
});
if (mouseStillDown) { setInterval("erase", 100); }
}
$("#paper1").mousedown(function(event) {
mouseStillDown = true;
erase(event.pageX,event.pageY);
});
$("#paper1").mouseup(function(event) {
mouseStillDown = false;
});
Here, each time you click, it creates a white rectangle at your cursor position.
Here's a fiddle of the code : http://jsfiddle.net/c6Xs6/
With a few modifications you could create a menu allowing the user to choose the size and shape of the form you use to "erase".
Something more or less like this : http://jsfiddle.net/8ABe9/
You could also use a div following your cursor to show exactly where the "eraser" would be drawn.
Hope that helped you :)
I would like to two show a Chart and also present an url with a link to a bigger Chart. The small preview-image looks and works fine:
<canvas id="image"></canvas>
var ct1 = document.getElementById("image").getContext("2d");
ct1.canvas.width = document.getElementById("image").offsetWidth;
ct1.canvas.height = document.getElementById("image").offsetHeight;
var Chart1 = new Chart(ct1).Line(lineChartData1,options);
The canvas is wrapped in a div, that's why offsetWidth and offsetHeight (to fill this additional div-element). Cause of the responsive-design there is no fixed image. Anyway, this works perfectly. For the URL to the "bigger" image I want to have the URL. I know the toDataURL() will help.
var url = document.getElementById("image").toDataURL();
document.write(url);
There are two disturbing problems with it:
The URL with this way exisists and, but the image has no content.
I also want to give the canvas-image a new size, like I managed with ct1.canvas.width and ct1.canvas.height, but it seems I cannot add this to the toDataURL.
What's wrong with the code?
Okay, I think I got it. Chart.js is animating the charts, so the toDataURL() I mentioned in my first question rendered only an empty image. We have to initiate the toDataURL, not before the animation is done. We handle that with the options:
var options = {
onAnimationComplete: done
}
and a tiny function:
function done() {
console.log('done');
var url=document.getElementById("canvas").toDataURL();
document.getElementById("canvas_link").href=url;
}
I think that's all.