I am new to Three.js. I am trying to show tooltip on cubes/blocks only for that I am successful with the help of this link http://stemkoski.github.io/Three.js/Mouse-Tooltip.html If you see the tooltip changes the color and text on background(checkboxes) as well. I don't want that. I only want to show tooltip on the cubes.
Also, what would be the possible way to show html tags in the tooltip? As you cannot insert html tags in
context1.fillText( '<h1>Hello World</h1>', 4,20 );
I also tried to implement jQuery tooltips moving towards the mouse pointer but all in vain.
I would really appreciate your help with this.
To remove the highlight colors, remove lines 192-194 and 197-200:
// restore previous intersection object (if it exists) to its original color
if ( INTERSECTED )
INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
and
// store color of closest object (for later restoration)
INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
// set a new color for closest object
INTERSECTED.material.color.setHex( 0xffff00 );
In addition, to have better label customization options, I have written a different demo that you may want to consider at: http://stemkoski.github.io/Three.js/Sprite-Text-Labels.html -- if you want to insert HTML tags to format the font (as it appears you do), instead consider drawing text on a canvas, and on the canvas you can set options like font family, size, weight, etc., and then use the canvas as the image for your tooltip. Again, to see a working implementation of the code, please see the link above.
Good luck!
Related
I'm currently working on a piece of code that loads up a 3D image which initially isn't visible. It is supposed to be visible, however, after scaling and translating it, but no matter what I do, the screen remains black and I cannot see the 3D image.
I won't post the entire code but here's the section about the scaling and translating (the code portions that I've commented out is what I tried to implement as the solution):
const box = new THREE.Box3().setFromObject(object);
// object.scale.set( 2, 2, 2 );
// box.getCenter(object.position);
// object.geometry.center();
scene.add( object );
I'm confused whether I'm misunderstanding Box3, whether it has to do with the order in which I'm scaling/centering, or if it's my values, or something trivial that I'm forgetting to add.
EDIT: I believe that I need to properly size the bounding box around the image, and use that to scale the tiger. I'm still confused about this, because I assumed this line already did that:
const box = new THREE.Box3().setFromObject(object);
So I'm not sure how I can change the size of the bounding box so it is correct, and then scale it to the size I want.
I'm starting with the mxGraph JavaScript example dynamictoolbar.html and adding some extra functionally to it to create my own simple tool. I want to have a default text label on a new cell when it's created by dragging from the toolbar; ideally a different default label for each shape.
For example, if I drag the ellipse icon from the toolbar to the graph, I want a new ellipse vertex on the graph automatically displaying text "New Ellipse".
I've already enabled later editing of the default label (by double-click or F2) by setting:
var vertexStyle = graph.getStylesheet().getDefaultVertexStyle();
vertexStyle[mxConstants.STYLE_NOLABEL] = false;
and this works fine. But how can I get a default label when the new cell is dropped ? I'm new to mxGraph and don't understand all the classes yet. I've gone all the way through mxCellRenderer, mxCell, mxStyleSheet, mxShape and several others and can't find it. If possible I'd like to avoid using CSS, customised XML etc because I don't want to add those to my already huge learning curve ! A simple text label is fine. Thanks in advance.
I am not sure if I understood the question... But in the "addVertex" function here:
var vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
The first "null" is the default label... If you put tere for example "test" every shape that you will drop will have the label "test".
I am using Snap.svg to make elements of my SVG interactive.
How can I move an Element.group group of shapes in 'front' of all my other shapes? This action will take place upon a hover.
A simple JSFiddle example here:
http://jsfiddle.net/offmilk/b0av7jx6/
I'm trying to get the back two circles to come to the front when they are hovered over.
I know Raphaël has similar functionality for individual elements in the form of Element.toFront(). The creator of both answers a similar question here, but I'm unable to add his solution to my hover set-up.
Thanks in advance for your help!
I think this depends on whether you mind the actual SVG being changed, or whether you need the SVG to remain as it is (in which case you will need CSS).
As you mention toFront(), I'm assuming its ok to change the SVG.
In this case, all you need to do is append the element to the paper/svg again, and it will go to the front.
So you can write
s.append( element )
or
this.paper.append( element )
if you want this to be a function which works for any paper.
In this example, I would write it like the following with a reusable hover function...
function hoverOverFront() {
this.paper.append( this );
this.attr({ fill: 'green' });
}
function hoverOut() {
this.attr({ fill: 'black' });
};
back.hover( hoverOverFront, hoverOut );
front.hover( hoverOverFront, hoverOut );
jsfiddle
i have this http://bl.ocks.org/nkhine/raw/3150901/ where if you click on a country the code re-renders the map (only USA, UK and Afganistan topo files present)
i am stuck on how to animate the 'country' so that it 'moves' to the center of the screen and also fit the map to the users' viewport?
what i am doing is to fadeout and then remove the 'svg g' element for the id='countries' https://gist.github.com/nkhine/3150901#file-client-js-L120 and then add the id='country' within which i am drawing the country based on the topo file provided.
i tried to remove the entire svg and re-create it, but this does not 'feel' to be the correct approach!
what would be the correct way to alter the viewBox without having to redraw the entire SVG?
any advice much appreciated
I believe you need to change your .on("click") function to translate the image using the centroid of the country that has been clicked on, see the d3 example here http://bl.ocks.org/mbostock/2206590.
If I create a Label using Raphael, the default style is a black block with white text.
How can I change the background box colour, but not the text colour? I've tried:
paper.label(x, y, value).attr("fill", colour)
but that also fills the text and I end up with invisible text.
I also can't simply change the default colour in this function because I need to have a few different ones depending on a line that it's added to:
As you noticed,
Paper.label(x, y, value).attr(
fill : color
);
changes both the background fill color and the text fill color, resulting in invisible text.
Unspecified correctly explained that this is an array, so each portion must be altered separately, as they illustrated. However, they didn't mention the easiest way to change update both sets of attributes, so I wanted to share this tip. In order to do this, change the attributes into an array with two sets. The first element is the background, and the second is the text.
Paper.label(x, y, value).attr([{
fill : backgroundColor
}, {
fill : textColor
}]);
You can add any other applicable attributes to each part. Here is a working example: http://jsfiddle.net/VzpeG/1/
I was working on a graph similar to this and used:
.attr({fill: "#EF7C4D"})
Let me know how this goes...
var r = Raphael('divID', 320, 220);
text = r.text(100,100,"Hello").attr({fill:"#fff"});
text.label().attr({fill:"#f00"});
Here's a working fiddle http://jsfiddle.net/vpGyL/216/
Set any color on text or on label both apply separately...Hope this helps !
Digging in furthur...Paper.label(x,y,text) is different from Element.label()
If you look at the source code Paper.Label(x,y,text) is a set of rectangle element & text element, so doing .attr({fill:"SomeColor"}) applies to the entire set, hence both rectangle & text share same color(Hence the invisibility).
Oh yeah If you just want to change the text color do this Raphael.g.txtattr.fill = "#yourColorCode" But this changes the text color globally on all the charts and tooltips(don't seem to be a good idea).
While Element.Label as the documentation says is takes the context element & embed in a label tooltip, basically whatever element you use, applying .label will embed it inside a rectangle