I am creating a rectangle element in raphael JS as a tooltip on an SVG circle element generated by raphael JS. I am unable to access the coordinates of the center of the circle (which I need to place the rectangle tooltip) using the following code in Internet Explorer..
var c = {};
c.x = parseInt(c_element.node.attributes[0].nodeValue);
c.y = parseInt(c_element.node.attributes[1].nodeValue);
//code for the rectangle element tooltip
r = paper.rect(c.x,c.y,50,50);
Its working fine in Firefox.. But in IE, the tooltip gets created at the upper left corner of the div enclosing my raphael JS paper and not on the center o the circle as desired..
How do I solve this cross-browser issue? Please help..
I don't know for certain why IE doesn't like this, but there's a much easier way:
c.x = c_element.attr("cx");
c.y = c_element.attr("cy");
jsFiddle
If you log the Raphael object to the console, you can check out the "attrs" property to see what's in there. Different for every type of Raphael object.
While we're all here: I highly recommend using an absolutely positioned div for your tooltips. HTML handles things like wrapping text and resizing the tooltip to accomodate different amounts of text much more easily than the SVG text element. See this answer. (Whatever you use, you'll still need to access the coordinates of the circle.)
Related
I'm trying to center something on the stage using javascript inside an Adobe Animate CC canvas doc. Before in AS3 I would have accesses to the stage property.
So I would be able to do something like this
trace(stage.width);
I tried the same in js, but doesn't seem to work.
console.log(stage.width);
Does anyone know if there is an equivalent to the stage property in create js?
In a canvas project, use stage.canvas.width
For example, if you have a clip named myClip, you can center it like this:
this.myClip.x = stage.canvas.width / 2;
container.x = (lib.properties["width"]/2);
container.y = (lib.properties["height"]/2);
you can set values to lib properties. example:
lib.properties["height"] = "800"; // change to whatever you want
You can check your main js files top lines. These lines affect the style of you main canvas tag(check with inspect element). Notice that stage.canvas.width/heigth values change with browser resizing but lib.properties not so much
check image --> using lib. properties instead of stage
I'm not sure how to change the size or position in the .js,
In Adobe Animate cc 2015.2 you simply open the .fla file and go to "publish settings" and select "centre stage" + "make responsive". this obviously for the browser.
If you mean actually positioning the stage to centre inside Animate CC.
You will find an icon next to the "zoom" (100%), just click that and it will centre your project. Image of the icon I am talking about.
I need to apply zoom to the javascript canvas which I have badly accomplished by using the following line of code:
ctx.scale(2,2) //doubles everything's size
Instead of zooming, its obviously doubling the size of the canvas and all of its elements. I'd be okay with this if I got it working like the image below shows:
Any ideas on how I could accomplish what is depicted in the picture above? I'm not using any external libraries hence making this so difficult. Thanks.
You can translate the context by half the canvas size using ctx.translate()
EDIT :
var zoomfactor = 2; //set whatever you want as zoom factor
ctx.transform(zoomfactor,0,0,zoomfactor,-(zoomfactor-1)*canvas.width/2,-(zoomfactor-1)*canvas.height/2)
I have a group of elements that are masked by a rect in SnapSVG and I want to translate the elements, bringing new ones into view (and hiding ones that are currently in view). The code is really simple - here's a codepen: http://codepen.io/austinclemens/pen/ZbpVmX
As you can see from the pen, box1, which starts outside the mask element (clip) should cross through it when animated, but it never appears. Moreover, box2, which should move out of the clipping area, remains visible.
This example seems to do a similar thing and has no problems: http://svg.dabbles.info/snaptut-masks2
Here's the code from codepen:
var t = Snap('#target')
var clip=t.rect(200,200,200,200).attr({fill:'#fff'})
var box1=t.rect(300,100,50,50).attr({fill:'#000'})
var box2=t.rect(300,300,50,50).attr({fill:'#000'})
var boxgroup=t.group(box1,box2)
boxgroup.attr({mask:clip})
boxgroup.animate({transform:'t100,300'},2000)
I notice that the svg.dabbles examples translates the clip region by 0,0 at one point, but adding something like that doesn't seem to get me anywhere.
Ok, I figured this out thanks in part to this really great article about SVG transforms: http://sarasoueidan.com/blog/svg-transformations/
The upshot is that when I translate the box group, it takes the mask with it. This is a little confusing to me still - I guess the mask attribute is causing this somehow? Anyways, the solution is to apply an opposite translation to the mask to keep it in place. Check the pen to see it in action but basically I just had to add:
clip.animate({transform:'t-100,-300'},2000)
The tricky part of this is that you now need to synchronize the movement of the mask and the movement of the box group.
edit - I now demonstrate how synchronization can be achieved using snap's set.animate method on the codepen.
Im using this great article to produce a venn diagram with D3.
http://www.benfrederickson.com/venn-diagrams-with-d3.js/
It looks great but on occasion I get bubbles overlapping the the labels become hidden. Is there a way to make sure the text element is always on top? (see the picture below.. label A needs to be on top of circle B.
I found this good article but im struggling in how to implement this in the venn.
How can I bring a circle to the front with d3?
You should grab the latest code from master: this commit should fix the issue you had there https://github.com/benfred/venn.js/commit/4cb3bbef65b5b3c3ce02aee7d913e8814e898baf
Instead of having the 'A' label be overtop of the 'B' circle - it willnow move the label so that its in the certain of the 'A' region that isn't overlapped with 'B'. Some details are in this issue here: https://github.com/benfred/venn.js/issues/18
You might find it easier to work in actual layers. You can use g elements to create them. For example:
var lowerLayer = svg.append('g');
var upperLayer = svg.append('g');
Now anything you append to upperLayer will appear above anything you append to lowerLayer because the two g elements have been added to the DOM and are in a specific order.
Also check out this answer I wrote up for a similar question.
I am able to fill the image inside the circle. But the problem is image getting zoomed inside the circle, i want image to be less zoomed or fit into circle.
<div class="disp"></div>
JavaScript
var r = Raphael("disp");
var cir=r.circle(100, 100,33).attr({fill:"url(image.jpg)"});
// image get zoomed, how to make image fit into circle or less zoomed
Please help me! Thanks
You will need to do some mathematics. Don't use attr(fill) - create an image-object and fit it in your circle.
Here is a great example of such behaviour.
BTW, you wrote class="disp" and var r = Raphael("disp"); won't work - this function waits for id.
Here's a solution you can put directly into your code, assuming you're using jQuery as well as Raphael