I'm looking for a way for placing an object permanently to the back of the canvas.
I see that the various
canvas.sendBackwards(myObject)
canvas.sendToBack(myObject)
will send the object to the back of the canvas but if I add a new element and then send it backwards it will go beneath the other image and I need to avoid this. I cannot use canvas.setBackgroundImage because I'm creating a custom image class and setting it as backgroundImage will make me loose some functionality. I would like to set something like a z-index on the newly created image. For example, while initializing a new image I can set lockMovementX (and many others) to false or true, isn't there nothing like this for z-index of every canvas element, or do I have to push my background element to the back every time there's a change on the canvas?
I've run into the same situation - I want an image as a background layer yet don't want to apply it as a background image due to restricted functionality.
I did write a function for my application that re-stacks layers every-time there is new layer added. I set the name attribute to this layer so I could quickly identify what layer it is that needs to be sent to the back.
While this may seen inefficient, I've never had any performance issues related to this function. But also in my application I typically only have about 5 to 20 layers - typically on the lower end of that range.
Related
I have a draggable image class that displays an image as expected when it is the only object on the stage. But when I add other graphics objects the image is not visible until I mouseover where the image is located.
It seems like the stage needs an extra update when there are more graphics objects on the display list. Calling tick() or setting my update flag manually doesn’t solve the issue (presumably this happens too quickly).
I can hack around it by putting a counter in the tick function like
if(update || ticks < 10). Clearly, this is not really a solution; the tick code shouldn’t have to check the counter every tick, forever.
Does anybody know the correct way?
You can see it here: http://eduk8r.org/bridge/. You’ll have to mouseover the image the first time, though. (The image is located to the left hand side of the bridge).
The relevant code is in controller.js and DraggableImage.js.
UPDATE: I had thought that reloading the page was sufficient to display the image but that only seems to happen locally.
I am trying to draw svg shapes, add events(click, drag etc.) and properties to the shapes and save them to server from my web application. I also want to load these saved shapes from the server and access their events and properties from my web application.
My Problems are:
A. I can not load a previously saved svg shape while I am drawing new ones at the same time. I am trying to load saved svg blocks by using .html(). I have tried using append also with same results.
In this JSFiddle link I have tried to create a similar scenario. Once you click Load Annotation Button, an svg block renders. But it erases the previous element.
B. Before loading the saved annotations, if you click the existing line, you will find that the element is being selected (alert message with the id of element). But after you add saved annotations to the svg block, you cannot find the elements by clicking on them.
there must be something I am doing wrong. Can you point it out please?
Pure JavaScript (no JQuery, D3, or other external libraries). I'm dragging SVG objects that look like columns of rectangles around. They have connecting lines between the rectangles, and when I drag one rectangle across another, I remove all elements from the DOM, check whether each rectangle in a column corresponds to a rectangle in neighboring column, and draw a new connecting line between them if that condition is true. In the console I can see that the elements are created immediately, but they aren't rendered until I release the mouse and stop the drag. Because I may drag across more than one column and need to compare the results at each position before deciding where to drop, I need to force the new elements not just to be created immediately, but also to be rendered immediately, without being blocked until I release the mouse.
[Edit: In response for downvote for "not showing research," note the following (original) paragraph. Tried all suggestions I could find, mentioning the most common ones explicitly. Perhaps my research methods are unsophisticated; can you advise so that I could do a better job next time?]
Following suggestions on this site and elsewhere, I've tried adding and deleting an element from the DOM and toggling the display property of various elements, but without success.
Sample files are at https://github.com/obdurodon/drag. To run, clone and then open textual_correspondence_static_sample/test.xhtml in a browser (from the file system, so that it can find the CSS and JavaScript files to which it's linked). Grab a drag icon at the top of a column and pull left or right. Connecting lines repaint only on drop, but I need them to repaint immediately after every crossing (I'll worry about stretching them on mousemove later).
I think the reason is because you are giving the lines a stroke colour in endMove() (after your drawLines() call). But you are not doing that in the swapColumns() function. New elements in SVG have no stroke by default.
A newbie question. As I've explained in a prior post, I'm coming to SVG Land from Flash loaded with ActionScript expectations and misconceptions.
I've built an interactive graphic using D3 and I'm nearly finished except that I want to add a little pop-up box that displays when a user mouses over a state. Right now it appears as a static object labeled "West Virginia" on the left side of the stage:
http://www.50laboratories.com/miscellany/demographicclout2.html
The pop-up is a group with its own distinct ID. I need to be able to set its x and y location depending on the state being hovered over, but so far can't figure out how. It seems to me that I should be able to address a group in my JavaScript as I would a named movie clip in Flash, but visiting API references like this one, https://github.com/mbostock/d3/wiki/API-Reference, I see no references to methods and properties of group objects. Thanks in advance for your help.
Unlike actionscript, svg elements are dom nodes and manipulating them involves either setting their attributes or style properties. You could manipulate these by calling certain attribute/style setters of the dom nodes, but since you're using d3, you set those attributes/styles using d3's setters.
The way to position a element with d3 is to
1. select it, by the id you assigned it
2. set its transform attribute to translate([some-x], [some-y])
d3.select("#statepopup").attr("transform", "translate(50,100)");
P.S.
The transform attribute is also how you can scale and rotate the group.
Here is what I like to do. Let's say I'm loading an image from example.com/test.png on browser and image is not saved on local server. Then, I like to detect blue color in the image and replace/mask the it with red color. In other words, colors appear differently when they load. Is this pratical using javascript, html, ...or any other way?
If image was local, we could use color detection codes and create new image with modified color. However, in real time image loading, the process seems different. I appreciate if anyone can direct me to any api, sample codes, readings,...
Thanks
You could look at CSS3 Filters - specifically the hue() property. Maybe not as precise as you're looking for though, taking a specific pixel hue and changing it conditionally.
Alternatively, you could load the image into a <canvas> tag where you can do whatever you want with it, although there are certain restrictions to consider.